Using UpdateProgress of ajax in asp.net

In this post i will show how to use UpdateProgresss extension of ajax in asp.net

We do see in many websites that when ever somthing is getting loaded at that time some message is shown

like “Please wait .....” or “Loading....”

Or some gif images

This can be done by using UpdateProgresss of Ajax in ASP.NET easily.....

Let me show you one small example.....

1. Create new asp.net page.

2. Go to source code.

3. Add ScriptManager ......(without it your ajax will never work...)

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

4. Add one UpdatePanel & put code someting like this ...

<asp:UpdateProgress runat="server" id="PageUpdateProgress">
<ProgressTemplate>
Loading....
</ ProgressTemplate>
</ asp:UpdateProgress>

5. Now Add UpdateProgress Extension & write something like this ....

<asp:UpdatePanel runat="server" id="Panel">
<ContentTemplate>
<asp:Button runat="server" id="UpdateButton"
onclick="UpdateButton_Click"
text="Update" style="height: 26px" />
</ContentTemplate>
</asp:UpdatePanel>

6. Now go to code behind & write this code....

protected void UpdateButton_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}

7. Now just save it & run it....

8. Click on button..... You will find “Loading....” at top of button.

You can put anything for showing instead of “Loading....”

i.e. You can put any image like there are in many wesites....

Here is full code....

Source code...

<asp:ScriptManager ID="ScriptManager1" runat="server" />
<asp:UpdateProgress runat="server" id="PageUpdateProgress">
<ProgressTemplate>
Loading....
</ProgressTemplate>
</asp:UpdateProgress>
<asp:UpdatePanel runat="server" id="Panel">
<ContentTemplate>
<asp:Button runat="server" id="UpdateButton"
onclick="UpdateButton_Click"
text="Update" style="height: 26px" />
</ContentTemplate>
</asp:UpdatePanel>

Code Behind...

protected void UpdateButton_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}


Download Demo