点击按钮传递int类型Id列表至控制器时接收值为null的问题

我来帮你梳理代码里的问题，以及对应的修复方案：

核心问题点 #

1. 重复的ID属性：你在循环里给每个按钮都设置了id="btnCalcVS"，但DOM中ID必须是唯一的。这会导致点击事件只能绑定到第一个按钮，或者出现不可预期的行为。
2. 无效的JSON格式：你在AJAX的data里直接循环输出@bt.Id，这样生成的是一串无分隔的数字（比如1234），而不是合法的JSON数组（[1,2,3,4]）。ASP.NET Core无法解析这种格式的数据，所以控制器接收的businessTypeIds为null。
3. 传递了非预期数据：当前代码会把所有Business的BusinessTypes ID都传递给控制器，但看起来你应该是想传递当前点击行对应的Business的BusinessTypes ID？

修改后的完整代码 #

1. View 部分（HTML）

把按钮的ID改为Class，并通过data属性存储当前行的BusinessType ID数组：

@foreach (var business in Model.Businesses) { 
  <tr> 
    <td>@business.Name</td> 
    <td> 
      <p> 
        @foreach (var bt in business.BusinessTypes) { @bt.Name; } 
      </p> 
    </td> 
    <td>
      <!-- 使用class替代唯一id，并用data属性存储当前行的ID数组 -->
      <button type="button" class="btnCalcVS" data-business-type-ids='@Json.Serialize(business.BusinessTypes.Select(bt => bt.Id))'> Calculate Validator Score</button>
    </td> 
  </tr> 
}

2. JQuery 部分

绑定到Class选择器，从按钮的data属性中获取正确的ID数组，再传递给控制器：

<script type="text/javascript">
  $(document).ready(function () {
    // 绑定到class，处理所有按钮的点击事件
    $(document).on("click", ".btnCalcVS", function () {
      // 从data属性中取出预序列化的ID数组
      var businessTypeIds = $(this).data("business-type-ids");
      
      $.ajax({
        type: 'POST',
        url: '/BusinessType/Index',
        contentType: "application/json",
        // 把数组序列化为合法的JSON格式
        data: JSON.stringify(businessTypeIds),
        success: function (data) { 
          alert("success"); 
        },
        error: function (e) { 
          alert("请求错误: " + e.responseText); 
        }
      });
    });
  });
</script>

3. Controller 部分（无需修改，确认即可）

你的控制器代码是正确的，[FromBody]会正确解析传入的JSON数组：

[HttpPost]
[Route("/BusinessType/Index")]
public IActionResult Index([FromBody] List<int> businessTypeIds)
{
  // 你的逻辑代码
  return Ok();
}

额外说明 #

如果你确实需要传递所有Business的所有BusinessTypes ID（而不是当前行的），可以在View顶部提前生成全量ID数组：

@{
  var allBusinessTypeIds = Model.Businesses
                                .SelectMany(b => b.BusinessTypes)
                                .Select(bt => bt.Id)
                                .ToList();
}

然后在JQuery中直接使用：

var businessTypeIds = @Json.Serialize(allBusinessTypeIds);

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