asp.net mvc jquery Ajax部分页面更新问题答案

【问题标题】：asp.net mvc jquery Ajax partial page update issueasp.net mvc jquery Ajax部分页面更新问题
【发布时间】：2012-02-29 19:20:30
【问题描述】：

我在 Asp.net mvc 3 剃须刀上遇到部分页面更新问题，我无法通过

我有这个 _LogOn 部分视图，它有 2 个文本框电子邮件和密码以及一个用于登录目的的按钮连接：

@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 控制器只不过是抓取 _Logon partialV 视图并将其交给 jquery 以更新名为 Div-2 的 div。

    // 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 个问题

每次我单击“Connexion”按钮时，都会触发 post 控制器（我假设是从 _Logon 部分视图的 @html.Beginform 触发）而不是从 Ajax Jquery 触发

因此，partialView 显示在新的 Internet 页面上，而不是显示在 Div-2 中

我想在登录/密码检查失败的情况下更新 Div-2 并返回部分视图，但是如果登录/密码正常，我如何告诉操作控制器向我发送 Json 中的 ajax Jquery 结果而不是局部视图？

谢谢

【问题讨论】：

标签： jquery ajax asp.net-mvc asp.net-mvc-3 razor

【解决方案1】：

您应该挂钩表单的提交事件而不是按钮的单击事件，并且在提交处理程序中，您必须通过简单地返回 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

    });

【讨论】：

【解决方案2】：

您有什么理由不使用 Ajax.BeginForm 而不是 Html.BeginForm？您应该能够执行以下操作：

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

其中 hideMessage 和 fadeMessage 是用于隐藏和淡入你的 div 的 JS 函数。

【讨论】：

【解决方案3】：

一次确定一个问题

在url:字段中使用'@Url.Action("ActionMethodName", "ControllerName")'，你做的不准确。
第二个问题很简单，只需在 ajax 代码块中的 data: 之后使用 dataType: "json"，这样可以确保您可以返回 json 作为结果而不是部分视图

【讨论】：