MVC 4：在验证失败时返回bootstrap模式内部的部分视图

I am using MVC 4 with SimpleMembership used for account handling. I am using Boostrap V3.2.0 modals when the user logs onto the webpage. The modals are working fine, even handling Modelstate validation via "Ajax.BeginForm" The problem I have am having is after the modelstate is verified, if the login fails (user entered incorrect username or password), the Login ActionResult of the Account controller returns a PartialView of the Login page. Instead of the partial view loading in the Modal, it loads as a full page (still a partialview, no _Layout page). How can I make the partial view load back into the login modal when login fails?

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

Here is the code in my modal Login 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>
}

And here is the code in my 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);
        }

When a Modelstate error occurs for instance if the user doesn't enter a username or password, then the form validation works fine and the modal updates with validation erros. But if Modelstate validation passes, but the Login fails, when the the controller returns the following:

当发生Modelstate错误时,如果用户没有输入用户名或密码,那么表单验证工作正常,模式更新验证错误。但是如果Modelstate验证通过,但登录失败,则控制器返回以下内容:

return PartialView("Login", model);

That partial view loads as a full page (outside of _Layout page) instead of in the Login modal.

该部分视图作为整页加载(在_Layout页面之外)而不是在Login模式中加载。

Is there something obvious I am missing as to why on a failed logon the result is not posted back to the login modal?

有什么明显的东西我错过了为什么在登录失败时结果没有发回到登录模式?

Thanks in advance.

提前致谢。

1 个解决方案

#1

I think you will need some client side code.

我想你需要一些客户端代码。

Try:

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

Event you'll have your ajax call

事件你将有你的ajax电话

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

#1