使用Ajax向.NET Core Razor Page模型提交数据时Post方法接收值为Null

你的问题主要出在Ajax发送的数据格式不匹配，以及没阻止按钮默认的表单提交行为，导致后台无法正确绑定参数。下面一步步给你修复方案：

1. 先阻止按钮的默认表单提交行为 #

你的按钮是<input type="submit">，点击时会默认触发表单的原生POST提交，这会直接打断你的Ajax请求。首先要在点击事件里阻止这个默认行为：

$(function () {
    $('#placeRequest').on('click', function (e) {
        // 阻止表单默认提交动作
        e.preventDefault();
        $.ajax({
            // 其他配置保持不变
        });
    });
});

2. 修正Ajax的数据发送格式 #

后台的OnPostPlaceRequest方法期望接收名为myData的参数，但你直接传了$('#select').val()，没有指定参数名，导致模型绑定失败。有两种常用的修复方式：

方式一：发送表单格式数据（推荐，适配默认模型绑定） #

把data改成键值对形式，明确指定参数名，让后台能识别对应关系：

$.ajax({
    type: "POST",
    url: "/Index?handler=PlaceRequest",
    // 这里的键名myData要和后台参数名完全一致
    data: { myData: $('#select').val() },
    headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
    success: function () {
        alert('Posted using jQuery')
    }
});

这种方式不需要修改后台代码，因为Razor Page默认的模型绑定会自动处理application/x-www-form-urlencoded格式的键值对数据。

方式二：发送JSON格式数据（适合复杂对象场景） #

如果后续需要发送更复杂的数据结构，推荐用JSON格式，这时候需要做以下调整：

前端修改：

$.ajax({
    type: "POST",
    url: "/Index?handler=PlaceRequest",
    // 把数据序列化为JSON字符串
    data: JSON.stringify({ myData: $('#select').val() }),
    // 明确指定内容类型为JSON
    contentType: "application/json",
    headers: { "RequestVerificationToken": $('input[name="__RequestVerificationToken"]').val() },
    success: function () {
        alert('Posted using jQuery')
    }
});

后台修改：

给参数加上[FromBody]特性，告诉框架从请求体的JSON中绑定数据：

using Microsoft.AspNetCore.Mvc;

public IActionResult OnPostPlaceRequest([FromBody] string myData)
{
    // 现在myData应该能正常获取到值了
    return new OkResult();
}

3. 额外检查点 #

• 先确认下拉框#select有选中值，可以在Ajax代码里先console.log($('#select').val())验证。
• 确保页面里存在__RequestVerificationToken隐藏字段（你的form标签已经加了method="post"，Razor Page会自动生成这个字段，一般没问题）。

按照上面的步骤修改后，后台的myData参数应该就能正确接收到下拉框的选中值了。

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