MVC 4：在验证失败返回引导模式内局部视图 [英] MVC 4: Return partial view inside of bootstrap modal upon failed validation

问题描述

我使用MVC 4 SimpleMembership用于账务处理。我使用的自举V3.2.0情态动词，当用户登录到网页。该模态的精细工作，甚至通过Ajax.BeginForm我有我有问题是的ModelState验证后，如果登录失败（用户输入不正确的用户名和密码）办理的ModelState验证，账户控制器返回的登录的ActionResult登录页面的PartialView。相反，在模态的局部视图加载，它加载一个完整的页面（仍然是一个partialview，没有_layout页）。我怎样才能使局部视图负载回时登录失败的登录模式？

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?

下面是我的模态登录视图中的code：

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>
}

这是在我的控制器中的code：

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);
        }

当，如果用户没有输入用户名或密码发生的实例的ModelState错误，则表单验证正常工作和验证误差修改的模式更新。但是，如果验证的ModelState通过，但登录失败，当控制器返回以下内容：

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:

return PartialView("Login", model);

这部分观点的负载为一个完整的页面（外_layout页），而不是在登录模式。

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

有什么明显的我失踪，为什么在一个失败的登录，结果没有贴返回到登录模式？

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

先谢谢了。

推荐答案

我想你会需要一些客户端code。

I think you will need some client side code.

尝试：

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

事件你有你的Ajax调用

Event you'll have your ajax call

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

这篇关于MVC 4：在验证失败返回引导模式内局部视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！