Dynamically Repeating Form Elements

问题:

I building an online CV application that allows the user to add new education sections that consist of a number of text boxes and labels.

What is the best way of dynamically creating the form elements and reading them depending on whether the user hits an [Add another] button.

回答1:

1) server side :In your asp.net button click event , Create the required controls (text box, drop down etc..) dynamically and add that to a conainer like a Panel.

2)Client Side : Using javascript create elements and append to an existing container (div). In this approach, you save a server round trip because you are doing it in the client side.

Here is a javascript sample using jquery which will give you an idea.

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' />");              
 });

Here is the working sample : http://jsfiddle.net/huYMT/13/

回答2:

I don't know the best way unfortunately but I can tell you what I did in web forms when I used to use them.

I made a PlaceHolder where I could dump in controls on the fly type of thing. I made a UserControl that could be repeated again and again that had public properties. I wrapped an UpdatePanel around the PlaceHolder and attached a click event tied to the UpdatePanel so the user would have the AJAX experience.

Here is kind of a quick summarized version of the code. I can give you the full source if you want. Let me know.

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

I prefer to create a user control for education section.

And if you hit the add button, The click event of button could dynamic add a new user

control in UI.