Using UpdatePanel Triggers in C#


Server Intellect


Using UpdatePanel Triggers in C#

This tutorial was created with Visual Studio.NET 2008. 2005 can be used, but Microsoft's ASP.NET AJAX Extensions, which can be downloaded at this link, must be installed.

In AJAX, we can specify areas of a page to be refreshed without refreshing the whole page. For this, we use UpdatePanels, which also have the ability to make use of triggers. These triggers allow us to specify which control initiates a certain postback. We can choose to initiate a partial postback, or a full one.

In this example, we will look at how we can specify different controls to refresh the whole page, and parts of the page. We will create two UpdatePanels and see how we can refresh each of them as well as refresh the whole page with the triggers.

First, we will start off by adding the ScriptManager, if it's not already there, like so:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

This will handle all of our AJAX calls for us, which makes it a lot easier to develop AJAX applications.
Next, we add the UpdatePanel controls:

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>
<asp:Label ID="lblTime2" runat="server" /><br />
<asp:Button ID="butTime2" runat="server" Text="Refresh Page" /><br />
</ContentTemplate>
</asp:UpdatePanel>
<br />

<asp:UpdatePanel ID="UpdatePanel2" runat="server">

<ContentTemplate>
<asp:Label ID="lblTime3" runat="server" /><br />
</ContentTemplate>
</asp:UpdatePanel>
</form>

Each UpdatePanel has its own ContentTemplate, which is the area that will be refreshed upon an Asynchronous postback. We have included a label in each content, and will use the code-behind to display the current time. This will allow us to easily see what area of the page is being refreshed - we will also put a label and a button outside of the UpdatePanels so that we can see when the whole page is being refreshed - independent from the Panels.

We will use the button outside of the UpdatePanel to refresh the panel, and the button within the UpdatePanel to refresh the whole page. By default, a postback called within an UpdatePanel will be hijacked by AJAX. Using triggers, we can have more control.
We add another label and a button:

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:Label ID="lblTime1" runat="server" /><br />
<asp:Button ID="butTime1" runat="server" Text="Refresh Panel" /><br /><br />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>
<asp:Label ID="lblTime2" runat="server" /><br />
<asp:Button ID="butTime2" runat="server" Text="Refresh Page" /><br />
</ContentTemplate>
</asp:UpdatePanel>
<br />

<asp:UpdatePanel ID="UpdatePanel2" runat="server">

<ContentTemplate>
<asp:Label ID="lblTime3" runat="server" /><br />
</ContentTemplate>
</asp:UpdatePanel>
</form>

Now that we have a label and button on our page, and also in each UpdatePanel, we will add the code-behind:

protected void Page_Load(object sender, EventArgs e)
{
lblTime1.Text = DateTime.Now.ToString("T");
lblTime2.Text = DateTime.Now.ToString("T");
lblTime3.Text = DateTime.Now.ToString("T");
}

This simply sets the current time to the labels we created when the page is loaded. This will also run when a partial postback is performed.

Buttons are not the only control we can use for triggers. We will also add a DropDownList:

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:Label ID="lblTime1" runat="server" /><br />
<asp:Button ID="butTime1" runat="server" Text="Refresh Panel" /><br /><br />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">

<ContentTemplate>
<asp:Label ID="lblTime2" runat="server" /><br />
<asp:Button ID="butTime2" runat="server" Text="Refresh Page" /><br />
</ContentTemplate>
</asp:UpdatePanel>
<br />

<asp:UpdatePanel ID="UpdatePanel2" runat="server">

<ContentTemplate>
<asp:Label ID="lblTime3" runat="server" /><br />
</ContentTemplate>
</asp:UpdatePanel>

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
<asp:ListItem>Change</asp:ListItem>
<asp:ListItem>My</asp:ListItem>
<asp:ListItem>Value</asp:ListItem>
</asp:DropDownList>
</form>

Finally, we can add the triggers. We will use the button outside of the UpdatePanels to reload them, and the button inside the first Panel will reload the page. The DropDownList will reload the Panels:

<Triggers>
<asp:AsyncPostBackTrigger ControlID="butTime1" EventName="Click" />
<asp:PostBackTrigger ControlID="butTime2" />
</Triggers>
..
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>

The ASPX page will now look something like this:

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" />

<asp:Label ID="lblTime1" runat="server" /><br />
<asp:Button ID="butTime1" runat="server" Text="Refresh Panel" /><br /><br />

<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="butTime1" EventName="Click" />
<asp:PostBackTrigger ControlID="butTime2" />
</Triggers>

<ContentTemplate>
<asp:Label ID="lblTime2" runat="server" /><br />
<asp:Button ID="butTime2" runat="server" Text="Refresh Page" /><br />
</ContentTemplate>
</asp:UpdatePanel>
<br />

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList1" EventName="SelectedIndexChanged" />
</Triggers>

<ContentTemplate>
<asp:Label ID="lblTime3" runat="server" /><br />
</ContentTemplate>
</asp:UpdatePanel>

<asp:DropDownList ID="DropDownList1" runat="server" AutoPostBack="true">
<asp:ListItem>Change</asp:ListItem>
<asp:ListItem>My</asp:ListItem>
<asp:ListItem>Value</asp:ListItem>
</asp:DropDownList>
</form>

Download this sample project

 


Comments
rafiqe said:

i want to know how to create master page on windows form using c#. i know how to use in asp.net but i want to create a windows application form

Posted Sep 9, 2008 2:17 AM
rafiqe said:

i want to know how to create master/home page in windows apllication form. i know that how to use in asp.net but i want to create in windows application.

Posted Sep 9, 2008 2:19 AM
Azamat said:

I don't think we have the concept of master/home page in the windows application form. The structure of web programming and windows programming is different.

Master pages are not available in Windows programming.

Posted Oct 9, 2008 4:51 PM
Shai said:

Nice Article

Posted Oct 9, 2008 5:46 PM
Manoj said:

Nice Articles

Posted Oct 10, 2008 12:20 AM
Rajeev said:

Rafique,

You can have the look and feel like that by inheriting all forms you from a base form with common features.

There is no concept like Master page in windows forms as Azmat said.

Posted Oct 10, 2008 2:19 AM
kshitij kumar said:

There is no such concept like master page in the Windows applications as these applications follows the concept of Forms (dialog box), if you want to use the functionality liek the Master page of ASP.net then you should use the concept of MAster and Child form. Under which there will be one master(Parent) form and all the other forms will act as their child under the master form area

Posted Oct 14, 2008 9:01 AM
raha said:

1. What are the new Data Controls in Asp.net 2.0?

Data access in ASP.NET 2.0 can be accomplished completely declaratively (no code) using the new data-bound and data source controls. There are new data source controls to represent different data backends such as SQL database, business objects, and XML, and there are new data-bound controls for rendering common UI for data, such as gridview, detailsview, and formview.

2. What are the new Navigation Controls in Asp.net 2.0?

The navigation controls provide common UI for navigating between pages in your site, such as treeview, menu, and sitemappath. These controls use the site navigation service in ASP.NET 2.0 to retrieve the custom structure you have defined for your site.

3. What are the new Login Controlsin Asp.net 2.0?

The new login controls provide the building blocks to add authentication and authorization-based UI to your site, such as login forms, create user forms, password retrieval, and custom UI for logged in users or roles. These controls use the built-in membership and role services in ASP.NET 2.0 to interact with the user and role information defined for your site.

4. What are the new Web Part Controls in Asp.net 2.0 ?

Web parts are an exciting new family of controls that enable you to add rich, personalized content and layout to your site, as well as the ability to edit that content and layout directly from your application pages. These controls rely on the personalization services in ASP.NET 2.0 to provide a unique experience for each user in your application.

5. What are Master Pages?

This feature provides the ability to define common structure and interface elements for your site, such as a page header, footer, or navigation bar, in a common location called a "master page", to be shared by many pages in your site. In one simple place you can control the look, feel, and much of functionality for an entire Web site. This improves the maintainability of your site and avoids unnecessary duplication of code for shared site structure or behavior.

6. What are Themes and Skins in 2.0, explain usgae scenario?

The themes and skins features in ASP.NET 2.0 allow for easy customization of your site's look-and-feel. You can define style information in a common location called a "theme", and apply that style information globally to pages or controls in your site. Like Master Pages, this improves the maintainability of your site and avoid unnecessary duplication of code for shared styles.

7. What is a profile object, why is it used?

Using the new personalization services in ASP.NET 2.0 you can easily create customized experiences within Web applications. The Profile object enables developers to easily build strongly-typed, sticky data stores for user accounts and build highly customized, relationship based experiences. At the same time, a developer can leverage Web Parts and the personalization service to enable Web site visitors to completely control the layout and behavior of the site, with the knowledge that the site is completely customized for them. Personalizaton scenarios are now easier to build than ever before and require significantly less code and effort to implement.

8. What is Configuration API?

ASP.NET 2.0 contains new configuration management APIs, enabling users to programmatically build programs or scripts that create, read, and update Web.config and machine.config configuration files.

9. What is MMC Admin Tool?

ASP.NET 2.0 provides a new comprehensive admin tool that plugs into the existing IIS Administration MMC, enabling an administrator to graphically read or change common settings within our XML configuration files.

10. Explain the use of Pre-compilation Tool?

ASP.NET 2.0 delivers a new application deployment utility that enables both developers and administrators to precompile a dynamic AS

Posted Oct 15, 2008 3:30 AM
NIcsam said:

Hi

This is a very nice article.Simple,easy to understand

Regards

Nicsam

Posted Oct 17, 2008 7:46 AM
martin said:

I'm using Smartpart with Ajax to upload usercontrols in Sharepoint. I have a gridview with multiple Linkbuttons. When I run the code from a webform it works perfectly. When I upload the usercontrol in sharepoint none of the Linkbuttons work. I click them and nothing happens. What can I do to resolve this?

Posted Nov 6, 2008 12:46 PM
vibhash said:

How to use Ajax in Visual Studio 2008.

Posted Nov 7, 2008 6:03 AM

Leave a Comment