Question

我正在建立一个包含模式登录表单的网站。万一登录失败，我想像在ASP.NET Core表单上一样显示验证消息。

如何使用Unobtrusive AJAX做到这一点？现在，我可以调用我的特定函数来获取成功和失败的信息，但是我不知道要放入什么内容才能使验证工作正常。

这是我当前的代码：

模式登录：

<div class="modal" id="modalLogin" tabindex="-1" role="dialog" aria-labelledby="modalLoginLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <form id="account" asp-controller="Account" asp-action="LoginModal" method="post" data-ajax="true" data-ajax-method="post" data-ajax-failure="onLoginFail">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLoginLabel">@ViewData["Title"]</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <section>
                        <div asp-validation-summary="All" class="text-danger"></div>
                        <div class="form-group">
                            <label asp-for="Username"></label>
                            <input asp-for="Username" class="form-control" />
                            <span asp-validation-for="Username" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <label asp-for="Password"></label>
                            <input asp-for="Password" class="form-control" />
                            <span asp-validation-for="Password" class="text-danger"></span>
                        </div>
                        <div class="form-group">
                            <div class="checkbox">
                                <label asp-for="RememberMe">
                                    <input asp-for="RememberMe" />
                                    @Html.DisplayNameFor(m => m.RememberMe)
                                </label>
                            </div>
                        </div>
                        <div class="form-group">
                            <p class="text-center">
                                <a asp-controller="Account" asp-action="ForgotPassword">
                                    @Localizer["ForgotPasswordLink"]
                                </a>
                            </p>
                        </div>
                    </section>
                </div>
                <div class="modal-footer">
                    <button type="submit" class="btn btn-primary">@Localizer["LoginButton"]</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">@Localizer["CloseButton"]</button>
                </div>
            </form>
        </div>
    </div>
</div>

<script>
    var onLoginFail = function (result) {
        //I DON'T KNOW WHAT TO PUT IN HERE
    };
</script>

我对控制器的操作

    [HttpPost]
    [AllowAnonymous]
    public async Task<IActionResult> LoginModal(LoginViewModel model, string returnUrl = null)
    {
        if (ModelState.IsValid)
        {
            var user = await _userManager.FindByNameAsync(model.Username);
            if (user != null && !await _userManager.IsEmailConfirmedAsync(user))
            {
                ModelState.AddModelError("Login", "User not confirmed");
                return BadRequest(ModelState);
            }                    

            var result = await _signInManager.PasswordSignInAsync(model.Username,
                model.Password, model.RememberMe, lockoutOnFailure: true);
            if (result.Succeeded)
            {
                if (!string.IsNullOrEmpty(returnUrl) && Url.IsLocalUrl(returnUrl))
                    return Ok(returnUrl);

                return RedirectToAction("Index", "Home");
            }

            ModelState.AddModelError("Login", "Incorrect credentials");
            return BadRequest(model);
        }
        return BadRequest();
    }

提前谢谢！

如何使用Unobtrusive AJAX验证模式登录表单？

0 个答案: