如何进行模态验证

问题描述

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

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("/");
    }

解决方法

您应该使用javascript（执行发布请求）将表单发送到Login post操作。成功执行ajax调用后，您需要用操作将返回的partialview（= data）替换模态的内容

$.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();。局部视图将仅返回操作的html（=不包括使用View（）时将添加的布局页面）

,

在ASP.NET Core 3.1中通过Ajax登录模式表单数据

使用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>