为什么在 ASP.NET Core 应用程序中使用 Ajax 时不出现验证消息

Question

我在 ASP.NET Core 应用程序中使用 Ajax，但是当我提交表单时，输入的验证消息不会与无效输入一起出现。

当我停止使用 AJAX 时，验证消息开始出现。我该如何解决这个问题？

这是 ASP.NET Core 方法的代码：

[HttpPost]
public async Task<IActionResult> Index([FromBody] AddTaskViewModel model)
{
    try
    {
        if (!ModelState.IsValid)
        {
            return View(model);
        }
    }
    catch()
    {  }
}

这是视图模型类：

public class AddTaskViewModel
{
    public long ID { get; set; } = 11;

    [Required(ErrorMessage ="Enter Task Name")]
    public string TaskName { get; set; }

    [Required(ErrorMessage ="Enter Task Description")]
    public string TaskDescription { get; set; }

    public string Notes { get; set; }
}

这是视图标记：

<div class="row" id="AForm">
    <div class="col-md-12">
        <div class="card m-b-20">
            <div class="card-header">
                <h3 class="card-title">Add Task</h3>
            </div>
            <div class="card-body">
                <form id="AddTaskForm" asp-controller="ManageTasks" asp-action="Index">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label asp-for="TaskName" class="col-form-label">Task Name</label>
                            <input asp-for="TaskName" type="text" id="inputTaskName" class="form-control">
                            <span asp-validation-for="TaskName" class="text-danger"></span>
                        </div>
                        <div class="form-group col-md-6">
                            <label asp-for="TaskDescription" class="col-form-label">Task Desc</label>
                            <input type="text" class="form-control" asp-for="TaskDescription" id="inputDesc">
                            <span asp-validation-for="TaskDescription" class="text-danger"></span>
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label asp-for="Notes" class="col-form-label">Notes</label>
                            <textarea class="form-control" asp-for="Notes" id="inputTaskNote" rows="4" ></textarea>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary ">Add Task</button>
                </form>
            </div>
        </div>
    </div>
</div>

这是 Ajax 代码：

$("#AddTaskForm").submit(function (event) {
    event.preventDefault();
    var TaskName = $("#inputTaskName").val();
    var TaskDesc = $("#inputDesc").val();
    var Id = "1";
    var TaskNote = $("#inputTaskNote").val();

    var data = {
                    ID: Id,
                    TaskName: TaskName ,
                    TaskDescription: TaskDesc ,
                    Notes: TaskNote
                };

    $.ajax({type: 'POST',
            url: '@Url.Action("Index","ManageTasks")',
            data: JSON.stringify(data),
            contentType: "application/json; charset=utf-8",
            dataType: 'json',
            success: function (result, status, xhr) {
                console.log(result);
            }
          })
   })

Answer 1

当您使用 ajax 时，标准 ASP.NET Core 验证机制不会自动将验证消息渲染回视图。

要解决此问题，您需要在 AJAX 成功回调中手动处理验证响应并更新视图。

更多详情，您可以参考下面的例子：

我的家庭控制器：

    [HttpPost]
    public async Task<IActionResult> Index([FromBody] AddTaskViewModel model)
    {

        if (!ModelState.IsValid)
        {
            var errors = ModelState.Where(x => x.Value.Errors.Any())
                                   .ToDictionary(x => x.Key, x => x.Value.Errors.First().ErrorMessage);
            return Json(new { success = false, errors });
        }

        // Process valid model and return success
        return Json(new { success = true });


    }

用jquery代码查看：

@{
    ViewData["Title"] = "Home Page";
}

@model AddTaskViewModel
 

<div class="row" id="AForm">
    <div class="col-md-12">
        <div class="card m-b-20">
            <div class="card-header">
                <h3 class="card-title">Add Task</h3>
            </div>
            <div class="card-body">
                <form id="AddTaskForm" asp-controller="ManageTasks" asp-action="Index">
                    <div class="form-row">
                        <div class="form-group col-md-6">
                            <label asp-for="TaskName" class="col-form-label">Task Name</label>
                            <input asp-for="TaskName" type="text" id="inputTaskName" class="form-control">
                            <span id="TaskName-error" class="text-danger"></span> <!-- Updated span ID -->
                        </div>
                        <div class="form-group col-md-6">
                            <label asp-for="TaskDescription" class="col-form-label">Task Desc</label>
                            <input type="text" class="form-control" asp-for="TaskDescription" id="inputDesc">
                            <span id="TaskDescription-error" class="text-danger"></span> <!-- Updated span ID -->
                        </div>
                    </div>
                    <div class="form-row">
                        <div class="form-group col-md-12">
                            <label asp-for="Notes" class="col-form-label">Notes</label>
                            <textarea class="form-control" asp-for="Notes" id="inputTaskNote" rows="4"></textarea>
                        </div>
                    </div>
                    <button type="submit" class="btn btn-primary">Add Task</button>
                </form>
            </div>
        </div>
    </div>
</div>

@section Scripts{

<script>
        // $("#AddTaskForm").submit(function (event) {
        //     event.preventDefault();
        //     var TaskName = $("#inputTaskName").val();
        //     var TaskDesc = $("#inputDesc").val();
        //     var Id = "1";
        //     var TaskNote = $("#inputTaskNote").val();

        //     var data = {
        //         ID: Id,
        //         TaskName: TaskName,
        //         TaskDescription: TaskDesc,
        //         Notes: TaskNote
        //     };

        //     $.ajax({
        //         type: 'POST',
        //         url: '@Url.Action("Index", "ManageTasks")',
        //         data: JSON.stringify(data),
        //         contentType: "application/json; charset=utf-8",
        //         dataType: 'json',
        //         success: function (result, status, xhr) {
        //             console.log(result);
        //         }
        //     })
        // })

        $("#AddTaskForm").submit(function (event) {
            event.preventDefault();
            var TaskName = $("#inputTaskName").val();
            var TaskDesc = $("#inputDesc").val();
            var Id = "1";
            var TaskNote = $("#inputTaskNote").val();

            var data = {
                ID: Id,
                TaskName: TaskName,
                TaskDescription: TaskDesc,
                Notes: TaskNote
            };

            $.ajax({
                type: 'POST',
                url: '@Url.Action("Index", "Home")',
                data: JSON.stringify(data),
                contentType: "application/json; charset=utf-8",
                dataType: 'json',
                success: function (result, status, xhr) {
                    if (result.success) {
                        // Handle success, maybe redirect or show a success message
                        console.log("Task added successfully.");
                    } else {
                        // Handle validation errors
                        debugger;
                        $.each(result.errors, function (key, value) {
                            // Display validation messages in the appropriate spans
                            $("#" + key + "-error").text(value);
                        });
                    }
                }
            });
        });
</script>
}

结果：