Written By:- Isha Malhotra
In asp.net sometimes we need to create control at run time instead of compile time. In this article I am discussing how to create control at runtime.
Remember your first program in asp.net where you create sum of two numbers. At that time you create control at the compile time and show output on button click.
Same example I am taking here but I am creating control at runtime.
Take one panel at your design page so that you can add controls at runtime. Now check the following code:-
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<asp:Panel ID="Panel1" runat="server">
</asp:Panel>
</form>
</body>
</html>
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
//declare the object of table, Table row and Table Cell.
Table TechAltum_Table = new Table();
TableRow TechAltum_Row;
TableCell TechAltum_Cell;
//now create your first row
TechAltum_Row = new TableRow();
//now create your first cell
TechAltum_Cell = new TableCell();
//Now add message in the cell
TechAltum_Cell.Text = "Enter First Number";
//now add this cell in the row
TechAltum_Row.Cells.Add(TechAltum_Cell);
//now create second cell where we add one textbox
TechAltum_Cell = new TableCell();
//now create the textbox
TextBox txt_Fnum = new TextBox();
txt_Fnum.ID = "fnum";
//add this textbox in the cell
TechAltum_Cell.Controls.Add(txt_Fnum);
//add this cell in the row
TechAltum_Row.Cells.Add(TechAltum_Cell);
//now add this row in the table
TechAltum_Table.Rows.Add(TechAltum_Row);
//and now add this table in the panel
Panel1.Controls.Add(TechAltum_Table);
}
}
When we execute the code it will show the following output:-
Figure 1
It is showing one row as I added only one row. Let's complete this code and again execute it:-
I customize the height and width and Title of the window
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class _Default : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgse)
{
//declare the object of table, Table row and Table Cell.
Table TechAltum_Table = new Table();
TableRow TechAltum_Row;
TableCell TechAltum_Cell;
//now create your first row
TechAltum_Row = new TableRow();
//now create your first cell
TechAltum_Cell = new TableCell();
//Now add message in the cell
TechAltum_Cell.Text = "Enter First Number";
//now add this cell in the row
TechAltum_Row.Cells.Add(TechAltum_Cell);
//now create second cell where we add one textbox
TechAltum_Cell = new TableCell();
//now create the textbox
TextBox txt_Fnum = new TextBox();
txt_Fnum.ID = "fnum";
//add this textbox in the cell
TechAltum_Cell.Controls.Add(txt_Fnum);
//add this cell in the row
TechAltum_Row.Cells.Add(TechAltum_Cell);
//now add this row in the table
TechAltum_Table.Rows.Add(TechAltum_Row);
//smilarly create another row and add in the table
//Create Second Row
TechAltum_Row = new TableRow();
TechAltum_Cell = new TableCell();
TechAltum_Cell.Text = "Enter second Value";
TechAltum_Row.Cells.Add(TechAltum_Cell);
TechAltum_Cell = new TableCell();
TextBox txt_SecNum = new TextBox();
txt_SecNum.ID = "Snum";
TechAltum_Cell.Controls.Add(txt_SecNum);
TechAltum_Row.Cells.Add(TechAltum_Cell);
TechAltum_Table.Rows.Add(TechAltum_Row);
//Create Third Row
TechAltum_Row = new TableRow();
TechAltum_Cell = new TableCell();
Button btn_Sub = new Button();
btn_Sub.ID = "bSum";
btn_Sub.Text = "Sum";
TechAltum_Cell.Controls.Add(btn_Sub);
TechAltum_Row.Cells.Add(TechAltum_Cell);
TechAltum_Table.Rows.Add(TechAltum_Row);
//and now add this table in the panel
Panel1.Controls.Add(TechAltum_Table);
}
}
Now execute this code and its output as follows:-
Figure 2