ajax - MVC 4 : Return partial view inside of bootstrap modal upon failed validation

Question

我正在使用 MVC 4 和用于帐户处理的 SimpleMembership。当用户登录网页时，我正在使用 Boostrap V3.2.0 模态。模式工作正常，甚至通过“Ajax.BeginForm”处理 Modelstate 验证 我遇到的问题是在验证 modelstate 之后，如果登录失败(用户输入了错误的用户名或密码)，Account Controller 的 Login ActionResult 返回登录页面的 PartialView。它不是在模式中加载部分 View ，而是作为完整页面加载(仍然是部分 View ，没有 _Layout 页面)。登录失败时如何使局部 View 加载回登录模式？

这是我的模态登录 View 中的代码:

@model AdorationSuite.Models.LoginModel

<script type="text/javascript" src="/scripts/jquery.validate.min.js"></script>
<script type="text/javascript" src="/scripts/jquery.validate.unobtrusive.min.js"></script>

@{AjaxOptions options = new AjaxOptions();
options.HttpMethod = "POST";
options.Url = Url.Action("Login", "Account");
options.UpdateTargetId = "modal-body";
options.InsertionMode = InsertionMode.Replace;
}

@using (Ajax.BeginForm("Login", "Account", options, new {id="edit-form"})) {
    @Html.AntiForgeryToken()
    @Html.ValidationSummary(false, "Come on now, get it together man!!")

    <div class="modal-header" style="height:auto">
        <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
        <h4 class="modal-title" id="ModalLabel">Log In</h4>
    </div>

    Html.RenderPartial("~/Views/Account/Partials/LoginForm.cshtml", Model);

    <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="submit" id="submit-login" value="Login" class="btn btn-primary">Login</button>
    </div>
}

这是我 Controller 中的代码:

[HttpPost]
        [AllowAnonymous]
        [ValidateAntiForgeryToken]
        public ActionResult Login(LoginModel model, string returnUrl)
        {
            if (ModelState.IsValid && WebSecurity.Login(model.EmailAddress, hashPassword(model.Password), persistCookie: model.RememberMe))
            {
                return RedirectToLocal(returnUrl);
            }

            // If we got this far, something failed, redisplay form
            ModelState.AddModelError("", "The email address or password provided is incorrect.");

            return PartialView("Login", model);
        }

当发生 Modelstate 错误时，例如，如果用户没有输入用户名或密码，则表单验证工作正常，并且模态更新时出现验证错误。但是，如果 Modelstate 验证通过，但登录失败，当 Controller 返回以下内容时:

return PartialView("Login", model);

该部分 View 作为完整页面加载(在 _Layout 页面之外)而不是在登录模式中加载。

关于为什么在登录失败时结果没有回传到登录模式，我是否明显遗漏了什么？

提前致谢。

Answer 1

我认为您需要一些客户端代码。

尝试:

<div id="partialSummaryDiv"> Html.RenderPartial("~/Views/Account/Partials/LoginForm.cshtml", Model);</div>

您将进行 ajax 调用的事件

$.ajax({
url: "/Controller/Action",
type: "POST",
success: function (result) {
     // refreshes partial view
    $('#partialSummaryDiv').html(result);
}
});