.Net Core 服务器端模型验证通过不显眼的 ajax 表单答案

【问题标题】：.Net Core Server Side Model Validation via unobtrusive ajax form.Net Core 服务器端模型验证通过不显眼的 ajax 表单
【发布时间】：2021-04-25 17:37:34
【问题描述】：

我有一个使用不显眼的 ajax 提交表单的视图，或者更确切地说，只是普通的 jquery ajax 也可以解决问题。对于这两种实现，我可以让它很好地击中我的控制器并执行我的 ModelState.IsValid 验证，然后像这样返回我的视图：

public ActionResult SubmitForm(ViewModel viewModel) 
{ 
    if(!ModelState.IsValid) 
    {
        return View("~/view path", viewModel); 
    }else 
    {
        // do stuff
        // I have to return this in order for me to get my model validation errors to show up
        return Json(new { msg = "OK" }); 
    }
}

查看：

<form asp-action="SubmitForm" asp-controller="Controller" data-ajax="true" data-ajax-method="POST"
      data-ajax-success="onSubmitSuccess(data, 'formId')" id="formId">
      
      @Html.ValidationSummary()
      // some form fields with html tag helpers
</form>

现在，当我的 SubmitForm 操作返回我对模型验证失败的看法时，我的验证摘要永远不会出现。我让它工作的唯一方法是通过检查 json msg 属性，用我返回的数据替换我的整个表单 html，就像在我的 OnSubmitSuccess 函数中一样：

function onSubmitSuccess(data, form) 
{
    if(data.msg) 
    {
        if(data.msg == "OK") { // do stuff }
    }else 
    {
        $("#" + form).html(data.responseText);
    }
}

我基本上是用传入的响应文本替换我的表单 html，以便显示我的错误消息。有什么特别的原因我不能只做一个返回部分或返回视图并在不修改 jquery 和替换 html 的情况下工作？

谢谢

【问题讨论】：

标签： asp.net-core model-view-controller unobtrusive-ajax

【解决方案1】：

据我所知，data-ajax-success 需要包含三个参数 data, status, xhr 的函数，我们无法将 formid 作为参数传递给 data-ajax-success 函数。

另外，如果你想将部分视图作为返回结果传递给客户端，你应该直接使用数据而不是data.responseText来显示视图内容值。

更多细节，你可以参考下面的测试demo和代码：

@model DotNet5Identity.Models.GetInTouch
@{
    ViewData["Title"] = "Index";
}

<h1>Index</h1>


<form asp-action="SubmitForm" asp-controller="GetInTouch" data-ajax="true" data-ajax-method="POST"
      data-ajax-success="completed" id="formId">

    <input asp-for="Id" />
    <br />
    <input asp-for="EmailAddress" />

    <input type="submit" value="Tst" />

    @Html.ValidationSummary()
    // some form fields with html tag helpers
</form>


@section scripts{

    <partial name="_ValidationScriptsPartial" />
    <script>
        completed = function (data, status, xhr) {
            alert(data.msg);

         
                if (data.msg == "OK") {

                } else {
                    $("#formId").html(data);
                }
            
        };
 

    </script>


}

控制器：

    public ActionResult SubmitForm(GetInTouch viewModel)
    {

        return PartialView("_TestPartialView");
       
            // do stuff
            // I have to return this in order for me to get my model validation errors to show up
            return Json(new { msg = "OK" });
        
    }

结果：

【讨论】：