Post
Ask Question

Dynamically Add And Remove TextBoxes And Buttons To Web Form On Click Of Button

I have created this article for Visual Studio 2012. Let’s begin. First, create a new Empty WebSite. Add a web form to the application.

Now add the following code in the aspx page,

  1. <div>  
  2.     <div>  
  3.         <asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/plus.png" CssClass="wdth" OnClick="ImageButton1_Click" />  
  4.     </div>  
  5.     <div>  
  6.         <asp:PlaceHolder ID="PlaceHolder1" runat="server">  
  7.             <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />  
  8.         </asp:PlaceHolder>  
  9.     </div>  
  10. </div>  

Now in the code behind add the following code,

  1. TextBox tb;  
  2. ImageButton ImgBtn;  
  3. static int i = 0;  
  4. protected void Page_Load(object sender, EventArgs e) {  
  5.     if (!IsPostBack) {  
  6.         i = 0; // For setting all added controls to zero on page load  
  7.     }  
  8. }  
  9. protected void CreateControls(int L) {  
  10.     tb = new TextBox();  
  11.     tb.ID = "TxtDynamic" + L.ToString();  
  12.     ImgBtn = new ImageButton();  
  13.     ImgBtn.ID = "ImgBtn" + L.ToString();  
  14.     ImgBtn.ImageUrl = "~/Images/minus.png";  
  15.     ImgBtn.CssClass = "wdth";  
  16.     ImgBtn.Click += ImgBtn_Click;  
  17.     PlaceHolder1.Controls.Add(tb);  
  18.     PlaceHolder1.Controls.Add(new LiteralControl("      "));  
  19.     PlaceHolder1.Controls.Add(ImgBtn);  
  20.     PlaceHolder1.Controls.Add(new LiteralControl("<br />"));  
  21. }  
  22. protected void ImageButton1_Click(object sender, ImageClickEventArgs e) {  
  23.     for (int j = 0; j <= i; j++) {  
  24.         CreateControls(j);  
  25.     }  
  26.     i++;  
  27. }  
  28. private void ImgBtn_Click(object sender, ImageClickEventArgs e) {  
  29.     ImageButton MyImgBtn = (sender as ImageButton);  
  30.     MessageBox(MyImgBtn.ID.ToString());  
  31.     char last = MyImgBtn.ID.ToString()[MyImgBtn.ID.ToString().Length - 1];  
  32.     string txtbxid = "TxtDynamic" + last;  
  33.     MessageBox(txtbxid);  
  34.     TextBox ctlTextbox = (TextBox) PlaceHolder1.FindControl(txtbxid);  
  35.     MessageBox(ctlTextbox.Text);  
  36.     PlaceHolder1.Controls.Remove(ctlTextbox);  
  37.     PlaceHolder1.Controls.Remove(MyImgBtn);  
  38.     i--;  
  39. }  
  40. private void MessageBox(string msg) {  
  41.     Label lbl = new Label();  
  42.     lbl.Text = "<script language='javascript'>" + Environment.NewLine + "window.alert('" + msg + "')</script>";  
  43.     Page.Controls.Add(lbl);  
  44. }  
  45. //-----for recreating textboxes after post back-----------------------------  
  46. protected void Page_PreInit(object sender, EventArgs e) {  
  47.     List < string > keys = Request.Form.AllKeys.Where(key => key.Contains("TxtDynamic")).ToList();  
  48.     int k = 1;  
  49.     foreach(string key in keys) {  
  50.         this.CreateControls(k);  
  51.         k++;  
  52.     }  
  53. }  
  54. //--------- for recreating textboxes after post back---------------------------  

Most of the code is self explanatory.

You can download the attached solution and work on it yourself. Thank you.