How to add dynamic control and manage server side events in ASP.NET

Friday, January 17, 2014 Sourav Mondal ASP.NET

Introduction

In this post I am explain How to add dynamic control and manage server side events in ASP.NET

Steps :

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net web forms application > Entry Application Name > Click OK.

Step-2: Add a Webpage and Design for show dynamically generated controls.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select web form/ web form using master page under Web > Enter page name > Add.

HTML Code

             <h3>Dynamic Control Add & Fire Server Side Events</h3>
            <div style="background-color: #CCFFCC">
                <%-- This Label added for show message after click button which are dinamically created --%>
                <asp:Label ID="lblMessage" runat="server" Text="No Button Clicked!" Font-Bold="True" Font-Size="20pt"></asp:Label>
                <%-- Panel will contain dynamically generated buttons --%>
                <asp:Panel ID="pnlButtonContainer" runat="server"></asp:Panel>
            </div>

Step-3: Write function for Create & render server control into webpage.

        private void AddButtons(int noOfButton)
        {
            for (int i = 0; i < noOfButton; i++)
            {
                Button b = new Button();
                b.ID = "Button" + (i+1);
                b.Text = "Button" + (i + 1);
                // This below line added for find out which button is clicked
                b.CommandArgument = "Button" + (i + 1);
                // generate Click event
                b.Click += new EventHandler(this.ButtonClick);
 
                // this line will add control in Panel (render control in page)
                pnlButtonContainer.Controls.Add(b);
 
            }
        }
        
        protected void ButtonClick(object sender, EventArgs e)
        {
            lblMessage.Text = ((Button)sender).CommandArgument + " Clicked";
        }

Step-4: Write code in page load event for call function which is responsible for create dynamic control

Here you will notice that, I have called function which is responsible for create dynamic control in page load event. This will create control eachtime page is loaded. Other wise we have to face a common problem "dynamically generated controls disappear postback".

            protected void Page_Load(object sender, EventArgs e)
            {
                // Here call function for create dynamic control
                AddButtons(5); 
                // this function is required to call for each postback because no view state is stored when generate 
                // dynamic control
 
            }