如何在模态中验证

Question

我有一个 return 登录视图的模式。我想检查用户是否不存在 return 有错误的视图。我尝试使用

ModelState.AddModelError()

但是模态关闭并打开了视图。这是我的代码：

 public IActionResult Login(LoginViewModel login)
    {
        if (!ModelState.IsValid)
            return View();
        var user = _userServies.getUserByEmailandPass(login.Email, login.Password);
        if (user == null)
        {
            ModelState.AddModelError("Email","email or password is wrong");
            return view();
        }
        return Redirect("/");
    }

Answer 1

您应该使用 javascript（执行 post 请求）将表单发送到登录 post 操作。在 ajax 调用成功后，您需要用您的操作将 return

的部分视图（=数据）替换模态内容

$.ajax({ 
    type: 'POST',
    url: url to your action, 
    data: new FormData($("#modal_form")[0]),
    success: function (data) { 
        $("#site_modal").html(data);
     } 
});

在登录方法中将 return View(); 更改为 return PartialView();。 partialview只会return action的html（=不包括使用View()时会添加的布局页面）

Answer 2

Login modal form data via ajax in ASP.NET Core 3.1

使用jQuery发送ajax并动态执行模态动作。

这里是控制器的代码。

    [HttpPost]
    public IActionResult Login(LoginViewModel login)
    {
        if (ModelState.IsValid)
        {
            //var user = _userServies.getUserByEmailandPass(login.Email, login.Password);
            //if (user == null)
            if (login.Email.Equals(login.Password))
            {
                ModelState.AddModelError("Email", "email or password is wrong");
            }
        }else
            ModelState.AddModelError("Email", "email or password invalid");

        return PartialView("_LoginModalPartial", login);
    }

这里是_LoginModalPartial.cshtml的代码。

@model LoginViewModel
@{
    Layout = "_Layout";
}

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#login">
    Login
</button>

<div id="modal-placeholder">
    <!-- Modal -->
    <div class="modal fade" id="login" tabindex="-1" role="dialog" aria-labelledby="addContactLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addContactLabel">Login</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form asp-action="Login">
                        <input name="IsValid" type="hidden" value="@ViewData.ModelState.IsValid.ToString()" />

                        <div class="form-group">
                            <label asp-for="Email"></label>
                            <input asp-for="Email" class="form-control" />
                            <span asp-validation-for="Email" 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>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary" data-save="modal">Login</button>
                </div>
            </div>
        </div>
    </div>
</div>

<script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>

<script>    
    $(function () {

        $('button[data-save="modal"]').click(function (event) {

            var form = $(this).parents('.modal').find('form');
            var actionUrl = form.attr('action');
            var dataToSend = form.serialize();

            $.post(actionUrl, dataToSend).done(function (data) {

                var placeholderElement = $('#modal-placeholder');
                var newBody = $('.modal-body', data);

                // find IsValid input field and check it's value
                // if it's valid then hide modal window

                var isValid = newBody.find('[name="IsValid"]').val() == 'True';

                if (isValid) {
                    placeholderElement.find('.modal').modal('hide');
                    location.href = "/";
                } else {
                    placeholderElement.find('.modal-body').replaceWith(newBody);
                }

            });

        });

    });


</script>

如何在模态中验证

how to validate in modal

modal-dialog

modelstate

asp.net-core