本文详细介绍了如何在asp.net mvc视图中，当使用`@html.editorfor`在循环中动态生成多个输入框时，通过jquery高效地获取这些输入框的值。核心策略是为每个动态生成的控件分配一个包含循环索引的唯一id，然后利用jquery的选择器（如属性选择器`[id^=”prefix_”]`）来批量选中并提取所有相关输入框的数据，确保客户端脚本能够准确无误地操作这些元素。
在ASP.NET MVC应用程序开发中，我们经常需要在视图层通过循环动态生成一系列表单元素，例如使用@Html.EditorFor来为模型集合中的每个项创建编辑字段。当这些元素被渲染到客户端后，如何使用JavaScript（特别是jQuery）准确地获取它们的当前值，是前端交互逻辑中的一个常见需求。直接选择这些动态生成的元素可能会遇到挑战，因为它们可能没有唯一的标识符。
挑战与解决方案概述
当@Html.EditorFor在for循环中被调用时，它会为每个迭代生成一个HTML 元素。默认情况下，ASP.NET MVC会根据模型的属性路径生成name属性，但id属性可能不会像我们期望的那样独一无二，或者不容易直接通过ID选择器定位。
解决此问题的关键在于：
为每个动态生成的控件分配一个唯一的ID。 这可以通过在@Html.EditorFor辅助方法中传入一个包含循环索引的匿名对象来实现。利用jQuery的属性选择器 来高效地选中所有具有特定前缀ID的输入框，并遍历它们以获取各自的值。
步骤一：在Razor视图中为EditorFor控件分配唯一ID
为了确保每个@Html.EditorFor生成的输入框都拥有一个独一无二的ID，我们可以在辅助方法的HTML属性参数中，动态地构建id属性。通常，我们会将循环变量（如i）作为ID的一部分。
考虑以下原始的Razor视图代码片段：
| 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" }) |
为了让EVENTDATE对应的EditorFor拥有唯一ID，我们需要修改其第二个参数，添加id属性：
| 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" }) | @* 添加 id 属性，结合循环变量 i 确保唯一性 *@ @Html.EditorFor(model => model.ModelEvents[i].EVENTDATE, new { @class = "text form-control eventdate", id = "eventDate_" + i }) |
通过id = “eventDate_” + i，生成的HTML输入框将拥有如eventDate_0、eventDate_1、eventDate_2等唯一的ID。
步骤二：使用jQuery获取所有EditorFor的值
一旦每个输入框都拥有了唯一的、带有特定前缀的ID，我们就可以利用jQuery的属性选择器来轻松地选中它们。[id^=”prefix_”]选择器能够匹配所有ID以prefix_开头的元素。
以下是使用jQuery获取所有EVENTDATE输入框值的代码示例：
$(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); // 在此处可以对获取到的值进行进一步处理，例如： // - 存储到数组中 // - 发送AJAX请求 // - 更新其他页面元素 });});
这段代码首先等待DOM完全加载。然后，它使用$(‘input[id^=”eventDate_”]’)选择器找到所有ID以eventDate_开头的元素。接着，.each()函数会遍历这些被选中的元素，在每次迭代中，$(this)代表当前的输入框元素，我们可以通过$(this).val()获取其值，并通过$(this).attr(‘id’)获取其ID。
注意事项与最佳实践
ID前缀的唯一性： 确保你选择的ID前缀（例如eventDate_）在整个页面中是独一无二的，以避免与其他元素冲突。选择器效率： 属性选择器[id^=”prefix_”]是一个非常高效的jQuery选择器，因为它直接利用了DOM元素的ID特性。类型检查： 在实际应用中，你可能需要根据输入框的类型（text、number、date等）来处理其值。EditorFor通常生成type=”text”的输入框，即使是日期类型也可能以字符串形式存储。事件监听： 如果你需要在用户修改某个EditorFor的值时立即响应，可以为这些元素绑定事件监听器（例如change或input事件），同样可以使用属性选择器来批量绑定。表单提交： 在表单提交的场景下，这些输入框的值会自动包含在表单数据中。此方法主要用于客户端的即时数据操作或验证。代码组织： 将jQuery代码放在一个单独的JavaScript文件中，并在视图中引用，有助于保持代码的整洁和可维护性。
总结
通过为ASP.NET MVC循环生成的@Html.EditorFor控件分配唯一的、带有前缀的ID，并结合jQuery的属性选择器，我们可以轻松、高效地在客户端获取这些动态生成元素的值。这种方法不仅解决了动态元素选择的难题，也为后续的客户端数据处理和交互逻辑奠定了坚实的基础，是前端开发中处理此类场景的推荐实践。
以上就是ASP.NET MVC中循环生成EditorFor控件的jQuery值获取技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1593022.html
微信扫一扫 
支付宝扫一扫 
