![]() |
Web Development »
Ajax and Atlas »
Controls
Beginner
License: The Code Project Open License (CPOL)
The UpdateProgress Control of ASP.NET AJAX ExtensionsBy Shiju VargheseAn introduction to the UpdateProgress control and how to use the UpdateProgress control and UpdatePanel with triggers. |
C#, Javascript, XML, HTML, Windows, .NET 2.0, ASP.NET, Visual Studio, Ajax, Dev
|
|
Advanced Search Add to IE Search |
|
|
|
||||||||||||||||
One of the excellent features of ASP.NET AJAX Extensions 1.0 is the UpdatePanel control. The UpdatePanel control enables partial-page rendering in an ASP.NET Web page asynchronously. The contents of the UpdatePanel control will automatically update when a postback event is invoked. This control does work the same as the MagicAjax.net panel control. The UpdateProgress control is very useful when working with the UpdatePanel control. With an UpdateProgress control, you can show the status during the partial-page rendering of an UpdatePanel.
Below is the sample code that uses the UpdateProgress control associated with an UpdatePanel control.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server"
OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1"
AssociatedUpdatePanelID="UpdatePanel1" runat="server">
<ProgressTemplate>Update in Progress…….. </ProgressTemplate>
</asp:UpdateProgress>
In the <ProgressTemplate>, you can use an image instead of static text. Check the code below:
<ProgressTemplate>
<img src="animatedprogress.jpg" />
</ProgressTemplate>
In the above code, the contents inside the <ContentTemplate> will asynchronously update when the Click event of the Button is invoked. While starting an asynchronous postback, the UpdateProgress control will work. The contents inside the <ProgressTemplate> tag will show during the partial-page rendering of an UpdatePanel. The AssociatedUpdatePanelID is the UpdatePanel control you associated with an UpdateProgress control. In the above example, the Button control displays inside the UpdatePanel so that partial-page rendering will automatically be done when the Click event is invoked. But in many cases, you have to update the contents of the UpdatePanel while postback of the controls happens outside the UpdatePanel. In that case, you can use AsyncPostBackTrigger in the <Triggers> section of the UpdatePanel.
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click"/>
</Triggers>
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1"
AssociatedUpdatePanelID="UpdatePanel1" runat="server">
<ProgressTemplate>
Update in Progress……..
</ProgressTemplate>
</asp:UpdateProgress>
<asp:Button ID="Button1" runat="server"
OnClick="Button1_Click" Text="Button" />
In the above example, the Button control sits outside the UpdatePanel control. If you want to update the contents of the UpdatePanel control when the Click event occurs, you can use the following markup:
<Triggers>
<asp:AsyncPostBackTrigger ControlID="Button1" EventName="Event"/>
</Triggers>
But in the above scenario, the UpdateProgress control will not work because the asynchronous postback results from a control (in the above example, the Button control) that is not inside the UpdatePanel. In that case, you can display an UpdateProgress control programmatically using JavaScript. Add the following JavaScript code in the script block:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(InitializeRequest);
prm.add_endRequest(EndRequest);
var postBackElement;
function InitializeRequest(sender, args)
{
if (prm.get_isInAsyncPostBack())
args.set_cancel(true);
postBackElement = args.get_postBackElement();
if (postBackElement.id == 'Button1')
$get('UpdateProgress1').style.display = 'block';
}
function EndRequest(sender, args)
{
if (postBackElement.id == 'Button1')
$get('UpdateProgress1').style.display = 'none';
}
In the above code, I have used the initializeRequest event and the endRequest event of the Sys.WebForms.PageRequestManager class. The initializeRequest event will invoke during the initialization of the asynchronous postback, and the endRequest event will invoke after an asynchronous postback is finished and the control has been returned to the browser.
General
News
Question
Answer
Joke
Rant
Admin
|
PermaLink |
Privacy |
Terms of Use
Last Updated: 11 Apr 2007 Editor: Smitha Vijayan |
Copyright 2007 by Shiju Varghese Everything else Copyright © CodeProject, 1999-2009 Web18 | Advertise on the Code Project |