January 18, 2012 07:26 by
JervisThink of ASP.Net web page as a container control containing a set of controls that will render themselves in response to a page request. Here, I'll show you different approaches to add controls (a control can be HTML or server side or System.Web.UI.Control) to ASP.Net web page programmatically at runtime.
Let's quickly create ASP.Net web site and add a new Webform named 'dynamically-add-controls-to-aspnet-page.aspx', say. Set it as 'Start up page' and hit the run button. The page will render with five invisible controls i.e. form1, title and some LiteralControls etc and shows no content.
To add Controls after the </HTML> (at the page bottom): Paste the following code in code behind:
1 public partial class dynamically_add_controls_to_aspnet_page : System.Web.UI.Page
2 {
3 protected void Page_Load(object sender, EventArgs e)
4 {
5 Label dynamicControl = new Label();
6 dynamicControl.Text = "Server side label control";
7 Page.Controls.Add(dynamicControl);
8 }
9 }
To add Controls at some index in Controls collection: In the first approach the controls added would be stacked down in the rendering order and placed at page end. You can verify this by running the page and clicking the browser's 'View Source', check out the <span>dynamically added Server side label control</span> at the end. Now we'll see how to add controls dynamically at some place. Let's Paste the following code in code behind:
01 public partial class dynamically_add_controls_to_aspnet_page : System.Web.UI.Page
02 {
03 protected void Page_Load(object sender, EventArgs e)
04 {
05 Label dynamicControl = new Label();
06 dynamicControl.Text = "dynamically added Server side label control";
07 // it will dynamically add control right after <body> but before <form>: Check the browser's View Source code
08 Page.Controls.AddAt(3, dynamicControl);
09 }
10 }
Dynamically adding Controls asp:PlaceHolder control: Drag asp:PlaceHolder control from toolbox onto the webform. For reference see the following markup code:
01 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="dynamically-add-controls-to-aspnet-page.aspx.cs" Inherits="dynamically_add_controls_to_aspnet_page" %>
02
03 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
04 <html xmlns="http://www.w3.org/1999/xhtml">
05 <head id="Head1" runat="server">
06 <title>dynamically add controls to asp.net page</title>
07 </head>
08 <body>
09 <form id="form1" runat="server">
10 <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
11 </form>
12 </body>
13 </html>
1 public partial class dynamically_add_controls_to_aspnet_page : System.Web.UI.Page
2 {
3 protected void Page_Load(object sender, EventArgs e)
4 {
5 Label dynamicControl = new Label();
6 dynamicControl.Text = "dynamically added Server side label control";
7 PlaceHolder1.Controls.Add(dynamicControl);
8 }
9 }
Note that we've added PlaceHolder1 inside the form1 control and in the code behind we're adding dynamicControl to it. Ultimately the set of control(s), that we might added to this PlaceHolder1, will get placed in place of PlaceHolder1. Verify via browser's View Source code.
Dynamically adding asp:Button Control to HTML DIV: Here we'll see how to add a button control to HTML DIV tag at runtime. For this add a DIV inside form tag named 'divHtmlControl' ,say and assign it runat="server" attribute. Paste in the following code in code behind:
01 protected void Page_Load(object sender, EventArgs e)
02 {
03 Button dynamicButtonControl = new Button();
04 dynamicButtonControl.Text = "dynamically adding asp:Button control to HTML DIV";
05 dynamicButtonControl.Click += new EventHandler(dynamicButtonControl_Click);
06
07 divHtmlControl.Controls.Add(dynamicButtonControl);
08 }
09
10 protected void dynamicButtonControl_Click(object sender, EventArgs e)
11 {
12 Button button = sender as Button;
13 button.Text = "Click event fired";
14
11999865-6571-43a6-86a9-4c55fc024df4|0|.0