You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

MVC中如何将动态创建表格行的ID传递至控制器?

解决动态生成表格行ID无法传递到MVC控制器的问题

首先得明确:你当前的写法里,<td>的value属性和按钮的data-val都是不会被表单自动提交的——前者不是表单控件的标准属性,后者是自定义数据属性,浏览器在提交表单时只会收集<input>、<select>、<textarea>这类表单控件的值。这就是为什么这些ID没传到控制器的核心原因。

下面给你两种可行的解决方案,根据你的实际场景选择:

方案一:用隐藏Input承载ID(适合普通表单提交)

修改你动态创建表格行的代码,在每个目标<td>里添加一个隐藏的input控件,并且按照MVC模型绑定的规则命名:

<td class="text-center" style="width:100px;" name="RegistrationTypeInspectionType.InspectionTypes">
  <input type="hidden" name="InspectionTypeIds[]" value="5" />
  <button class="removeInspectionType" type="button" data-val="5">Remove</button>
</td>

这里的name="InspectionTypeIds[]"是关键:方括号格式告诉MVC这是一个数组,控制器可以直接用List<int>类型接收。

然后在控制器里定义对应的Action:

[HttpPost]
public ActionResult YourSubmitAction(List<int> InspectionTypeIds)
{
    // 这里就拿到了所有行的ID列表,执行保存到数据库的逻辑
    foreach(var id in InspectionTypeIds)
    {
        // 调用BusinessLayer的方法保存
        new BusinessLayer.RegistrationTypeInspectionType().Save(id);
    }
    return RedirectToAction("YourPage");
}

如果你的控制器需要接收的是完整的RegistrationTypeInspectionType模型列表,那隐藏input的命名要对应模型的属性,比如:

<input type="hidden" name="RegistrationTypeInspectionTypes[0].InspectionTypeId" value="5" />
<input type="hidden" name="RegistrationTypeInspectionTypes[0].RegistrationTypeId" value="XXX" />

(注意索引[0]要随动态行递增,比如第一行是[0],第二行[1],以此类推)

对应的控制器Action参数:

[HttpPost]
public ActionResult YourSubmitAction(List<RegistrationTypeInspectionType> RegistrationTypeInspectionTypes)
{
    // 保存逻辑
    return RedirectToAction("YourPage");
}

方案二:AJAX手动收集ID提交(适合无刷新提交)

如果你的表单是通过AJAX提交的,可以手动收集所有行的ID,再发送给控制器:

// 点击提交按钮时执行
$('form').submit(function(e) {
    e.preventDefault(); // 阻止默认表单提交

    // 收集所有行的ID
    var inspectionTypeIds = [];
    $('.removeInspectionType').each(function() {
        // 从按钮的data-val属性里取ID
        inspectionTypeIds.push($(this).data('val'));
    });

    // 发送AJAX请求
    $.ajax({
        url: '/YourController/YourSubmitAction',
        type: 'POST',
        data: { InspectionTypeIds: inspectionTypeIds },
        success: function(response) {
            // 提交成功后的处理,比如刷新页面或提示
            alert('保存成功!');
        },
        error: function() {
            alert('保存失败,请重试');
        }
    });
});

控制器的Action和方案一的一致,用List<int> InspectionTypeIds接收即可。

额外注意事项

  • 确保所有隐藏input都在<form>标签内部,不然表单提交时不会包含它们;
  • 如果是动态添加行,每次新增行时要正确生成对应的隐藏input,索引(如果用模型列表的话)要连续不重复;
  • 可以用浏览器的开发者工具(Network面板)查看表单提交的Form Data,确认ID是否被正确发送,这是排查问题的好方法。

内容的提问来源于stack exchange,提问作者Chiefster

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.05.27 10:05:04