Runtime Controls in Asp.net

Introduction

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.

For Example

Take one panel at your design page so that you can add controls at runtime. Now check the following code:-

Code of Default.aspx

 
	<%@ 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>

Code of Default.aspx.cs

 
		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:-

Complete Code

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