.NET5环境下如何通过AJAX将Razor视图的Model传递到控制器

AI 小北

2026-10-2

问题核心原因

控制器接收参数类型与前端发送的JSON结构不匹配：前端发送的是包含Name/Subject/EmailAddress/MessageBody四个字段的JSON对象，但控制器设置的是接收单个字符串参数data，类型不匹配自然无法完成绑定，最终得到null值
表单元素选择器可能失效：你的input通过asp-for="IndexEmail.Name"生成，默认生成的id为IndexEmail_Name，如果没有手动设置id="displayname"，$("#displayname")会取不到值，导致提交的JSON本身就包含null字段

正确修改步骤

1. 调整控制器接收逻辑

把接收参数改为你定义的IndexEmail类型，加上[FromBody]特性，让ASP.NET Core自动把请求体的JSON反序列化为对应模型：

[HttpPost]
public async Task<JsonResult> SendGrid_SendEmail([FromBody] IndexEmail data)
{
    // 这里可直接读取data.Name、data.Subject等属性的值
}

2. 修正AJAX发送逻辑

优先用第一种AJAX写法，调整选择器避免id不匹配问题：

function SendEmail() {
    if ($("form").valid()) {
        // 用name属性选择表单值，避免id不匹配问题
        var postData = {
            Name: $("input[name='IndexEmail.Name']").val(),
            Subject: $("input[name='IndexEmail.Subject']").val(),
            EmailAddress: $("input[name='IndexEmail.EmailAddress']").val(),
            MessageBody: $("textarea[name='IndexEmail.MessageBody']").val()
        };
        $("body").addClass("loading");
        $.ajax({
            type: "POST",
            url: "/Ajax/SendGrid_SendEmail",
            data: JSON.stringify(postData),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            error: function (xhr, status, error) {
                console.log(error);
            }
        }).done(function (data) {
            $("body").removeClass("loading");
        });
    }
}

可选简化方案：直接序列化表单

如果表单所有字段的name属性和IndexEmail的字段完全对应，可直接序列化表单，无需手动拼接每个字段：

var formData = $("form").serializeArray();
var postData = {};
formData.forEach(item => {
    postData[item.name.replace("IndexEmail.","")] = item.value;
});
// 后续直接JSON.stringify(postData)发送即可

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