Asp.net core 如何在modal中进行验证_Asp.net Core_Modal Dialog_Modelstate

Asp.net core 如何在modal中进行验证

asp.net-core

Asp.net core 如何在modal中进行验证,asp.net-core,modal-dialog,modelstate,Asp.net Core,Modal Dialog,Modelstate,我有一个返回登录视图的模式。我想检查用户是否不存在，返回带有错误的视图。我试着用 ModelState.AddModelError（）但模式关闭，视图打开。这是我的代码： public IActionResult Login(LoginViewModel login) { if (!ModelState.IsValid) return View(); var user = _userServies.getUserByEmail

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

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（执行post请求）将表单发送到登录post操作。ajax调用成功后，您需要用操作将返回的partialview（=数据）替换模态的内容

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

在登录方法中，更改

返回视图（）返回PartialView（）。partialview只返回操作的html（=不包括使用View（）时添加的布局页面）
您应该使用javascript（执行post请求）将表单发送到登录post操作。ajax调用成功后，您需要用操作将返回的partialview（=数据）替换模态的内容
$.ajax({ 
    type: 'POST',
    url: url to your action, 
    data: new FormData($("#modal_form")[0]),
    success: function (data) { 
        $("#site_modal").html(data);
     } 
});

在登录方法中，更改返回视图（）返回PartialView（）。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);
    }

以下是\u 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>

@model LoginViewModel
@{
布局=“_布局”；
}
登录
登录
×
接近
登录
$（函数（）{
$（“按钮[data save=“modal”]”）。单击（函数（事件）{
var form=$（this）.parents（'.modal'）.find（'form'）；
var actionUrl=form.attr（'action'）；
var dataToSend=form.serialize（）；
$.post（actionUrl，dataToSend）.done（函数（数据）{
变量占位符元素=$（“#模式占位符”）；
var newBody=$（“.modal body”，数据）；
//查找IsValid输入字段并检查其值
//如果有效，则隐藏模式窗口
var isValid=newBody.find（'[name=“isValid”]'）。val（）；
如果（有效）{
占位符元素。查找（'.modal'）。模态（'hide'）；
location.href=“/”；
}否则{
占位符元素。查找（'.modal body'）。替换为（newBody）；
}
});
});
});

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

以下是\u 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>

@model LoginViewModel
@{
布局=“_布局”；
}
登录
登录
×
接近
登录
$（函数（）{
$（“按钮[data save=“modal”]”）。单击（函数（事件）{
var form=$（this）.parents（'.modal'）.find（'form'）；
var actionUrl=form.attr（'action'）；
var dataToSend=form.serialize（）；
$.post（actionUrl，dataToSend）.done（函数（数据）{
变量占位符元素=$（“#模式占位符”）；
var newBody=$（“.modal body”，数据）；
//查找IsValid输入字段并检查其值
//如果有效，则隐藏模式窗口
var isValid=newBody.find（'[name=“isValid”]'）。val（）；
如果（有效）{
占位符元素。查找（'.modal'）。模态（'hide'）；
location.href=“/”；
}否则{
占位符元素。查找（'.modal body'）。替换为（newBody）；
}
});
});
});
仍不工作。现在什么也没发生，甚至数据注释也不起作用（因为按钮的类型）。3天了，我遇到了这个问题，但仍然无法工作。现在什么也没发生，甚至数据注释也不起作用（因为按钮的类型）。三天了，我有这个问题