Dynamic Controls in ASP.NET

The situation may occur that controls to be created dynamically at runtime, these controls should react for their events i.e., dynamically generated controls should be event driven.  For handling these kinds of situations this post will be very useful. 

First of all we will see how to create and show controls on the form dynamically with an example.  In this example I’m creating a form with one label and one textbox aligned in a table control.

In asp.net, every control can be added as a child control for other container controls like placeholder control, panel control etc.  In this way here also we will create controls and add those controls to one of the parent controls.

• Create a place holder control which will hold our dynamically created controls.
• Create a button in which on this button click we are creating and showing controls on the page.  The code which I have written in aspx page will be as follows.

<asp:Button ID="btnGenerateForm" runat="server" Text="Generate Form" OnClick="btnGenerateForm_Click" />

        <table id="tblForm" runat="server" visible="false">

            <tr>

                <td>

                    <asp:PlaceHolder ID="phDCtrls" runat="server"></asp:PlaceHolder>

                </td>

            </tr>

            <tr>

                <td align="right">

                    <table>

                        <tr>

                            <td>

                                <asp:Button runat="server" ID="btnSave" Text="Save" />

                            </td>

                            <td>

                                <asp:Button runat="server" ID="btnClear" Text="Clear" />

                            </td>

                        </tr>

                    </table>

                </td>

            </tr>

        </table>

•  On click event of the Generate form button write the following code.

        try

        {

            //Create Table

            Table tbl = new Table();

            tbl.ID = "tbl";

            //Creating Table row

            TableRow tr = new TableRow();

            tr.ID = "tr1";

            tbl.Rows.Add(tr);//adding table row to the table

            //Creating table cell

            TableCell tc1 = new TableCell();

            TableCell tc2 = new TableCell();

            //Adding table cells to table rows

            tr.Cells.Add(tc1);

            tr.Cells.Add(tc2);

            //Creating Label

            Label lbl = new Label();

            lbl.Text = "First Name";

            lbl.ID = "lblFirstName";

            //Creating TextBox

            TextBox txt = new TextBox();

            txt.ID = "txtFirstName";

      //Assigning the label and textbox controls as child controls for table cells

            tc1.Controls.Add(lbl);

            tc2.Controls.Add(txt);

            phDCtrls.Controls.Add(tbl);

            tblForm.Visible = true;

        }

        catch (Exception ex) { Response.Write(ex.Message); }

• In the above code I first created a table control for that table control I created a table row and added that row to the table control.  Then created two table cells and added these table cells to the table row.  Now created one label control and one textbox control and added these controls to the table cell.  Finally I added the table control to the place holder control which we have created in the aspx page.  Here as I explained previously the table control is the child for the placeholder control, table row is child for table, table cells are child for table row and label and textbox controls are child for table cells.

In this way we can create controls dynamically.  But the problem in creating these controls dynamically is lacking of view state.  So that for every post back the controls will get disappear.  Try this by clicking on the save button which we have created on aspx page.

The solution for this problem and getting values from these dynamically generated controls will be explained in my next post "Postback Issue and retrieving values - asp.net dynamic controls".

Happy coding…