ASP.NET Core 6 MVC中如何通过Ajax向控制器传递模型？

你的代码存在几个关键问题导致无法正常传递模型，以下是修正方案：

问题点分析 #

1. JSON格式不匹配：你设置了contentType: "application/json"，但传递的data是普通JavaScript对象，没有序列化为JSON字符串，后端无法正确解析。
2. 缺少防伪造令牌验证：控制器添加了[ValidateAntiForgeryToken]属性，但Ajax请求中没有携带该令牌，会触发400错误。
3. 路由与URL不一致：Ajax的URL末尾多了斜杠/，虽然ASP.NET Core路由通常兼容，但建议与控制器路由保持一致。
4. 验证失败返回方式不合理：模型验证失败时返回View(data)，这会返回HTML页面，而Ajax请求期望的是JSON格式响应。

修正后的代码 #

前端Ajax代码 #

const fd = new FormData($('#form-data')[0]);
const data = {};
fd.forEach((value, key) => (data[key] = value));

// 获取防伪造令牌
const token = $('input[name="__RequestVerificationToken"]').val();

$.ajax({
    type: 'POST',
    url: '/User/Update_Me',
    data: JSON.stringify(data), // 将对象序列化为JSON字符串
    contentType: "application/json",
    headers: {
        "RequestVerificationToken": token // 在请求头中携带防伪造令牌
    },
    dataType: 'json',
    success: function (result) {
        alert('更新成功');
    },
    error: function (xhr) {
        // 处理验证失败或其他错误
        if (xhr.status === 400) {
            const errors = xhr.responseJSON;
            let errorMsg = '';
            for (let key in errors) {
                errorMsg += errors[key] + '\n';
            }
            alert('验证失败：\n' + errorMsg);
        } else {
            alert('请求出错');
        }
    }
});

后端控制器代码 #

[HttpPost]
[Route("/User/Update_Me")]
[AllowAnonymous]
[ValidateAntiForgeryToken]
public IActionResult Update_Me([FromBody] Views.User.Data data)
{
    if (!ModelState.IsValid)
    {
        // 返回验证错误的JSON结果，供前端处理
        return BadRequest(ModelState);
    }

    // 执行更新逻辑...

    // 返回成功响应
    return Json(new { success = true, message = "更新完成" });
}

额外注意事项 #

• 确保你的Views.User.Data模型类的属性名称与表单字段的name属性完全一致，大小写敏感。
• 如果表单中包含文件上传，不能使用application/json contentType，需要改用multipart/form-data，此时后端模型需要添加[FromForm]属性，且Ajax不需要序列化JSON。

内容的提问来源于stack exchange，提问作者Dev