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
相关产品推荐
相关产品推荐

