MVC 4: returning partial view inside boot modal after failed validation

I am using MVC 4 with SimpleMembership used to handle the account. I am using Boostrap V3.2.0 mod when user logs in on a web page. Modals work fine, even handling the Modelstate validation with "Ajax.BeginForm". The problem I am facing is that after checking the state of the model, if the login fails (user entered wrong username or password), the ActionResult of the PartialView account controller on the login page is returned. Instead of partially loading the image in Modal, it loads as a full page (still a partial view, no _Layout page). How can I get a partial view back in the login modal when login fails?

Here is the code in my modal login mode:

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

      

If a ModelState error occurs, for example, if the user does not enter a username or password, then form validation works fine and modal updates fail with validation errors. But if the ModelState check passes but the login fails when the controller returns the following:

return PartialView("Login", model);

      

This partial view loads as a full page (outside of the _Layout page) and not in the login modal.

Is there something obvious that I am missing, why on failed login, the result is not sent back to the registration modem?

Thanks in advance.

+3


source to share


1 answer


I think you need client side code.

Try:

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

      



Event where you will have your ajax call

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

      

+2


source







All Articles