CODEWITHSUNDEEP
ajaxasp.net-mvc-4twitter-bootstrap-3bootstrap-modal
jjspierx
jjspierx

Reputation: 440

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

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?

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:

return PartialView("Login", model);

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?

Thanks in advance.

Upvotes: 3

Views: 5389

Answers (1)

McKeymayker
McKeymayker

Reputation: 358

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({
url: "/Controller/Action",
type: "POST",
success: function (result) {
     // refreshes partial view
    $('#partialSummaryDiv').html(result);
}
});

Upvotes: 2

Related Questions