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

本教程详细阐述了如何在asp.net mvc中使用`@html.editorfor`在循环中动态生成表单元素时，通过jquery高效准确地获取这些元素的值。核心策略是为每个动态生成的元素赋予唯一的id，然后利用jquery的选择器和遍历方法来定位并提取所需数据，确保在复杂ui场景下数据的正确采集。

动态生成表单元素的挑战

在ASP.NET MVC应用中，当我们需要根据模型数据列表动态渲染多个输入字段时，通常会结合C#的for或foreach循环与@Html.EditorFor等HTML辅助方法。例如，在一个表格中显示多个事件及其日期，每个事件日期对应一个EditorFor输入框。

        @for(int i=0;i
                
        }
    

    

        

            
Event Name
            
Event Date
        
    
    

                    @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" })
                
                

                    @Html.EditorFor(model => model.ModelEvents[i].EVENTDATE, new { @class = "text  form-control eventdate" })
                
            

在这种情况下，由于@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
        
            @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" })
        
        
            @Html.EditorFor(model => model.ModelEvents[i].EVENTDATE, new { @class = "text form-control eventdate", id = "eventDate_" + i })
        
    
}

通过上述修改，生成的HTML中每个日期输入框将拥有如id="eventDate_0"、id="eventDate_1"等唯一ID。

Magic Write

Canva旗下AI文案生成器

下载

步骤二：使用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_"开头的元素。然后，.each()方法遍历这些选中的元素，在每次迭代中，$(this)代表当前正在处理的输入框，我们可以通过$(this).val()获取其值，并通过$(this).attr('id')获取其ID。

注意事项与最佳实践

1. ID唯一性：确保生成的ID在整个HTML文档中是唯一的，这是HTML规范的要求，也是jQuery能正确选择元素的基础。
2. 选择器效率：[id^="prefix_"]是一种高效的选择器，因为它直接作用于ID属性。尽量避免使用过于宽泛或复杂的选择器，以提高性能。
3. 上下文选择：如果页面中有多个类似的循环，为避免冲突，可以考虑将ID前缀做得更具体，或者通过父元素限定选择范围。例如，如果所有这些输入框都在一个特定的表格内，可以先选中表格，再在其内部查找：$('#tblEvents input[id^="eventDate_"]').each(...)。
4. 数据类型：$(this).val()获取的值始终是字符串类型。如果需要处理数字或日期，请务必进行类型转换。
5. 事件绑定：如果这些动态生成的元素还需要绑定事件（如change事件），建议使用事件委托（$(document).on('change', 'input[id^="eventDate_"]', function(){...})），以确保即使是后续通过AJAX加载的元素也能正确响应事件。

总结

通过在@Html.EditorFor等HTML辅助方法中巧妙地结合循环索引来生成唯一的ID，我们可以为动态生成的表单元素提供清晰的标识。结合jQuery强大的属性选择器和遍历功能，可以轻松地批量获取这些元素的值，从而实现复杂的客户端数据处理逻辑。这种方法不仅提高了代码的可维护性和健壮性，也确保了在动态UI场景下数据采集的准确性。