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

1. 使用详细说明 在 ASP.NET Core Razor Pages 中，包括如何处理 FormData 并避免常见问题 错误。 微软 ASP.NET Core 文档
2. JavaScript 深入指南 方法和处理 AJAX 请求中的文件上传，包括内容类型和序列化的最佳实践。 MDN 网络文档：FormData
3. 故障排除指南 并通过实际示例和配置有效地使用 jQuery 进行服务器请求的数据绑定。 jQuery API 文档
4. 了解模型绑定和数据验证 ，包括 [FromForm] 和 ModelState 验证的用例，以确保服务器端操作的安全。 Microsoft 模型绑定指南