ASP.NET使用XHR向Controller Action传参时得到null值如何解决？

问题原因 #

• XHR的send()方法仅支持传入1个参数，你写的xhr.send(data1, data2)只会发送第一个参数data1，data2直接被忽略，没有被传递到后端。
• 即使你只传了单个字符串，ASP.NET Core默认无法将POST请求中无格式的纯字符串匹配到对应命名的Action参数，因此两个参数都会解析为null。

解决方案 #

方案1：使用FormData传递参数（最简便，无需额外配置） #

前端修改为构造FormData对象填充参数后发送：

<script>
    var data1 = "some string";
    var data2 = "other string";
    // 构造FormData对象
    var formData = new FormData();
    formData.append("data1", data1);
    formData.append("data2", data2);

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/Pages/UploadAudio", true);
    // 直接发送FormData即可，浏览器会自动设置正确的Content-Type
    xhr.send(formData);
    xhr.onreadystatechange = saved;
</script>

后端无需修改原有代码，即可正常解析到data1和data2的值。

方案2：传递JSON格式参数 #

如果需要传JSON格式，前端需要设置请求头，同时调整后端接收逻辑：
前端修改代码：

<script>
    var data1 = "some string";
    var data2 = "other string";
    // 构造JSON对象后序列化
    var postData = JSON.stringify({
        data1: data1,
        data2: data2
    });

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/Pages/UploadAudio", true);
    // 设置请求头为JSON格式
    xhr.setRequestHeader("Content-Type", "application/json");
    xhr.send(postData);
    xhr.onreadystatechange = saved;
</script>

后端需要新增接收模型绑定参数：

// 新增接收参数的模型类
public class UploadAudioRequest
{
    public string data1 { get; set; }
    public string data2 { get; set; }
}

// Action修改为接收模型参数
[HttpPost]
public IActionResult UploadAudio([FromBody] UploadAudioRequest request)
{
    // 用request.data1、request.data2获取对应值
    return Ok();
}

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