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:
|