Question

与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中处理这个问题最简单的方法是什么？

Answer 1

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

Answer 2

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

Answer 3

我保留了一个隐藏的textarea，其中包含我正在添加的元素的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");

使用您正在使用的插件来连接它是您需要查找的内容，但您可能需要配置一些事件来设置级联下拉列表。

希望有所帮助。

中号

Answer 4

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

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

你也可以使用jQuery在点击“添加另一个”时复制输入表单，但是很难与asp.net同步回发，虽然不是不可能，或者你可以看看Request.Form来处理它。

动态添加其他输入字段（类似于SO职业）

4 个答案: