How To Make Dynamic Control In ASP.NET Using Panels

In this tutorial, we will learn about dynamic control and how to add it in ASP.NET application using C#. The objective is simple; we will just add some basic controls in runtime. We will use some panels to adjust our dynamic control based on the control container.

Well, this tutorial is not as worthy as it should be because generally the objectives that we include here are quite simple and also in real development, the dynamic control that we are running is never placed like that. The so called dynamic is actually used when we need the resources, and we don’t want to use the whole IDE, at that time such dynamic controls are quite useful.

INITIAL CHAMBER

Step 1

Open your Visual Studio 2010 and create an Empty Website. Give a suitable name [dynamic_demo].

Step 2

In Solution Explorer, you get your empty website. Add a web form –

For Web Form

dynamic _demo (Your Empty Website) -> Right Click -> Add New Item -> Web Form. Name it as -> dynamic _demo.aspx.

DESIGN CHAMBER

Step 3

Open your dynamic_demo.aspx, and drag and drop the table. Inside one of the td  tags, you have to place checkboxlist, for prompting the user to what controls they want to generate. So, we had taken almost 5 controls as – Textbox, button, label, dropdown, and radiobutton. After that, we will place one textbox to prompt the user to choose how many controls they want to add. Then, a simple button control is placed to generate the control dynamically. Your design will look like the below figure.

Here, after every control, we have placed a panel, so that the dynamic control is placed at this appropriate place. We hope that for the above design, we do not have to share the whole td and tr tag code because it is a lengthy table. For simplicity, we have shared our code too, you can refer that in case any trouble occurs.

CODE CHAMBER

Step 4

Open dynamic_demo.aspx.cs file to write our code. Here, we will  first check what controls the user wants to generate. After getting that, we will count how many controls he wants. Suppose, he puts 3, then every control will make 3 dynamic controls.

dynamic_demo.aspx.cs 

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.IO;

public partial class dynamic_control : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void Button1_Click(object sender, EventArgs e)
    {

        int count = Convert.ToInt32(Txtcontrol.Text);
        foreach (ListItem lst in CheckBoxList1.Items)
        {
            if (lst.Selected)
            {
                if (lst.Value =="TextBox")
                {
                    for (int i = 1; i <= count; i++)
                    {
                        TextBox txt = new TextBox();
                        txt.Text = "TextBox" + i.ToString();
                        Panel1.Controls.Add(txt);
                        Setprompt(txt);
                    }
                }
                if (lst.Value == "RadioButton")
                {
                    for (int i = 1; i <= count; i++)
                    {
                        RadioButton rdb = new RadioButton();
                        rdb.Text = "RadioButton" + i.ToString();
                        Panel2.Controls.Add(rdb);
                    }
                }
                if (lst.Value == "DropDown")
                {
                    for (int i = 1; i <= count; i++)
                    {
                        DropDownList dbr = new DropDownList();
                        dbr.Text = "DropDown" + i.ToString();
                        Panel3.Controls.Add(dbr);
                        dbr.Items.Add("--Select--");

                    }
                }

                if (lst.Value == "Button")
                {
                    for (int i = 1; i <= count; i++)
                    {
                        Button btn = new Button();
                        btn.Text = "Button" + i.ToString();
                        Panel4.Controls.Add(btn);
                    }
                }

                if (lst.Value == "Label")
                {
                    for (int i = 1; i <= count; i++)
                    {
                        Label lbl = new Label();
                        lbl.Text = "Label" + i.ToString();
                        Panel5.Controls.Add(lbl);
                    }
                }

                if (lst.Value == "CheckBox")
                {
                    for (int i = 1; i <= count; i++)
                    {
                        CheckBox chk = new CheckBox();
                        chk.Text = "CheckBox" + i.ToString();
                        Panel6.Controls.Add(chk);
                    }
                }
            }
        }
    }
    public string ControlRenderer(Control control)
    {
        StringWriter writer = new StringWriter();
        control.RenderControl(new HtmlTextWriter(writer));
        return writer.ToString();
    }
    private void Setprompt(TextBox txt)
    {
        string onFocusAction = "if (this.value == \"{0}\") {{ this.value = \"\"; this.style.color = \"black\"; }} ";
        string onBlurAction = " if (this.value == \"\") {{ this.value = \"{0}\"; this.style.color = \"gray\"; }} else this.style.color = \"black\";";
        onBlurAction = string.Format(onBlurAction, txt.Text);
        onFocusAction = string.Format(onFocusAction, txt.Text);
        txt.Attributes["onblur"] = onBlurAction;
        txt.Attributes["onfocus"] = onFocusAction;

    }


}

The last two methods are specifically for the textboxes. You will see that when you generate the textbox dynamically, there will be a default text written inside the Textbox, something like Textbox1, Textbox 2 and so on based on the control you had generated. To remove that, you have to click inside the textbox and then use backspace key.

The approach is tedious, so we have used these two methods which will automatically remove the default text when you focus on the control.

OUTPUT CHAMBER

Hope you like this. Have a good day. Thank you for reading.