In this article I will explain how to add controls dynamically. In some
scenarios there might come requirement to add controls programmatically.
Suppose there is a Panel control in a webpage and on Button click we have to
add a TextBox dynamically to it, the code is as follows :
PlaceHolder control provides a container for adding controls at any part of
the webpage. PlaceHolder has no HTML output of its own but it renders its
child elements.
Let me show a basic example by which a TextBox is added dynamically
to a PlaceHolder on a Button click.
scenarios there might come requirement to add controls programmatically.
Suppose there is a Panel control in a webpage and on Button click we have to
add a TextBox dynamically to it, the code is as follows :
C# Code :
protected void
Button1_Click(object sender, EventArgs e)
{
TextBox
txt = new TextBox();
txt.ID = "TextBox1";
txt.Text = "abc";
Panel1.Controls.Add(txt);
}
PlaceHolder control provides a container for adding controls at any part of
the webpage. PlaceHolder has no HTML output of its own but it renders its
child elements.
Let me show a basic example by which a TextBox is added dynamically
to a PlaceHolder on a Button click.
HTML Code (.aspx) :
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
<asp:Button ID="Button1" runat="server" onclick="Button1_Click"
Text="Submit" />
</div>
</form>
</body>
</html>
C# Code (.aspx.cs) :
protected void
Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object
sender, EventArgs e)
{
TextBox
txt = new TextBox();
txt.ID = "TextBox1";
txt.Text = "hello";
PlaceHolder1.Controls.Add(txt);
}
This will add TextBox to the PlaceHolder on clicking the Button.
The above one is a basic case but if we want to display or access the added
control even on PostBack we cannot use this method as dynamic Controls
will not be rendered on PostBack unless it is recreated in Page load function.
Because dynamically added controls are not stored in the ViewState as they
are created late after the Page's ViewState is generated.
Page's life cycle in short is as following :
(1) Instantiation
(2) Initialization
(3) Load ViewState
(4) Page Load
(5) Save ViewState
To overcome this it is best to create dynamic controls in Page_Init function.
C# Code (.aspx.cs) :
protected void Page_Init(object
sender, EventArgs e)
{
TextBox
txt = new TextBox();
txt.ID = "TextBox1";
txt.Text = "hello";
PlaceHolder1.Controls.Add(txt);
}
protected void
Page_Load(object sender, EventArgs e)
{
}
protected void Button1_Click(object
sender, EventArgs e)
{
TextBox
txt = (TextBox)PlaceHolder1.FindControl("TextBox1");
txt.Text = "From
Button1";
}
protected void Button2_Click(object
sender, EventArgs e)
{
TextBox
txt = (TextBox)PlaceHolder1.FindControl("TextBox1");
txt.Text = "From
Button2";
}
Next I will show an example of adding EventHandlers to the dynamically
created Control.
Suppose there is a PlaceHolder to which a TextBox and a Button are added
dynamically and EventHandler of Button click is also added dynamically.
On clicking that Button it will change the text of that TextBox.
The sample code is as follows:
protected void Page_Init(object
sender, EventArgs e)
{
TextBox
txt = new TextBox();
txt.ID = "TextBox1";
txt.Text = "hello";
PlaceHolder1.Controls.Add(txt);
Button
btnSubmit = new Button();
btnSubmit.ID = "btnSubmit";
btnSubmit.Text = "Submit";
btnSubmit.Click += new EventHandler(btnSubmit_Click);
PlaceHolder1.Controls.Add(btnSubmit);
}
protected void Page_Load(object
sender, EventArgs e)
{
}
protected void
btnSubmit_Click(object sender, EventArgs e)
{
TextBox
txt = (TextBox)PlaceHolder1.FindControl("TextBox1");
txt.Text="hi";
}
No comments:
Post a Comment