Microsoft.NET

……………………………………………….Expertise in .NET Technologies

Create a Table Dynamically in ASP.NET 2.0 and ASP.NET 3.5

Posted by Ravi Varma Thumati on October 26, 2009

In this article, we will see how to create a table dynamically in asp.net. We will accept the number of rows and columns in the table from the user. We will then use the Page_Load() event to create the table dynamically and to save the state of the table on each postback.

Whenever a control is added to the page dynamically, it is not persisted by default. That is because these ‘dynamically’ added controls are not automatically added to the page view state. Remember that for a dynamic control, the viewstate is available only after the post back occurs.

To elaborate on the above statement, the page is recreated each time it is posted back to the server. In other words, a new instance of the Page class is created and the class variables are set using the values from the ViewState. However during this recreation, the dynamically created controls are no longer available and hence the values are lost in the viewstate.

To override this behavior, you need to somehow make these controls available on each postback. One way of doing so, is to override the LoadViewState() method of the page. In the LoadViewState(), the view state data that had been saved from the previous page visit is loaded and recursively populated into the control hierarchy of the Page.

Why the LoadViewState()?

When the controls are added to page, it is done quiet early in the page event cycle. Hence the LoadViewState() gives you an ideal placeholder to recreate the controls. Since the LoadViewState() method is called before the Page_Load() event, re-adding controls in this method assures that the controls can be access and manipulated by the time any event occurs on them.

Why have you chosen to create and recreate the controls on Page_Load() instead of Page_Init()?

You can create dynamic controls in either the Page_Init() or Page_Load().

However as already explained in the introduction, we would be accepting the rows and columns from the user to create the table. Since these values would be available only after the user has entered the values in the two textboxes and clicked the button to cause a postback, the best suitable place is the Page_Load().

The second reason of choosing Page_Load() over Page_Init() is that in this example, we will be setting a flag on the ViewState to determine if the dynamic table has to be recreated or not. ViewState values are available during the Page_Load() and ‘not’ during the Page_Init() event.

Let us see some code now.

Step 1: Create a new ASP.NET application. Add two textboxes (txtRows and txtCols) and a button (btnGenerate) control to the page. The two textboxes will accept the number of Rows and Columns from the user. Based on the input in the textboxes, the table will be created dynamically on the button click. Also add a container element (to position the table) and a button (btnPost) to cause a postback the second time, once the table data is manipulated.

The mark up will look similar to the following:

<body>

    <form id=”form1″ runat=”server”>

    <div>

    <div>

        Rows: <asp:TextBox ID=”txtRows” runat=”server” Width=”30px”> </asp:TextBox> <br />

        Cols: &nbsp;<asp:TextBox ID=”txtCols” runat=”server” Width=”30px”></asp:TextBox>

        <br />

        <br />

        <asp:Button ID=”btnGenerate” OnClick=”btnGenerate_Click” runat=”server” Text=”Generate” />&nbsp;<br /> <br />

        <asp:PlaceHolder ID=”PlaceHolder1″ runat=”server”></asp:PlaceHolder>

        <br />

        <br />

    </div>

    </div>

        <asp:Button ID=”btnPost” runat=”server” OnClick=”Button1_Click” Text=”Cause Postback” />

    </form>

</body>

Step 2: The number of rows and columns for the table is to be taken from the user. For this purpose, we will accept the values in the Page_Load() event. We will create properties for both the rows and columns and store in the ViewState so that the data is available on the postback.

C#

// Rows property to hold the Rows in the ViewState

    protected int Rows

    {

        get

        {

            return ViewState[“Rows”] != null ? (int)ViewState[“Rows”] : 0;

        }

        set

        {

            ViewState[“Rows”] = value;

        }

    }

    // Columns property to hold the Columns in the ViewState

    protected int Columns

    {

        get

        {

          return ViewState[“Columns”] != null ? (int)ViewState[“Columns”] : 0;

        }

        set

        {

            ViewState[“Columns”] = value;

        }

    }

protected void Page_Load(object sender, EventArgs e)

    {

        // Run only once a postback has occured

        if (Page.IsPostBack)

        {

            //Set the Rows and Columns property with the value

            //entered by the user in the respective textboxes

            this.Rows = Int32.Parse(txtRows.Text);

            this.Columns = Int32.Parse(txtCols.Text);

        }

 

        CreateDynamicTable();

    }

VB.NET

‘ Rows property to hold the Rows in the ViewState

      Protected Property Rows() As Integer

            Get

                  If Not ViewState(“Rows”) Is Nothing Then

                        Return CInt(Fix(ViewState(“Rows”)))

                  Else

                        Return 0

                  End If

            End Get

            Set(ByVal value As Integer)

                  ViewState(“Rows”) = value

            End Set

      End Property

      ‘ Columns property to hold the Columns in the ViewState

      Protected Property Columns() As Integer

            Get

             If Not ViewState(“Columns”) Is Nothing Then

                   Return CInt(Fix(ViewState(“Columns”)))

             Else

                   Return 0

             End If

            End Get

            Set(ByVal value As Integer)

                  ViewState(“Columns”) = value

            End Set

      End Property

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs)

            ‘ Run only once a postback has occured

            If Page.IsPostBack Then

                  ‘Set the Rows and Columns property with the value

                  ‘entered by the user in the respective textboxes

                  Me.Rows = Int32.Parse(txtRows.Text)

                  Me.Columns = Int32.Parse(txtCols.Text)

            End If

            CreateDynamicTable()

End Sub

Observe over here that the values of the Rows and Columns properties are set only after the user enters the values and clicks the button, which causes the postback. That is the reason why we are checking against the If(Page.IsPostBack).

Step 3: On the button click, create the dynamic table as shown below. The code has been commented to help you understand.

C#

protected void btnGenerate_Click(object sender, EventArgs e)

    {

        CreateDynamicTable();

    }

    private void CreateDynamicTable()

    {

        PlaceHolder1.Controls.Clear();

 

        // Fetch the number of Rows and Columns for the table 

        // using the properties

        int tblRows = Rows;

        int tblCols = Columns;

        // Create a Table and set its properties 

        Table tbl = new Table();

        // Add the table to the placeholder control

        PlaceHolder1.Controls.Add(tbl);

        // Now iterate through the table and add your controls 

        for (int i = 0; i < tblRows; i++)

        {

            TableRow tr = new TableRow();

            for (int j = 0; j < tblCols; j++)

            {

                TableCell tc = new TableCell();

                TextBox txtBox = new TextBox();

                txtBox.Text = “RowNo:” + i + ” ” + “ColumnNo:” + ” ” + j;

                // Add the control to the TableCell

                tc.Controls.Add(txtBox);

                // Add the TableCell to the TableRow

                tr.Cells.Add(tc);

            }

            // Add the TableRow to the Table

            tbl.Rows.Add(tr);

        }

       // This parameter helps determine in the LoadViewState event,

       // whether to recreate the dynamic controls or not

       ViewState[“dynamictable”] = true;

    }

VB.NET

Protected Sub btnGenerate_Click(ByVal sender As Object, ByVal e As EventArgs)

            CreateDynamicTable()

End Sub

      Private Sub CreateDynamicTable()

            PlaceHolder1.Controls.Clear()

            ‘ Fetch the number of Rows and Columns for the table 

            ‘ using the properties

            Dim tblRows As Integer = Rows

            Dim tblCols As Integer = Columns

            ‘ Create a Table and set its properties 

            Dim tbl As Table = New Table()

            ‘ Add the table to the placeholder control

            PlaceHolder1.Controls.Add(tbl)

            ‘ Now iterate through the table and add your controls 

            For i As Integer = 0 To tblRows – 1

                  Dim tr As TableRow = New TableRow()

                  For j As Integer = 0 To tblCols – 1

                        Dim tc As TableCell = New TableCell()

                        Dim txtBox As TextBox = New TextBox()

                        txtBox.Text = “RowNo:” & i & ” ” & “ColumnNo:” & ” ” & j

                        ‘ Add the control to the TableCell

                        tc.Controls.Add(txtBox)

                        ‘ Add the TableCell to the TableRow

                        tr.Cells.Add(tc)

                  Next j

                  ‘ Add the TableRow to the Table

                  tbl.Rows.Add(tr)

            Next i

         ‘ This parameter helps determine in the LoadViewState event,

         ‘ whether to recreate the dynamic controls or not

         ViewState(“dynamictable”) = True

      End Sub

Step 4: The last piece of code is to determine whether to recreate the controls based on the ViewState[“dynamictable”]. Here’s how it works. The first time the page loads, the  LoadViewState() does not execute. The ViewState[“dynamictable”] flag is initialized once the button click occurs. When the postback occurs on the second button click (btnPost), it is then that our code written for overriding the LoadViewState() runs. The base.LoadViewState() instantiates the ViewState object. We then check the value of our ViewState flag, and based on the result, re-create our Table.

C#

    // Check the ViewState flag to determine whether to

    // rebuild your table again

    protected override void LoadViewState(object earlierState)

    {

        base.LoadViewState(earlierState);

        if (ViewState[“dynamictable”] == null)

            CreateDynamicTable();

    }

VB.NET

‘ Check the ViewState flag to determine whether to

      ‘ rebuild your table again

      Protected Overrides Sub LoadViewState(ByVal earlierState As Object)

            MyBase.LoadViewState(earlierState)

            If ViewState(“dynamictable”) Is Nothing Then

                  CreateDynamicTable()

            End If

      End Sub

That’s it. Run the code. Enter the number of Rows and Columns to be created and click the Generate button to create the table. Since the table contains textboxes in each cell, manipulate the text inside the table and hit the ‘Cause Postback’ button. Even after the postback, the values of the table control are retained.

Note: If multiple controls of the same type are created, remember to create them with the same ID’s.

Advertisements

One Response to “Create a Table Dynamically in ASP.NET 2.0 and ASP.NET 3.5”

  1. I wished to thanks for this nice read!! I positively having fun with each little little bit of it I’ve you bookmarked to take a look at new stuff you submit

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: