本教程详细阐述了如何在 asp.net mvc razor 视图中，针对 循环 生成的 `@html.editorfor` 输入框，通过赋予其唯一 id 并结合 jquery 选择器 来高效获取其值。核心方法是利用循环变量 `i` 为每个输入框创建独特的 id，然后使用 jquery 的属性选择器 `[id^=”prefix_”]` 批量选取这些动态生成的元素，并通过 `.each()` 方法迭代处理，从而避免了直接选择动态 id 的难题，确保了数据获取的准确性和灵活性。
在 ASP.net MVC 开发中，当我们在 Razor 视图中使用 @html.EditorFor 等 HTML 辅助方法在一个循环（如 @for 或 @foreach）中生成多个输入字段时，这些字段通常不会自动拥有唯一的 HTML id 属性。这给 前端javaScript（尤其是 jQuery）通过 ID 直接选择并获取这些动态生成元素的值带来了挑战。本文将详细介绍一种健壮且高效的方法，通过为每个 EditorFor 生成的输入框赋予唯一的 ID，并结合 jQuery 的选择器来批量获取它们的值。
一、理解问题：动态生成的html 元素
考虑以下 Razor 代码片段，它在一个表格行中为 Model.ModelEvents 集合中的每个 事件 生成一个日期编辑器：
<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(model => model.ModelEvents[i].EVENTDATE, …) 默认生成的 <input> 元素的 id 属性可能会是 ModelEvents_0__EVENTDATE、ModelEvents_1__EVENTDATE 等。虽然这些 ID 在某种程度上是唯一的，但直接依赖于 MVC 约定生成的 ID 可能不够灵活，或者在某些复杂场景下难以预测。更重要的是，我们可能需要一个更通用的方法来选取所有这些动态生成的日期输入框。
二、解决方案：赋予自定义唯一 ID
解决此问题的关键在于在生成 HTML 时，为每个 EditorFor 辅助方法生成的输入框显式地赋予一个自定义的、唯一的 id 属性。我们可以利用循环变量 i 来实现这一点。
2.1 修改 Razor 视图代码
通过在 htmlAttributes 参数中添加 id 属性，并结合循环变量 i 来构建唯一的 ID：
<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"> @* 为 EditorFor 生成的输入框添加唯一的 ID *@ @Html.EditorFor(model => model.ModelEvents[i].EVENTDATE, new {@class = "text form-control eventdate", id = "eventDate_" + i}) </td> </tr> } </tbody> </table>在上述代码中，我们为 @Html.EditorFor 添加了一个新的匿名 对象 参数，其中包含 id = “eventDate_” + i。这将确保每个生成的输入框都拥有一个类似 eventDate_0、eventDate_1、eventDate_2 等格式的唯一 ID。
三、使用 jQuery 获取值
一旦输入框拥有了唯一的、可预测的 ID 模式，我们就可以使用 jQuery 的属性选择器来批量选取它们并获取其值。
3.1 jQuery 代码示例
$(document).ready(function() { // 选取所有 ID 以 "eventDate_" 开头的输入框 $('input[id^="eventDate_"]').each(function() {var id = $(this).attr('id'); // 获取当前元素的完整 ID，例如 "eventDate_0" var value = $(this).val(); // 获取当前元素的值 console.log("Input ID: " + id + ", Value: " + value); // 你可以在这里对获取到的值进行进一步处理 // 例如，存储到一个数组或对象中 }); });3.2 代码解析
- $(document).ready(function() {…});：这是一个标准的 jQuery 模式，确保 dom 完全加载后再执行 javascript 代码。
- $(‘input[id^=”eventDate_”]’)：这是核心选择器。
- input：指定我们要选择的是 <input> 元素。
- [id^=”eventDate_”]：这是一个属性选择器，表示选择所有 id 属性值以 ”eventDate_” 开头的元素。这种方式非常适合选取由循环动态生成且遵循特定 ID 模式的元素。
- .each(function() {…});：jQuery 的 each()方法用于遍历匹配到的所有元素。在 回调函数 内部，$(this)引用当前正在迭代的 DOM 元素（被包装成 jQuery 对象）。
- $(this).attr(‘id’)：获取当前元素的完整 id 属性值。
- $(this).val()：获取当前输入框的当前值。
四、注意事项与最佳实践
- ID 前缀的唯一性： 确保你选择的 ID 前缀（例如 ”eventDate_”）在整个页面中是唯一的，以避免与其他元素发生冲突。
- 选择器的灵活性：
- 替代方案：使用 Class 选择器： 虽然 id 选择器 通常更高效且直接，但也可以使用类选择器。在 EditorFor 中，我们已经添加了 @class = “text form-control eventdate”。因此，也可以这样获取值：
$('.eventdate').each(function() {console.log($(this).val()); });然而，如果页面中其他不相关的元素也使用了相同的类名，这种方法可能会选择到不期望的元素。对于需要精确针对一组动态生成且功能相似的输入框，结合 ID 前缀的选择器通常是更稳健的选择。
- 数据收集： 在 each()循环内部，你可以将获取到的 ID 和值存储到 JavaScript 数组或对象中，以便后续提交到服务器或进行其他 前端 处理。例如：
var eventDates = []; $('input[id^="eventDate_"]').each(function() {var index = parseInt($(this).attr('id').split('_')[1]); // 从 ID 中提取索引 eventDates.push({id: $(this).attr('id'), value: $(this).val(), index: index}); }); console.log(eventDates);
五、总结
通过在 ASP.NET MVC Razor 视图中为循环生成的 @Html.EditorFor 输入框显式地赋予一个基于循环变量的唯一 ID，我们可以有效地解决动态元素选择的难题。随后，利用 jQuery 强大的属性选择器[id^=”prefix_”]，可以轻松地批量选取这些元素并迭代获取它们的值。这种方法不仅提高了代码的健壮性和可维护性，也为处理复杂的动态表单数据提供了清晰高效的途径。
