Home > DeveloperSection > Articles > ASP.Net AJAX Server Control: UpdateProgress, UpdatePanel

ASP.Net AJAX Server Control: UpdateProgress, UpdatePanel

Posted by  Amit Singh
on    October-09-2010 20:34 PM

AJAX AJAX 
Ratings:
0 Comment(s)
 7178  View(s)
Rate this:

ASP.Net AJAX Server Control: UpdateProgress, UpdatePanel

UpdateProgress: A control that allows you to display a visual element to the end user to show that a partial page post back is occurring to the part of the page making the update. This is an ideal control to use when you have long running AJAX update.

UpdatePanel: A Container Control that allows you to define specific areas of the page that are enabled with script manager. It contains two sections:

One is <Content Template> and another is <Triggers> section                                                                                  

How we implement the Update Progress server control

 

Example:

Step1: we use the following control on aspx page

 

<head runat="server">

<title>Using Update Panel</title>

</head>

<body>

<form id="form1" runat="server">

<div>

<%--Using script Manager Control--%>

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

</asp:ScriptManager>

<%--Using UpdateProgress Control--%>

<asp:UpdateProgress ID="UpdateProgress1" runat="server">

<ProgressTemplate>

Update is showing here.......

</ProgressTemplate>

</asp:UpdateProgress>

<%--Using UpdatePanel Here--%>

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

<ContentTemplate>

<%--Adding one button outside the update panel--%>

<asp:Label ID="lblShowDate" runat="server" Text=""></asp:Label>

</ContentTemplate>

<Triggers>

<asp:AsyncPostBackTrigger ControlID="btnShowDate" EventName="Click" />

</Triggers>

</asp:UpdatePanel>

<br /><br />

<%--Adding one button outside the update panel--%>

<asp:Button ID="btnShowDate" runat="server" Text="Show Date" OnClick="btnShowDate_Click" />

</div>

</form>

</body>

 

 

 

Step2: We write the following code on button click event.

 

protected void btnShowDate_Click(object sender, EventArgs e)

{

   System.Threading.Thread.Sleep(TimeSpan.Parse("00:00:10"));

   lblShowDate.Text = "Today Date is: " + DateTime.Now.ToString();

}

 

Step3: Run the project

 

After 10 second, the output is:

 

 
















Recent Activities


Kamlakar Singh added new Blog Convert Text Document to PDF File   9 days ago

Kamlakar Singh added new Article Introduction to Backbone.js   9 days ago

Kamlakar Singh added new Question Explain the AdRotator Control.   10 days ago

Don't want to miss updates? Please click the below button!