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,

<div>
<div>
<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/plus.png" CssClass="wdth" OnClick="ImageButton1_Click" />
</div>
<div>
<asp:PlaceHolder ID="PlaceHolder1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
</asp:PlaceHolder>
</div>
</div>

Now in the code behind add the following code,

TextBox tb;
ImageButton ImgBtn;
static int i = 0;
protected void Page_Load(object sender, EventArgs e) {
if (!IsPostBack) {
i = 0; // For setting all added controls to zero on page load
}
}
protected void CreateControls(int L) {
tb = new TextBox();
tb.ID = "TxtDynamic" + L.ToString();
ImgBtn = new ImageButton();
ImgBtn.ID = "ImgBtn" + L.ToString();
ImgBtn.ImageUrl = "~/Images/minus.png";
ImgBtn.CssClass = "wdth";
ImgBtn.Click += ImgBtn_Click;
PlaceHolder1.Controls.Add(tb);
PlaceHolder1.Controls.Add(new LiteralControl(" "));
PlaceHolder1.Controls.Add(ImgBtn);
PlaceHolder1.Controls.Add(new LiteralControl("<br />"));
}
protected void ImageButton1_Click(object sender, ImageClickEventArgs e) {
for (int j = 0; j <= i; j++) {
CreateControls(j);
}
i++;
}
private void ImgBtn_Click(object sender, ImageClickEventArgs e) {
ImageButton MyImgBtn = (sender as ImageButton);
MessageBox(MyImgBtn.ID.ToString());
char last = MyImgBtn.ID.ToString()[MyImgBtn.ID.ToString().Length - 1];
string txtbxid = "TxtDynamic" + last;
MessageBox(txtbxid);
TextBox ctlTextbox = (TextBox) PlaceHolder1.FindControl(txtbxid);
MessageBox(ctlTextbox.Text);
PlaceHolder1.Controls.Remove(ctlTextbox);
PlaceHolder1.Controls.Remove(MyImgBtn);
i--;
}
private void MessageBox(string msg) {
Label lbl = new Label();
lbl.Text = "<script language='javascript'>" + Environment.NewLine + "window.alert('" + msg + "')</script>";
Page.Controls.Add(lbl);
}
//-----for recreating textboxes after post back-----------------------------
protected void Page_PreInit(object sender, EventArgs e) {
List < string > keys = Request.Form.AllKeys.Where(key => key.Contains("TxtDynamic")).ToList();
int k = 1;
foreach(string key in keys) {
this.CreateControls(k);
k++;
}
}
//--------- 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.