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)
 7222  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


Barbara Jones added new Question What is ANR?   3 days ago

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

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

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