How to automatically add textbox

Question

I have these 8 textboxes, but when I start to think that it were very messy on my page. So, I am thinking that how to implement a button which can add textbox when user click on it. Does anyone here have an idea or solution to assist me? I would appreciate that. Thank you.

Answer 1

Probably the best way to do this is to place both your text boxes in a user control. This user control can then encapsulate all of the logic belonging to both the text boxes; it can calculate the difference between the two values, for example, encapsulate all of the validation for both etc etc. You only need to write this bit once!

Add a placeholder to your page; give it an id of "DynamicControlHolder" or similar. You'll also want a hidden field - DynamicControlCount - you can use this to store the number of dynamic control's you've added.

The two most important concepts are:

• Add the dynamic controls at the right time
• Try and maintain the id's between postback so ASP.Net automatically populates the values from the ViewState for you. Otherwise, you'll have to manage this yourself.

So, when the page loads for the first time, you can do something like the following in Page_Init, for example:

{
  MyUserControl control = Page.LoadControl("~/path_to_my_usercontrol");
  control.ID = "MyUserControl1";
  DynamicControlCount.Value = "1";

  DynamicControlHolder.Controls.Add(control);
}

If you then have a button on your page, "Add Control", then, in the click handler:

{
  int controlCount = Convert.ToInt32(DynamicControlCount.Value);
  controlCount++;

  //This section will add as many controls as i.
  for(i = 1; i <= controlCount; i++)
  {
      MyUserControl control = Page.LoadControl("~/path_to_my_usercontrol");
      control.ID = String.Format("MyUserControl{0}", i);          
      DynamicControlHolder.Controls.Add(control);           
  }

  DynamicControlCount.Value = Convert.ToString(controlCount); //Note this is problematic
}

The easiest way to control the second part is to use an UpdatePanel. The main reason for this is that when you update the count of controls you have, you are doing this late in the lifecycle of the page, and, in a full postback, the value may not increment in the way you expect on postback. It also looks better for the user if the whole page isn't posted back just to revise a small section of it.

These are just a few ideas to get you started. A good reference for this kind of thing is here:

Truly Understanding Dynamic Controls

You should do some reading around this because the combination of viewstate, page lifecycle, client side rendering and other factors make this one of the trickiest, but most interesting techniques in ASP.Net

Answer 2

If you consider using jquery, things could be very simple:

<div id="text_box_container"> </div>

<input type="button" value="text box inserter" id="text_box_inserter" />

now the javascript/jquery part

$('#text_box_inserter').click(function(){
    $('#text_box_container').append('<input type="text" />');
})

Answer 3

This will create a Textbox and add it to the div with id="divFirstName". The div should have runat="server"

TextBox tbFirstName = new TextBox();
tbFirstName.ID = "tbFirstName";
tbFirstName.Attributes.Add("Name", "tbFirstName");

divFirstName.Controls.Add(tbFirstName);

Then just place the code in your click event. (I know my naming sucks, it's purely to give a better understanding).