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

Question

下面是示例代码，我在按钮单击事件中调用此代码。我的问题是，我可以在进行 ajax 调用之前验证我的 viewmodel 对象吗？我可以在 java 脚本中看到模型错误，不知道如何检查。我的视图模型类属性具有数据注释验证器属性。如果视图模型无效，我不想进行 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")
            }
        });
    });
}

标签： ajaxasp.net-mvcasp.net-core

Answer 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.查看（索引.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);
    }
}

结果：