Vue.js+Axios向ASP.NET Core控制器PUT传值为null求助

使用Vue.js实现产品更新功能时，通过Axios发送PUT请求到ASP.NET Core控制器，但控制器Action方法接收的Request对象始终为null。以下是相关代码及排查解决方案：

前端代码 #

Vue.js更新产品方法 #

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

Razor页面(index.cshtml) #

@page
@model Shop.Ui.Pages.Admin.IndexModel
@{}
@section scripts
    {
    <script src="https://unpkg.com/vue@2.6.14/dist/vue.js"></script>

    <script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>
    <script src="~/js/admin/main.js"></script>

}
<div id="app">
 <button v-on:click="getProducts">Get Products</button>
    <div>
        <p v-for="(product,index) in products">
            {{product.id}} - {{product.name}} - {{product.description}}
            <a @@click="editProduct(product,index)">Edit</a>
            <a @@click="deleteProduct(product.id)">Remove</a>
        </p>
    </div>
    
    <div>
        
        <input v-model="productModel.name"/> 
        <input v-model="productModel.description" />
        <input v-model.number="productModel.value" />
        <button @@click="createProduct" v-if="!productModel.id">Create Product</button>
        <button @@click="updateProduct" v-else>Update Product</button>
        
    </div>
</div>

后端代码 #

ASP.NET Core控制器Action #

[HttpPut("products")]
public async Task<IActionResult> UpdateProduct([FromBody] UpdateProduct.Request request)
    => Ok(await new UpdateProduct(_ctx).Do(request));

UpdateProduct类及Request/Response定义 #

public class UpdateProduct
{
private ApplicationDbContext _context;

public UpdateProduct(ApplicationDbContext context)
{
    _context = context;
}


public async Task<Response> Do(Request request)
{
    try
    {
        var product = _context.Products.Where(x => x.Id == request.Id).FirstOrDefault();

        product.Name = request.Name;
        product.Description = request.Description;
        product.Value = request.Value;

        await _context.SaveChangesAsync();
        return new Response
        {
            Id = product.Id,
            Name = product.Name,
            Description = product.Description,
            Value = product.Value
        };
    }
    catch (Exception ex)
    {
        Console.WriteLine($"An error occurred: {ex.Message}");
        throw new ApplicationException("An error occurred while updating the product.");
    }
}


[Serializable]
public class Request
{
    public int Id {  get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public decimal Value { get; set; }
}
[Serializable]
public class Response
{
    public int Id { get; set; }
    public string Name { get; set; }
    public string Description { get; set; }
    public decimal Value { get; set; }

}

排查与解决方案 #

1. 修复属性大小写不匹配问题 #

前端productModel的属性为小写（id, name, description, value），后端Request类属性为大写开头（Id, Name, Description, Value）。ASP.NET Core默认JSON序列化器区分大小写，导致属性无法映射。

解决方式二选一：

• 修改前端productModel属性名，与后端保持一致（如Id、Name）；
• 在后端配置JSON序列化器忽略大小写，在Program.cs中添加：

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

2. 确认请求Content-Type正确性 #

打开浏览器开发者工具（F12），在Network标签下查看PUT请求的Headers，确认Content-Type为application/json。Axios默认会设置该头，但如果有全局拦截器修改了请求头，需恢复正确配置。

3. 验证productModel数据完整性 #

在updateProduct方法中添加日志，确认productModel包含完整的id属性：

updateProduct() {
    console.log('待更新数据:', this.productModel); // 检查id、name等属性是否存在且有值
    this.loading = true;
    // 后续请求代码
}

4. 检查后端JSON请求体支持配置 #

确保项目Program.cs中已添加必要服务和中间件：

builder.Services.AddControllers();

app.UseRouting();
app.UseEndpoints(endpoints =>
{
    endpoints.MapControllers();
});

5. 确认请求数据格式合法 #

通过开发者工具查看Request Payload，确保数据格式正确（如value为合法数字，无NaN或非数值内容）：

{
    "id": 1,
    "name": "测试产品",
    "description": "测试描述",
    "value": 29.99
}

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