动态重复表单元素答案

【问题标题】：Dynamically Repeating Form Elements动态重复表单元素
【发布时间】：2011-12-30 00:48:08
【问题描述】：

我构建了一个在线 CV 应用程序，允许用户添加由许多文本框和标签组成的新教育部分。

根据用户是否点击 [添加另一个] 按钮，动态创建表单元素并读取它们的最佳方式是什么。

【问题讨论】：

这是 MVC 还是 Web 表单还是矩阵样式？
抱歉我放错标签了（winforms被删掉了），是web forms

标签： c# asp.net webforms

【解决方案1】：

1) 服务器端：在您的 asp.net 按钮单击事件中，动态创建所需的控件（文本框、下拉菜单等）并将其添加到面板之类的容器中。

2) 客户端：使用 javascript 创建元素并附加到现有容器 (div)。在这种方法中，您可以节省服务器往返行程，因为您是在客户端进行的。

这是一个使用 jquery 的 javascript 示例，它会给你一个想法。

HTML

<div id="divContainer">    
   Education 1 <input id="txt1" type="text" class="txtBox"/>
</div>
<input id="btn1" type="button" value="Add Another" />

Javascript

var counter=1;
$("#btn1").click(function(){
    counter++;    
    $("#divContainer").append("<br/> Education "+counter + " <input type='text' id='txt"+counter+"' class='txtBox' />");              
 });

这是工作示例：http://jsfiddle.net/huYMT/13/

【讨论】：

谢谢，这与我需要做的非常相似。出于好奇，您将如何将 jQuery 数据传回服务器？
您可以将 jquery ajax 发布到服务器页面。

【解决方案2】：

很遗憾，我不知道最好的方法，但我可以告诉你我在使用 Web 表单时做了什么。

我制作了一个 PlaceHolder，我可以在其中转储动态控件类型的东西。我制作了一个可以一次又一次重复的具有公共属性的 UserControl。我在 PlaceHolder 周围包裹了一个 UpdatePanel，并附加了一个与 UpdatePanel 相关联的点击事件，以便用户获得 AJAX 体验。

这是代码的快速总结版本。如果你愿意，我可以给你完整的来源。告诉我。

<script runat="server">
  void aspx_Init(object sender, EventArgs e)
  {
    AddCreditCardReceiptButton.Click += new EventHandler(AddCreditCardReceiptButton_Click);
  }
  void AddCreditCardReceipt()
  {
    AddCreditCardReceipt(this.ID + "_" + Guid.NewGuid().ToString("N").Substring(0, 5));
  }
  void AddCreditCardReceiptButton_Click(object sender, EventArgs e)
  {
    AddCreditCardReceipt();
    CreditCardReceipt lastAdded = (CreditCardReceipt)CreditCardReceiptPH.Controls[CreditCardReceiptPH.Controls.Count - 1];
    lastAdded.ContainerStyle = "display:none";
    ScriptManager.RegisterStartupScript(lastAdded, typeof(CreditCardReceipt), lastAdded.ClientID,
        "$('#CreditCardReceipt_" + lastAdded.ClientID + "').toggle(500);", true);
  }
</script>
<asp:UpdatePanel runat="server" id="CreditCardReceiptUpdatePanel" UpdateMode="Conditional" ChildrenAsTriggers="true">
<ContentTemplate>
    <asp:PlaceHolder ID="CreditCardReceiptPH" runat="server" /> 
     <asp:Button runat="server" ID="AddCreditCardReceiptButton" CausesValidation="false" Text="(+) Add Credit Card Receipt" /></div>
</ContentTemplate>

【讨论】：

【解决方案3】：

我更喜欢为教育部分创建用户控件。

如果你点击添加按钮，按钮的点击事件可以动态添加一个新用户

UI 中的控件。

【讨论】：

我在想类似的事情