ASP.NET Core 5+React.js文本框传值至控制器始终为0的问题

核心问题根源 #

你的ASP.NET Core控制器未正确接收React发送的JSON请求体数据，同时需确保React端的handleChange方法能正确更新组件状态。

步骤1：修正ASP.NET Core控制器的参数绑定逻辑 #

当前控制器方法用独立参数接收absentDays和workedDays，但React发送的是JSON格式请求体，ASP.NET Core默认不会自动将JSON字段绑定到独立参数上，需做以下修改：

1.1 创建请求接收模型 #

在项目中新增一个类，用于统一接收请求数据：

public class CalculateSalaryRequest
{
    public int Id { get; set; }
    public decimal AbsentDays { get; set; }
    public decimal WorkedDays { get; set; }
}

1.2 更新控制器方法 #

使用模型接收数据，并添加[FromBody]特性指定从请求体绑定：

[HttpPost("{id}/calculate")]
public async Task<IActionResult> Calculate(int id, [FromBody] CalculateSalaryRequest request)
{
    var result = await Task.FromResult(StaticEmployees.ResultList.FirstOrDefault(m => m.Id == id));

    if (result == null) return NotFound();
    var type = (EmployeeType)result.TypeId;
    
    // 现在可以正常获取request.AbsentDays和request.WorkedDays的值
    return type switch
    {
        EmployeeType.Regular =>
            // 示例：结合缺勤天数计算薪资
            Ok(25000 - (request.AbsentDays * 1000)),
        EmployeeType.Contractual =>
            // 示例：结合出勤天数计算薪资
            Ok(request.WorkedDays * 2000),
        _ => NotFound("Employee Type not found")
    };
}

步骤2：确保React的handleChange正确更新状态 #

你未提供handleChange的代码，但这是状态更新的关键，需确保它能根据输入框的name属性动态更新对应state字段：

handleChange(e) {
    const { name, value } = e.target;
    // 将输入的字符串转为数字，避免传递字符串导致后端解析为0
    const numericValue = parseFloat(value) || 0;
    this.setState({
        [name]: numericValue
    });
}

注意：

• 利用[name]动态匹配state字段（输入框的name已设置为absentDays和workedDays）
• 必须将输入的字符串转为数字类型，否则后端接收字符串会默认解析为0

步骤3：验证请求发送正确性 #

打开浏览器开发者工具的「Network」标签，查看POST请求的Payload，确认absentDays和workedDays是否携带了输入的数值，示例正确Payload：

{
    "id": 1,
    "absentDays": 2,
    "workedDays": 0
}

额外注意事项 #

• 确保React组件初始state中absentDays和workedDays为数字类型（如0），而非字符串
• 路由中的{id}与请求体中的id可保持一致，或仅使用路由中的id即可，避免冗余

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