动态添加额外的输入字段（类似于 SO 职业）答案

【问题标题】：Adding additional input fields dynamically (similar to SO careers)动态添加额外的输入字段（类似于 SO 职业）
【发布时间】：2011-01-19 02:57:26
【问题描述】：

类似于http://careers.stackoverflow.com/cv/edit 中的“添加更多体验”功能，我想提供一个“添加另一个位置”链接，该链接应显示一组 4 个下拉菜单（国家、州、城市、地区）的附加行。我实际上正在使用用于 ASP.NET MVC 的 CascadingDropDown jQuery 插件（http://weblogs.asp.net/rajbk/archive/2010/05/20/cascadingdropdown-jquery-plugin-for-asp-net-mvc.aspx ) 用于我的位置下拉功能，但我需要让用户能够添加多个位置。在 ASP.NET MVC 和 jQuery 中处理这个问题的最简单方法是什么？

【问题讨论】：

标签： c# .net asp.net jquery asp.net-mvc

【解决方案1】：

我最终使用了这个：http://charlie.griefer.com/blog/index.cfm/2009/9/17/jQuery--Dynamically-Adding-Form-Elements

【讨论】：

【解决方案2】：

当我做这些事情时，我通常会在一个循环中渲染 PartialView（带有参数来区分它们）。

【讨论】：

【解决方案3】：

我保留了一个隐藏的文本区域，其中包含我要添加的元素的 HTML，例如：

<textarea style="display:none" id="template">
   <select id="{0}_state" name="{0}_state"><options....></select> 
   <select id="{0}_city" name="{0}_city"><options....></select>
</textarea>

然后在您想将这些元素添加到表单的事件中，使用 jQuery 我会执行以下操作：

var global_number_added = 0;
var template = jQuery.format($("#template").val());
var add_this = template(global_number_added++); //something unique
add_this.appendTo("selector_to_append_the_elements_to");

将它与您正在使用的插件挂钩是您必须查找的内容，但您可能需要绑定一些事件来设置级联下拉列表。

希望对您有所帮助。

【讨论】：

【解决方案4】：

有很多方法可以做到这一点，但在所有 asp.net 中一个非常简单的方法是：

将每个“附加行”的表单放入 UserControl
将该部分放入更新面板中
“添加另一个位置”会导致异步回发到更新面板
当他们单击“添加另一个”时，使用 Page.LoadControl(..) 动态添加 UserControl 的实例。
跟踪 ViewState 中的位置数量，以便了解每次更新时要渲染多少。

您也可以使用 jQuery 在他们单击“添加另一个”时复制输入表单，但是很难与 asp.net 同步以进行回发，尽管并非不可能，或者您可以只看一下Request.Form 来处理它。

【讨论】：

mvc 中的 Webforms 控件？它可能会起作用，但这并不是一个好主意。
哦，我的错。我在阅读问题时忘记关闭 MVC 过滤器。