bootstrap 的注册页面和 asp.net MVC 中的部分视图使用 jQuery ajax

Question

我正在尝试使用 bootstrap 弹出模型在 asp.net MVC 中构建一个注册页面。我正在使用局部视图来呈现我的弹出模型。我成功打开了弹出模型，数据也在 post。但是，当控制器发送任何错误消息时，弹出模型不会被打开，而是显示局部视图。

控制器代码如下

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

下面是我的局部视图

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

这是我的弹出模型的样子。

我正在使用 jQuery 如下所示

$(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();

            }
        });
    });
});

打开弹出模型的实例，它显示如下图所示的局部视图。

所以我的问题是如果用户已经填写的数据发生任何错误，如何再次打开弹出模型。非常感谢您的帮助。

Answer 1

我明白了。我们需要使用 Ajax.BeginForm 成功和失败的 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 会像下面这样。

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

下面是控制器代码。这里我们需要 return 状态码来告诉 ajax 调用是触发失败还是成功方法。

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

您可以参考下面的link了解更多信息。

bootstrap 的注册页面和 asp.net MVC 中的部分视图使用 jQuery ajax

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

ajax

asp.net-mvc

jquery

form-submit

bootstrap-modal