使用jQuery获取循环生成的ASP.NET MVC EditorFor值教程-html教程-PHP中文网

使用jQuery获取循环生成的ASP.NET MVC EditorFor值教程

碧海醫心

发布： 2025-11-07 13:05:11

原创

593人浏览过

使用jQuery获取循环生成的ASP.NET MVC EditorFor值教程

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

uBrand Logo生成器

uBrand Logo生成器是一款强大的AI智能LOGO设计工具。

查看详情

步骤二：使用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场景下数据采集的准确性。

以上就是使用jQuery获取循环生成的ASP.NET MVC EditorFor值教程的详细内容，更多请关注php中文网其它相关文章！