Registration page with bootstrap and partial view in asp.net MVC using jQuery ajax

Question

I am trying to build a register page in asp.net MVC using the bootstrap popup model. I am using a partial view to render my popup model. I successfully open the popup model and data is also being post. But when the controller sent any error message popup model is not being opened rather it showing a partial view.

Below is the controller code.

[AllowAnonymous]
    public ActionResult Register()
    {
        return PartialView();
    }
    // POST: /Account/Register
    [HttpPost]
    [AllowAnonymous]
    [ValidateAntiForgeryToken]
    public async Task<ActionResult> Register(UserRegisterViewModel model)
    {
        if (ModelState.IsValid)
        {
            var result = await accountsHeplers.RegisterHelper(model);
            if (result.Status == Enums.AccountsReturnStatus.Success)
            {
                await SignInManager.SignInAsync(result.User, isPersistent: false, rememberBrowser: false);
                var cart = CartHelpers.GetCart(this.HttpContext);
                cart.MigrateFoodItemCart(db.Users.Where(p => p.Email == result.User.Email).FirstOrDefault().Id);
                return RedirectToAction("Index", "Home");
            }
            else if (result.Status == Enums.AccountsReturnStatus.RequiredEmailConfirmation)
            {
                return RedirectToAction("EmailVerificationMessage");
            }
            else if (result.Status == Enums.AccountsReturnStatus.UserAlreadyExist)
            {
                ModelState.AddModelError("", result.ReturnMessage);
                return PartialView(model);
            }
            else
            {
                ModelState.AddModelError("", result.IdentityResult.Errors.FirstOrDefault());
                return PartialView(model);
            }
        }

        // If we got this far, something failed, redisplay form
        return PartialView(model);
    }

Below is my the partial view

@model HomeMadeFoodDeliverySystem.Models.UserRegisterViewModel

<div class="modal-dialog modal-lg">
<div class="modal-content">
    <div class="row justify-content-center">
        <div class="col-10 text-center p-0 mt-3 mb-2">
            <div class="card px-0 pt-4 pb-0 mt-3 mb-3">
                <h2 id="heading">Register</h2>
                @using (Html.BeginForm("Register", "Account", FormMethod.Post, new { @class = "form-horizontal", role = "form", id = "msform", name = "msform" }))
                {
                    @Html.AntiForgeryToken()
                    <!-- progressbar -->
                    @Html.ValidationSummary("", new { @class = "text-danger" })
                    <fieldset>
                        <ul id="progressbar" class="">
                            <li class="active justify-content-center text-center" id="account"><strong>What should be call you?</strong></li>
                        </ul>
                        <div class="form-card">
                            <label class="fieldlabels">First name: *</label>
                            @Html.EditorFor(model => model.FirstName, new { htmlAttributes = new { @class = "form-control", @placeholder = "First Name" } })
                            @Html.ValidationMessageFor(model => model.FirstName, "", new { @class = "text-danger" })<br />
                            <label class="fieldlabels">Last name: *</label>
                            @Html.EditorFor(model => model.LastName, new { htmlAttributes = new { @class = "form-control", @placeholder = "Last Name" } })
                            @Html.ValidationMessageFor(model => model.LastName, "", new { @class = "text-danger" })<br />
                        </div>
                        <input type="button" name="next" class="next action-button" value="Next" />
                    </fieldset>
                    <fieldset>
                        <ul id="progressbar">
                            <li class="active" id="personal"><strong>How do we contact you?</strong></li>

                        </ul>
                        <div class="form-card">
                            <label class="fieldlabels">Email: *</label>
                            @Html.EditorFor(model => model.Email, new { htmlAttributes = new { @class = "form-control", @placeholder = "Email" } })
                            @Html.ValidationMessageFor(model => model.Email, "", new { @class = "text-danger" })<br />
                            <label class="fieldlabels">Phone number: *</label>
                            @Html.EditorFor(model => model.PhoneNumber, new { htmlAttributes = new { @class = "form-control", @placeholder = "Phone Number (03XXXXXXXXX)" } })
                            @Html.ValidationMessageFor(model => model.PhoneNumber, "", new { @class = "text-danger" })<br />
                        </div>
                        <input type="button" name="next" class="next action-button" value="Next" />
                        <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
                    </fieldset>
                    <fieldset>
                        <ul id="progressbar">
                            <li class="active" id="payment"><strong>Where do we deliver your food?</strong></li>
                        </ul>
                        <div class="form-card">
                            <label class="fieldlabels">Address:</label>
                            @Html.EditorFor(model => model.Address, new { htmlAttributes = new { @class = "form-control", @placeholder = "Address" } })
                            @Html.ValidationMessageFor(model => model.Address, "", new { @class = "text-danger" })<br />
                        </div>
                        <input type="button" name="next" class="next action-button" value="Next" />
                        <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
                    </fieldset>
                    <fieldset>
                        <ul id="progressbar">
                            <li class="active" id="confirm"><strong>Lets keep your account Secure</strong></li>
                        </ul>
                        <div class="form-card">
                            <label class="fieldlabels">Password:*</label>
                            @Html.EditorFor(model => model.Password, new { htmlAttributes = new { @class = "form-control", @placeholder = "Password" } })
                            @Html.ValidationMessageFor(model => model.Password, "Minimum 8 character including 1 uppercase, 1 lowercase, 1 number, and 1 special character", new { @class = "text-danger" })<br />
                            <label class="fieldlabels">Confirm password:*</label>
                            @Html.EditorFor(model => model.ConfirmPassword, new { htmlAttributes = new { @class = "form-control", @placeholder = "Confirm Password" } })
                            @Html.ValidationMessageFor(model => model.ConfirmPassword, "", new { @class = "text-danger" })<br />
                        </div>
                        <input type="submit" id="btn-register-submit" name="btn-register-submit" class="action-button" value="Register" />
                        <input type="button" name="previous" class="previous action-button-previous" value="Previous" />
                    </fieldset>
                }
            </div>
        </div>
    </div>
</div>

Here is how my popup model looks like.

I am using jQuery like below

$(document).ready(function () {
    $('#msform').submit(function () {
        $.ajax({
            url: this.action,
            type: this.method,
            data: $(this).serialize(),
            success: function (result) {
                $('#registermodel').html(result);
                $('#registermodel').show();
            },
            error: function (result) {
                $('#registermodel').html(result);
                $('#registermodel').show();

            }
        });
    });
});

Instance of open popup model it showing partial view like below image.

So my problem is how to open the popup model again if any error occurs with the data that the user already filled. I really appreciated your help.

Answer 1

I figure it out. We need to use Ajax.BeginForm with success and failure AjaxOptions.

 @using (Ajax.BeginForm("Register", "Account", FormMethod.Post, new AjaxOptions
                {
                    HttpMethod = "POST",
                    OnSuccess = "success",
                    OnFailure = "failure",
                },
                new { @class = "form-horizontal", role = "form", id = "msform", name = "msform" }))
                {
   ... rest of the form goes here
  }

Jquery will be like below.

   function success(data, status, xhr) {
    $('#registermodel').modal('hide');
    window.location.href = data.RedirectUrl;
}

function failure(xhr, status, error) {
    $('#registermodel').html(xhr.responseText);
    $('#registermodel').modal('show');
}

Below is the controller code. Here we need to return the status code to tell ajax calls either to trigger failure or success method.

  [AllowAnonymous]
    public ActionResult Register()
    {
        return PartialView();
    }
    // POST: /Account/Register
    [HttpPost]
    [AllowAnonymous]
    [ValidateAntiForgeryToken]
    public async Task<ActionResult> Register(UserRegisterViewModel model)
    {
        if (ModelState.IsValid)
        {
            var result = await accountsHeplers.RegisterHelper(model);
            if (result.Status == Enums.AccountsReturnStatus.Success)
            {
                await SignInManager.SignInAsync(result.User, isPersistent: false, rememberBrowser: false);
                var cart = CartHelpers.GetCart(this.HttpContext);
                cart.MigrateFoodItemCart(db.Users.Where(p => p.Email == result.User.Email).FirstOrDefault().Id);
                return RedirectToAction("Index", "Home");
            }
            else if (result.Status == Enums.AccountsReturnStatus.RequiredEmailConfirmation)
            {
                return Json(new { RedirectUrl = Url.Action("EmailVerificationMessage") });
            }
            else if (result.Status == Enums.AccountsReturnStatus.UserAlreadyExist)
            {
                Response.StatusCode = 400;
                ModelState.AddModelError("", result.ReturnMessage);
                return PartialView(model);
            }
            else
            {
                Response.StatusCode = 400;
                ModelState.AddModelError("", result.IdentityResult.Errors.FirstOrDefault());
                return PartialView(model);
            }
        }
        Response.StatusCode = 400;
        // If we got this far, something failed, redisplay form
        return PartialView(model);
    }

You can refer to the below link for more information. https://stackoverflow.com/a/31525651/7056354