动态生成EditorFor输入框值的高效jQuery获取策略

本教程详细阐述了如何在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：

AI封面生成器

专业的AI封面生成工具，支持小红书、公众号、小说、红包、视频封面等多种类型，一键生成高质量封面图片。

108

查看详情

<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()：获取当前输入框的当前值。

四、注意事项与最佳实践

1. ID前缀的唯一性： 确保你选择的ID前缀（例如"eventDate_"）在整个页面中是唯一的，以避免与其他元素发生冲突。
2. 选择器的灵活性：
   • [id^="prefix_"] (starts with)：适用于ID前缀固定的情况。
   • [id$="_suffix"] (ends with)：适用于ID后缀固定的情况。
   • [id*="substring"] (contains)：适用于ID中包含特定子字符串的情况。
   • 如果需要更精确的匹配，可以结合其他选择器，例如通过父元素限制范围：$('#tblEvents input[id^="eventDate_"]').each(...)。
3. 替代方案：使用Class选择器： 虽然ID选择器通常更高效且直接，但也可以使用类选择器。在EditorFor中，我们已经添加了@class = "text form-control eventdate"。因此，也可以这样获取值：

   $('.eventdate').each(function() {
       console.log($(this).val());
   });

   登录后复制

   然而，如果页面中其他不相关的元素也使用了相同的类名，这种方法可能会选择到不期望的元素。对于需要精确针对一组动态生成且功能相似的输入框，结合ID前缀的选择器通常是更稳健的选择。

4. 数据收集： 在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_"]，可以轻松地批量选取这些元素并迭代获取它们的值。这种方法不仅提高了代码的健壮性和可维护性，也为处理复杂的动态表单数据提供了清晰高效的途径。

以上就是动态生成EditorFor输入框值的高效jQuery获取策略的详细内容，更多请关注php中文网其它相关文章！