Learn How to Create Multiple UpdatePanel Controls C#

Category: Visual Studio.NET

This tutorial will show you how to create an ASP.NET Page with Multiple UpdatePanel Controls C#

In this tutorial we will demonstrate how to work with multiple UpdatePanel controls on a page. By adding multiple UpdatePanel controls onto a page you are able to update regions of the page separately or together. This is considered a partial page update.

Here is a snapshot of what the Final Page will look like:

If you're looking for a really good web host, try Server Intellect - we found the setup procedure and control panel, very easy to adapt to and their IT team is awesome!

To start open Visual Studio 2008. File > New > Web Site > and name it MultUpPanels or whatever you want. Then switch to Design view.

Within the AJAX Extensions tab of the toolbox, simply double –click the ScriptManager control to add it to the page. Then double-click the UpdatePanel control in the toolbox twice to add two UpdatePanel controls to the page. In the properties window, set both UpdateMode controls of both UpdatePanel controls to conditional.

In the first UpdatePanel control, add a Label control and set its Text property to “Panel Created”. In the same UpdatePanel control, add a Button control and set its text property to “Refresh Panel”.

Within the second UpdatePanel add a Calendar control.

Next, double-click the “Refresh Panel” button to add an event handler for its click event. Then add this code to the handler. This simply sets the Label control to the current time.

protected void btnButtonOne_Click(object sender, EventArgs e)
{
lblLabelOne.Text = "Panel refreshed: " + DateTime.Now.ToString();
}

Save and Run. Click the Button and the time should change. Change the Month in the calendar and notice how the time does not change. You have just created to UpdatePanels on the same ASP.NET 3.5 Web page.

We chose Server Intellect for its dedicated servers, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.

This markup might be formatted a little better. Try it, if you want:


   id="smScriptManager"
 runat="server">

   id="upUpdatePaneOne"
 runat="server">
 
 

 UpdatePanel1
 
 



 ID="upUpdatePaneTwo"
 runat="server">

 

 UpdatePanel2
   ID="calCalendar"
 runat="server">




We moved our Web sites to Server Intellect and have found them to be incredibly professional. Their setup is very easy and we were up and running in no time.



Download Project Source - Enter your Email to be emailed a link to download the Full Source Project used in this Tutorial!



100% SPAM FREE! We will never sell or rent your email address!