C# 使用Ajax调用和JQuery进行模型状态验证

嘿，伙计们，我正在使用Ajax/Jquery非结构化地验证输入。但是，在ModelState无效之后，我不知道如何处理ajax调用的返回，以及如何在asp Validation for标记上显示“必需的文本/正则表达式”。有人能帮忙吗

在my.cshtml上：

<label class="control-label">CodCard</label>
<input asp-for="CodCard" type="text" class="form-control small col-4" />
<span asp-validation-for="CodCard" class="text-danger"></span>

在my.js上：

    $(function () {
        $("#btnChk").click('show.bs.modal', function () {
            var options = {};
            options.type = "POST";
            options.url = "/api/CheckOut";
            options.dataType = "JSON";
            options.cache = false;
            options.async = true;
            contentType = "application/json; charset=utf-8",
            options.data = {
                "IdOrder": $("#IdOrder").val(),
                "CodCard": $("#CodCard").val()
            };

            options.beforeSend = function (xhr) { xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
            };
        
            options.success = function (data) {
            if (!data.success) {
                if (data.errors.length > 0) {
                    
                    
                    // I supposed to do something here, I am right?? But How? 

                    //for (var i = 0; i < response.errors.length; i++) {
                    //    var error = response.errors[i];
                    //    alert(error);
                    //}

                }
            }
            else
            {
                if (data.IdOrder!= null) {
                    window.location.href = "/app/order/order?Id=" + data.IdOrder;
                }

                // Error 
                if (data.errors == "fail") {
                    var modal = $("#itemLoader");
                    modal.find('.modal-body .spinner-border').hide();
                    modal.find('.modal-body .far').show();
                }
            }
        };
        options.error = function () {
            $('.alertMsg').html("Error while making Ajax call!");
        };
        $.ajax(options);
    });
});

$（函数（）{
$（“#btnChk”）。单击（'show.bs.modal'，函数（）{
var选项={}；
options.type=“POST”；
options.url=“/api/CheckOut”；
options.dataType=“JSON”；
options.cache=false；
options.async=true；
contentType=“application/json；charset=utf-8”，
options.data={
“IdOrder”：$（“#IdOrder”）.val（），
“密码卡”：$（“#密码卡”）.val（）
};
options.beforeSend=function（xhr）{xhr.setRequestHeader（“XSRF-TOKEN”，$（'input:hidden[name=“\uu RequestVerificationToken”]”）val（））；
};
options.success=函数（数据）{
如果（！data.success）{
如果（data.errors.length>0）{
//我应该在这里做点什么，我是对的，但是怎么做呢？
//对于（var i=0；i

我的控制器类：

     [HttpPost("/api/CheckOut")]
     public async Task<IActionResult> CheckOut([Bind("IdOrder, CodCard")] BagCheckOutViewModel checkOut)
     {
           ...
    
        if (!ModelState.IsValid)
        {   
                  return Json(new { success = false, errors = ModelState.Values.Where(i => i.Errors.Count > 0) });
        }

          ...

[HttpPost（“/api/CheckOut”）]
公共异步任务签出（[Bind（“IdOrder，CodCard”）]BagCheckOutViewModel签出）
{
...
如果（！ModelState.IsValid）
{   
返回Json（新的{success=false，errors=ModelState.Values.Where（i=>i.errors.Count>0）}）；
}
...

下面是一个关于如何在ajax发回后显示modelstate错误的工作演示：

查看（

Privacy.cshtml

）：

@model BagCheckOutViewModel
密码卡
我命令

脚本：

@section Scripts
{
    <script type="text/javascript">
          $(function () {
            $("#btnChk").click('show.bs.modal', function () {
                var options = {};
                options.type = "POST";
                options.url = "/api/CheckOut";
                options.dataType = "JSON";
                options.cache = false;
                options.async = true;
                contentType = "application/json; charset=utf-8",
                options.data = {
                    "IdOrder": $("#IdOrder").val(),
                    "CodCard": $("#CodCard").val()
                };

                options.beforeSend = function (xhr) { xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
                };

                options.success = function (data) {
                    //do your stuff...
            
            };
                options.error = function (res) {
                    $('#myform').html(res.responseText); //change here...
            };
            $.ajax(options);
        });
    });
    </script>
}

@节脚本
{
$（函数（）{
$（“#btnChk”）。单击（'show.bs.modal'，函数（）{
var选项={}；
options.type=“POST”；
options.url=“/api/CheckOut”；
options.dataType=“JSON”；
options.cache=false；
options.async=true；
contentType=“application/json；charset=utf-8”，
options.data={
“IdOrder”：$（“#IdOrder”）.val（），
“密码卡”：$（“#密码卡”）.val（）
};
options.beforeSend=function（xhr）{xhr.setRequestHeader（“XSRF-TOKEN”，$（'input:hidden[name=“\uu RequestVerificationToken”]”）val（））；
};
options.success=函数（数据）{
//做你的事。。。
};
options.error=函数（res）{
$（'#myform'）.html（res.responseText）；//在此处更改。。。
};
$.ajax（选项）；
});
});
}

控制器：

[HttpPost("/api/CheckOut")]
public async Task<IActionResult> CheckOut([Bind("IdOrder, CodCard")] BagCheckOutViewModel checkOut)
{

    if (!ModelState.IsValid)
    {
        return PartialView("Privacy",checkOut);
    }
    return Json(new { success = true});
}

[HttpPost（“/api/CheckOut”）]
公共异步任务签出（[Bind（“IdOrder，CodCard”）]BagCheckOutViewModel签出）
{
如果（！ModelState.IsValid）
{
返回PartialView（“隐私”，结帐）；
}
返回Json（新的{success=true}）；
}

结果:

---

您的示例代码运行良好，非常感谢。如果我使用viewbag，我如何返回Using partial view？您有什么示例吗？“无法在System.Dynamic.UpdateDelegates.UpdateAndExecute1[T0，TRet]（CallSite site，T0 arg0）的CallSite.Target（Close，CallSite，Object）对空引用执行运行时绑定”在AspNetCore.Areas\u App\u Views\u Sacola\u Index.ExecuteAsync（）中的C:\Users\782290104\source\repos\Kepler\Kepler.MVC\Areas\App\Views\Bag\Privacy.cshtml:line 12“>>如果（ViewBag.Sacola.Count！=0）Hi，请确保在方法中添加了一个ViewBag数据（签出）这是由ajax调用的。工作正常，现在的问题是-我所有的内容在返回后都被注入他自己的内部。所以边距布局变得“更厚”。尝试解决它。

@section Scripts
{
    <script type="text/javascript">
          $(function () {
            $("#btnChk").click('show.bs.modal', function () {
                var options = {};
                options.type = "POST";
                options.url = "/api/CheckOut";
                options.dataType = "JSON";
                options.cache = false;
                options.async = true;
                contentType = "application/json; charset=utf-8",
                options.data = {
                    "IdOrder": $("#IdOrder").val(),
                    "CodCard": $("#CodCard").val()
                };

                options.beforeSend = function (xhr) { xhr.setRequestHeader("XSRF-TOKEN", $('input:hidden[name="__RequestVerificationToken"]').val());
                };

                options.success = function (data) {
                    //do your stuff...
            
            };
                options.error = function (res) {
                    $('#myform').html(res.responseText); //change here...
            };
            $.ajax(options);
        });
    });
    </script>
}

[HttpPost("/api/CheckOut")]
public async Task<IActionResult> CheckOut([Bind("IdOrder, CodCard")] BagCheckOutViewModel checkOut)
{

    if (!ModelState.IsValid)
    {
        return PartialView("Privacy",checkOut);
    }
    return Json(new { success = true});
}