本教程详细阐述了如何在 asp.net mvc中使用 `@html.editorfor` 在 循环 中动态生成表单元素时，通过 jquery 高效准确地获取这些元素的值。核心策略是为每个动态生成的元素赋予唯一的 id，然后利用 jquery 的选择器 和遍历方法来定位并提取所需数据，确保在复杂 ui 场景下数据的正确采集。
动态生成表单元素的挑战
在 ASP.net MVC 应用中，当我们需要根据模型数据列表动态渲染多个输入字段时，通常会结合 C# 的 for 或 foreach 循环与 @html.EditorFor 等 HTML 辅助方法。例如，在一个表格中显示多个 事件 及其日期，每个事件日期对应一个 EditorFor 输入框。
<table class="table table-striped" id="tblEvents"> <thead> <tr> <th class="col-md-6 Subheading-2">Event Name</th> <th class="col-md-6 Subheading-2">Event Date</th> </tr> </thead> <tbody> @for(int i=0;i<Model.ModelEvents.Count;i++) {<tr> <td class="col-md-6"> @Html.HiddenFor(model=>model.ModelEvents[i].NAME) @Html.HiddenFor(model=>model.ModelEvents[i].ADDRESS) @Html.HiddenFor(model=>model.ModelEvents[i].PINCODE) @Html.DropDownListFor(model=>model.ModelEvents[i].EVENTNAME,new SelectList(Model.Events,"Value","Text",Model.ModelEvents[i].EVENTNAME),new {@class = "form-control eventname", style = "max-width:300px"}) </td> <td class="col-md-6"> @Html.EditorFor(model => model.ModelEvents[i].EVENTDATE, new {@class = "text form-control eventdate"}) </td> </tr> } </tbody> </table>在这种情况下，由于 @Html.EditorFor 会为每个输入框生成一个基于模型属性名的 name 属性，但默认不会生成唯一的 id 属性（或者生成的 id 可能不便于直接批量选择）。如果我们需要使用 jQuery 来获取所有这些动态生成的 EVENTDATE 输入框的值，直接通过类名或标签名选择可能会比较困难，或者无法区分是哪个循环迭代生成的元素。
解决方案：赋予唯一 ID 并使用 jQuery 选择器
解决此问题的关键在于为每个动态生成的 EditorFor 元素赋予一个唯一的 ID。通过将循环索引 i 合并到 ID 中，我们可以确保每个元素都拥有一个独一无二的 标识符。
步骤一：修改 @Html.EditorFor 以包含唯一 ID
在 @Html.EditorFor 辅助方法中，可以通过匿名 对象 传递 HTML 属性。我们将 id 属性设置为一个包含循环索引的 字符串，例如 ”foo_” + i。
@for(int i=0;i<Model.ModelEvents.Count;i++) {<tr> <td class="col-md-6"> @Html.HiddenFor(model=>model.ModelEvents[i].NAME) @Html.HiddenFor(model=>model.ModelEvents[i].ADDRESS) @Html.HiddenFor(model=>model.ModelEvents[i].PINCODE) @Html.DropDownListFor(model=>model.ModelEvents[i].EVENTNAME,new SelectList(Model.Events,"Value","Text",Model.ModelEvents[i].EVENTNAME),new {@class = "form-control eventname", style = "max-width:300px"}) </td> <td class="col-md-6"> @Html.EditorFor(model => model.ModelEvents[i].EVENTDATE, new {@class = "text form-control eventdate", id = "eventDate_" + i}) </td> </tr> }通过上述修改，生成的 HTML 中每个日期输入框将拥有如 id=”eventDate_0″、id=”eventDate_1″ 等唯一 ID。
步骤二：使用 jQuery 选择器获取值
一旦元素拥有了唯一的、可预测的 ID 模式，我们就可以利用 jQuery 的 属性选择器 来批量选取这些元素。[id^=”prefix_”]选择器可以匹配所有 ID 以指定前缀开头的元素。
$(document).ready(function() { // 遍历所有 ID 以 "eventDate_" 开头的输入框 $('input[id^="eventDate_"]').each(function() {// 获取当前输入框的 ID var elementId = $(this).attr('id'); // 获取当前输入框的值 var elementValue = $(this).val(); console.log("ID: " + elementId + ", Value: " + elementValue); // 可以在这里对获取到的值进行进一步处理，例如存储到数组或发送到服务器 // var index = parseInt(elementId.replace('eventDate_', '')); // 提取索引 // myDataArray[index] = elementValue; }); });上述代码片段首先使用 $(‘input[id^=”eventDate_”]’)选择器来选中所有 ID 以 ”eventDate_” 开头的 <input> 元素。然后，.each()方法遍历这些选中的元素，在每次迭代中，$(this)代表当前正在处理的输入框，我们可以通过 $(this).val()获取其值，并通过 $(this).attr(‘id’)获取其 ID。
注意事项与最佳实践
- ID 唯一性：确保生成的 ID 在整个 HTML 文档中是唯一的，这是 HTML 规范的要求，也是 jQuery 能正确选择元素的基础。
- 选择器效率 ：[id^=”prefix_”] 是一种高效的选择器，因为它直接作用于 ID 属性。尽量避免使用过于宽泛或复杂的选择器，以提高性能。
- 上下文选择：如果页面中有多个类似的循环，为避免冲突，可以考虑将 ID 前缀做得更具体，或者通过父元素限定选择范围。例如，如果所有这些输入框都在一个特定的表格内，可以先选中表格，再在其内部查找：$(‘#tblEvents input[id^=”eventDate_”]’).each(…)。
- 数据类型 ：$(this).val() 获取的值始终是 字符串类型 。如果需要处理数字或日期，请务必进行 类型转换。
- 事件绑定 ：如果这些动态生成的元素还需要绑定事件（如 change 事件），建议使用事件 委托 （$(document).on(‘change’, ‘input[id^=”eventDate_”]’, function(){…})），以确保即使是后续通过ajax 加载的元素也能正确响应事件。
总结
通过在 @Html.EditorFor 等 HTML 辅助方法中巧妙地结合循环索引来生成唯一的 ID，我们可以为动态生成的表单元素提供清晰的标识。结合 jQuery 强大的 属性选择器 和遍历功能，可以轻松地批量获取这些元素的值，从而实现复杂的客户端数据处理逻辑。这种方法不仅提高了代码的可维护性和健壮性，也确保了在动态 UI 场景下数据采集的准确性。
