动态重复表单元素

本文关键字：元素 表单 动态 | 更新日期: 2023-09-27 18:19:07

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

根据用户是否点击[Add another]按钮，动态创建表单元素并读取它们的最佳方法是什么

动态重复表单元素

1)服务器端:在您的asp.net按钮点击事件中，动态创建所需的控件(文本框，下拉框等)，并将其添加到面板等容器中。

2)客户端:使用javascript创建元素并添加到现有的容器(div)。在这种方法中，您节省了一次服务器往返，因为您是在客户端执行此操作。

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

<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/

我不知道最好的方法，但我可以告诉你当我使用web表单时我是怎么做的。

我做了一个占位符，我可以在苍蝇类型的东西上转储控件。我做了一个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>

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

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

相关文章：