在从 java 脚本进行 Ajax 调用之前在 Asp.Net Core 中进行模型验证答案

【问题标题】：Model validation in Asp.Net Core before making an Ajax call from java script在从 java 脚本进行 Ajax 调用之前在 Asp.Net Core 中进行模型验证
【发布时间】：2020-03-24 10:46:12
【问题描述】：

下面是示例代码，我在按钮单击事件中调用此代码。我的问题是，我可以在进行 ajax 调用之前验证我的 viewmodel 对象吗？我可以在 java 脚本中看到模型错误，不知道如何检查。我的 viewmodel 类属性具有数据注释验证器属性。如果视图模型无效，我不想进行 ajax 调用，想在 java 脚本代码中检查 (ModelState.IsValid)，然后再进行 ajax 调用。任何帮助，将不胜感激。

$(function () {
    $("#btnGet").click(function () {
        var viewModelobject = {};
        viewModelobject.Name = $("#txtName").val();
        $.ajax({
            type: "POST",
            url: "/Home/AjaxMethod",
            data: viewModelobject,
            contentType: "application/json",
            dataType: "json",
            success: function (response) {
                alert("Hello")
            }
        });
    });
}

【问题讨论】：

您好，Anil，欢迎来到 Stack Overflow。如果您的 JavaScript 被格式化为代码块，可能会更容易阅读。您可以在代码块前后使用三个反引号 (```) 符号来做到这一点。

标签： ajax asp.net-mvc asp.net-core

【解决方案1】：

ModelState.IsValid 是服务器端代码。浏览器不知道它是什么，因此您无法在客户端验证ModelState。您可以在客户端使用Jquery Validation。

这是一个工作演示：

1.型号：

public class UserModel
{      
    [Required(ErrorMessage = "The Name field is required.")]
    [Display(Name = "Name")]
    public string Name { get; set; }
}

2.View(Index.cshtml):

@model UserModel
<form id="frmContact">
    <div asp-validation-summary="ModelOnly" class="text-danger"></div>
    <div class="form-group">
        <label asp-for="Name" class="control-label"></label>
        <input asp-for="Name" id="txtName" class="form-control" />
        <span asp-validation-for="Name" class="text-danger"></span>
    </div>
    <div class="form-group">
        <button type="submit" class="btn btn-secondary" id="btnGet">Click</button>
    </div>
</form>
@section Scripts
{
    @*you could also add this partial view*@
    @*@{await Html.RenderPartialAsync("_ValidationScriptsPartial");}*@ 

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.15.1/jquery.validate.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validation-unobtrusive/3.2.6/jquery.validate.unobtrusive.min.js"></script>
    <script>
        $(function () {
            $('#btnGet').click(function () {
                if ($("#frmContact").valid()) {
                    $('#frmContact').submit();
                }
                else {
                    return false;
                }
            });

            $("#frmContact").on("submit", function (event) {
                event.preventDefault();
                var viewModelobject = {};
                viewModelobject.Name = $("#txtName").val();
                $.ajax({
                    type: "POST",
                    url: "/Home/AjaxMethod",
                    data: JSON.stringify(viewModelobject),
                    contentType: "application/json",
                    dataType: "json",
                    success: function (response) {
                        alert("Hello")
                    }
                });
            });
        })
    </script>
}

3.控制器：

public class HomeController : Controller
{
    public IActionResult Index()
    {
        return View();
    }
    [HttpPost]
    public IActionResult AjaxMethod([FromBody]UserModel user)
    {
        //do your stuff...
        return Json(user);
    }
}

结果：

【讨论】：

【解决方案2】：

请在按钮点击回调中使用如下所示的jQuery表单验证：

var form = $('form[name="' + formName + '"]');
form.validate();
if (form.valid()) {
  //Do something if the form is valid
} 
else {
  //Show validation error messages if the form is in-valid
}

【讨论】：