修复 ASP.NET Core Razor 页面的 AJAX 400 错误请求错误

替代方法：使用 ASP.NET Core 调试 AJAX 中的 400 错误请求错误

使用 JavaScript 与 ASP.NET Core MVC 进行 AJAX 处理

$("#sendButton").click(function(event) {
    event.preventDefault();
    var userId = $("#userId").val();
    var userName = $("#username").val();
    var message = $("#message").val();
    var groupId = $("#groupid").val();
    var attachFile = $("#f").get(0).files[0];
    var formData = new FormData();
    formData.append("FileAttach", attachFile);
    formData.append("UserId", userId);
    formData.append("UserName", userName);
    formData.append("Message", message);
    formData.append("GroupId", groupId);
    $.ajax({
        type: "POST",
        url: "/Index?handler=SendMessage",
        data: formData,
        enctype: "multipart/form-data",
        processData: false,
        contentType: false,
        success: function(response) {
            console.log("Message sent successfully");
            $("#message").val('').focus();
            document.getElementById("preChat").scrollIntoView({ block: "end" });
        },
        error: function(xhr, status, error) {
            console.error("Error occurred: ", error);
        }
    });
});

在 AJAX 请求中使用 JSON 序列化的解决方案

使用 JSON 序列化实现 AJAX 以改进数据处理

$("#sendButton").click(function(event) {
    event.preventDefault();
    var requestData = {
        UserId: $("#userId").val(),
        UserName: $("#username").val(),
        Message: $("#message").val(),
        GroupId: $("#groupid").val(),
    };
    $.ajax({
        type: "POST",
        url: "/Index?handler=SendMessage",
        data: JSON.stringify(requestData),
        contentType: "application/json",
        success: function(response) {
            console.log("JSON data sent successfully");
            $("#message").val('').focus();
            document.getElementById("preChat").scrollIntoView({ block: "end" });
        },
        error: function(xhr, status, error) {
            console.error("Error occurred: ", error);
        }
    });
});

具有 JSON 绑定的 FormData 的 ASP.NET Core 处理程序方法

在 ASP.NET Core 中实现后端处理程序以接收来自 AJAX 请求的 FormData

public class InsertChatViewModel {
    public string UserId { get; set; }
    public string GroupId { get; set; }
    public string Message { get; set; }
    public string UserName { get; set; }
    public IFormFile FileAttach { get; set; }
}

public IActionResult OnPostSendMessage([FromForm] InsertChatViewModel model) {
    if (ModelState.IsValid) {
        // Process the model data
        return new JsonResult(new { success = true });
    }
    return new JsonResult(new { success = false, message = "Invalid data" });
}

AJAX 和 ASP.NET Core 处理程序的单元测试

通过前端和后端单元测试验证 AJAX 功能

using Microsoft.VisualStudio.TestTools.UnitTesting;
using Moq;
using MyProject.Pages;

[TestClass]
public class AjaxHandlerTests {
    [TestMethod]
    public void SendMessageHandler_ValidModel_ReturnsSuccess() {
        var pageModel = new IndexModel();
        var result = pageModel.OnPostSendMessage(new InsertChatViewModel {
            UserId = "123",
            GroupId = "456",
            Message = "Test message",
            UserName = "TestUser"
        });
        Assert.IsInstanceOfType(result, typeof(JsonResult));
        Assert.AreEqual(true, ((JsonResult)result).Value.success);
    }
}

ASP.NET Core 中处理 AJAX 错误的关键问题

1. 是什么导致 AJAX 调用中出现 400 Bad Request 错误？
2. 这 400 错误请求 错误通常是由于格式不正确的请求造成的，其中服务器无法解释正在发送的数据。这种情况经常是由于使用不当造成的 FormData, processData， 和 contentType 在 AJAX 调用中。
3. 如何在 AJAX 请求中包含文件？
4. 使用 FormData 并将文件附加到它使用 formData.append("FileAttach", file)。然后，设置 processData 和 contentType 到 false 以防止 AJAX 重新格式化数据。
5. 为什么我的 ASP.NET Core 中的处理程序方法没有被调用？
6. 如果未调用处理程序，请检查您是否使用了正确的格式 URL AJAX中的参数，例如 “/Page?handler=YourMethod”，并且方法的访问级别匹配。
7. ASP.NET Core 中 ModelState.IsValid 的用途是什么？
8. ModelState.IsValid 验证收到的数据是否与预期模型一致。这对于服务器端验证至关重要，可确保数据在处理前可用并满足要求。
9. 发送AJAX请求时如何调试400错误？
10. 要调试，首先检查控制台 AJAX 请求语法中是否有错误，验证 FormData 配置，并检查服务器日志以查看是否记录了有关请求的任何特定详细信息。
11. ASP.NET Core 中 JsonResult 的作用是什么？
12. JsonResult 从控制器操作以 JSON 形式返回数据，使其成为 AJAX 响应的理想选择。例如，使用 new JsonResult(new { success = true }) 表示处理成功。
13. 我可以以 JSON 而不是 FormData 的形式发送数据吗？
14. 是的，如果不包含任何文件。只需使用序列化数据 JSON.stringify() 并设置 contentType 到 application/json 在 AJAX 请求中。
15. processData: false 在 AJAX 调用中做什么？
16. 环境 processData 到 false 确保数据保持其原始格式，这是必要的 FormData 与文件。如果没有这个，AJAX 将尝试将数据序列化为查询字符串。
17. AJAX 调用后如何将页面滚动到特定元素？
18. 使用 element.scrollIntoView() 在 JavaScript 中。例如， document.getElementById("elementId").scrollIntoView({ block: "end" }) 操作完成后滚动到该元素。
19. ASP.NET Core 中的 [FromForm] 是什么？什么时候应该使用它？
20. 这 [FromForm] 属性将表单数据绑定到操作方法中的参数。在使用时特别有用 FormData 在 AJAX 中并在服务器端启用正确的数据绑定。

AJAX 请求故障排除的要点

遭遇与解决 阿贾克斯 请求错误是一种宝贵的经验，可以帮助开发人员了解客户端-服务器通信的细微差别。本指南概述了关键步骤，例如正确的 表单数据 配置和模型绑定，确保客户端和服务器之间的数据一致性。学习这些技术使您能够可靠地处理数据并避免常见错误。

通过应用这些实践，您可以防止类似以下错误 400 错误请求 并增强动态应用程序中的用户体验。随着您改进错误处理和数据绑定的方法，AJAX 成为响应式 Web 开发的高效工具。 🎉