asp.net mvc jquery Ajax проблема частичного обновления страницы

Question

У меня проблема с частичным обновлением страницы на бритве Asp.net mvc 3, через которую я не могу дозвониться

У меня есть это частичное представление _LogOn, которое имеет 2 текстовых поля E-mail и Пароль и кнопку подключения для входа в систему:

@using (Html.BeginForm())
{

    @Html.ValidationSummary(true)

    <div class="editor-label">
        @Html.LabelFor(model => model.Email)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Email)
        @Html.ValidationMessageFor(model => model.Email)
    </div>

    <div class="editor-label">
        @Html.LabelFor(model => model.Password)
    </div>
    <div class="editor-field">
        @Html.EditorFor(model => model.Password)
        @Html.ValidationMessageFor(model => model.Password)
    </div>

    <p>
        <input id="submitConnexion" type="submit" value="Connexion" />
        <a id="lnForgetPwd"> Mot de passe oublié</a>
    </p>
}

А вот и контроллеры: контроллер GET делает не что иное, как захват представления _LogonpartalV и передачу его в jquery для обновления div с именем Div-2.

    // GET: Account/Logon 
    public ActionResult LogOn()
    {
        return PartialView("_LogOn");
    }

Предполагается, что POST-контроллер проверит правильность пароля, если он вернется к значению Json, равному true, если логин / пароль в порядке, в противном случае обновите Div-2 с ошибками.

    // POST: Account/Logon
    [HttpPost]
    public ActionResult LogOn(UserLogon model)
    {
        bool result = false;

        if (ModelState.IsValid)
        {
            UserManager userManager = new UserManager();
            string password = userManager.GetUserPassword(model.Email);

            if (string.IsNullOrEmpty(password))
            {

                ModelState.AddModelError("", "Mot de passe ou email incorrect.");
                result = false;
            }

            if (model.Password == password)
            {
                FormsAuthentication.SetAuthCookie(model.Email, false);
                result = true;
            }
        }

        //return Json(new { JsResult = result });

        return PartialView("_Logon", model);

    }

И, наконец, код Ajax Jquery

    // Ajax call POST for login form button submitConnexion
    $("#submitConnexion").live('click', function () {

        var email = $("#div-2 #Email").val();
        var password = $("#div-2 #Password").val();

        var data = { Email: "hello", Password: password };

        alert(email + password);

        $.ajax({

                url: "/Account/LogOn",
                type: "POST",
                //data: JSON.stringify(data),
                //contentType: 'application/json; charset=utf-8',

                success: function (result) {

                    alert("Hello");
                    $("#div-2").empty();
                    $("#div-2").html(result).hide().fadeIn(300);
                }
        });

    });
    // Ajax call POST for login form button

не работает 2 проблемы

1. каждый раз, когда я нажимаю на кнопку 'Connexion', пост-контроллер запускается (я предполагал из @html.Beginform _Logon Partial View), а не из Ajax Jquery

В результате частичный просмотр отображается на новой интернет-странице, а не в Div-2

1. Я хочу обновить Div-2 с частичным представлением возврата в случае сбоя проверки логина / пароля, но как я могу сказать контроллеру действий отправить мне результат в Json для ajax Jquery, если логин / пароль в порядке вместо частичного просмотра?

Спасибо

Answer 1

Хорошо, один вопрос за один раз

1. используйте '@Url.Action("ActionMethodName", "ControllerName")' в поле url: поле, созданное вами, не является точным.
2. Переходя ко второму вопросу, просто используйте dataType: "json" в вашем кодовом блоке ajax после данных: это гарантирует, что вы можете вернуть json как результат вместо частичного представления

Answer 2

вы должны перехватить событие отправки формы, а не событие нажатия кнопки, и в обработчике отправки вы должны указать браузеру не переходить к обычному сообщению обратно, просто возвращая false или используя preventDefault(), как

    $('form').live('submit',function(ev){
    ev.preventDefault();//to stop normal form post
    var email = $("#div-2 #Email").val();
            var password = $("#div-2 #Password").val();

            var data = { Email: "hello", Password: password };

            alert(email + password);

            $.ajax({

                    url: "/Account/LogOn",
                    type: "POST",
                    data: JSON.stringify(data),
                    contentType: 'application/json; charset=utf-8',
                    dataType:'json',

                    success: function (result) {

                        alert("Hello");
                        $("#div-2").empty();
                        $("#div-2").html(result).hide().fadeIn(300);
                    }
            });
//return false; you can simply uncomment this line and remove ev.preventDefault() to get same result

    });

Answer 3

Есть ли причина, по которой вы не используете Ajax.BeginForm вместо Html.BeginForm?Вы должны быть в состоянии сделать что-то вроде этого:

@using (Ajax.BeginForm("LogOn", "Account", new AjaxOptions { UpdateTargetId = "div-2", OnBegin = "hideMessage", OnSuccess = "fadeInMessage" }))

Где hideMessage и fadeMessage - это функции JS для скрытия и исчезновения в вашем div.