Vue.js+Axios发送PUT请求至ASP.NET Core控制器时参数为Null的问题

针对你遇到的请求载荷数据正确，但ASP.NET Core控制器UpdateProduct方法接收对象为Null的问题，按以下步骤排查解决：

1. 给控制器参数添加[FromBody]特性 #

ASP.NET Core不会自动将请求体中的JSON绑定到复杂类型参数，必须显式声明[FromBody]特性：

[HttpPut("products")]
public IActionResult UpdateProduct([FromBody] UpdateProduct model)
{
    // 业务逻辑实现
}

2. 确保UpdateProduct类属性与请求载荷字段匹配 #

检查UpdateProduct类的属性名称、类型是否和请求载荷完全对应（ASP.NET Core默认大小写敏感）：

• 如果类属性是大驼峰（如Id、Name），而请求是小驼峰（id、name），可以在类属性上添加[JsonPropertyName]特性指定映射关系：

public class UpdateProduct
{
    [JsonPropertyName("id")]
    public int Id { get; set; }

    [JsonPropertyName("name")]
    public string Name { get; set; }

    [JsonPropertyName("description")]
    public string Description { get; set; }

    [JsonPropertyName("value")]
    public string Value { get; set; }
}

或者在Program.cs中配置JSON序列化忽略大小写，简化匹配：

builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.PropertyNameCaseInsensitive = true;
    });

3. 显式设置Axios请求的Content-Type #

虽然Axios默认会为JSON数据设置Content-Type: application/json，但显式指定可确保请求头正确：

updateProduct() {
    this.loading = true;
    axios.put('/Admin/products', this.productModel, {
        headers: {
            'Content-Type': 'application/json'
        }
    })
    .then(res => {
        console.log(res.data);
        this.products.splice(this.objectIndex, 1, res.data);
    })
    .catch(err => { console.log(err); })
    .then(() => {
        this.loading = false;
    });
}

4. 验证Program.cs中的控制器配置 #

确保Program.cs中已正确添加控制器服务并启用JSON序列化支持：

var builder = WebApplication.CreateBuilder(args);

// 添加控制器服务并配置JSON序列化
builder.Services.AddControllers()
    .AddJsonOptions(options =>
    {
        options.JsonSerializerOptions.PropertyNamingPolicy = null; // 保持属性原名称
    });

var app = builder.Build();

// 启用控制器路由
app.MapControllers();

app.Run();

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