Attention: We are retiring the ASP.NET Community Blogs. Learn more >

ASP.NET 2.0 AJAX Update Panel and Update Progress

In this post I am going to show you how to use update panel and to show progress while the request is working.

- In aspx file

first I am going to register new name control

<%

@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

second I am going to drag and drop the script manager control

<

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

than will put a text box and a button

<asp:TextBox ID="TextBox1" runat="server" /> <br />

<

asp:Button ID="Button1" runat="server" Text="Show me" />

it is time to put the update panel (just drag and drop it)

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

<

ContentTemplate><asp:Label ID="Label1" runat="server" />

</

ContentTemplate>

<Triggers><asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" />

<!-- here we specify which control and event will fire up the async post back -->

</Triggers> </asp:UpdatePanel>

<

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

<ProgressTemplate><asp:Image ID="Image1" runat="server" ImageUrl="Send.gif" />

<!-- this is an animated progress gif that will be shown while progress delay -->

</ProgressTemplate>

</

asp:UpdateProgress>

Ok, so far so good let's make a delay to see whats going on with our progress panel

- In aspx.vb code I am going to put the system sleep time to be able to see how the panel works

first lets import new name space

Imports

System.Threading.Thread

and set delay in our button click event

Protected Sub Button1_Click(ByVal sender As Object, ByVal e As System.EventArgs) Handles Button1.Click

Threading.Thread.Sleep(2000)

Label1.Text = TextBox1.Text

' here I specify the time delay in milliseconds while in this case we are going to see the progress image for 2 seconds long then the label message is going to appear

End Sub

So that's it here is the sample image for Send.gif sending

18 Comments

  • THIS IS GREAT... I have been looking for how to do this... very straight forward...

    THANKS!

  • I have master page which contains label to display number to record that converted to some persons in my project in internal page , I want to UpdateProgress to start on the master page only but after I press the button on the internal page.

    I preciated your response. Thanks ,,

  • Hi,
    I'm using the syntax and code from this web page. But when page is redirecting then browser gives error "status code returned from the server was :302" with error code 302.
    Waiting for your early reply.

    Regards,

    Manoj

  • Hi, Manoj Puranik

    The page reading the request is probably throwing an exception and redirecting to the same page (it does redirecting loop).

    302 is not an error code, but indicates redirecting.

    Hope it helps. Please post feed back.

    Regards

    Stoian

  • I m using your code

    But, this is not working for me

  • Hi, i am using your code, it's nice but still i am getting error. Can you please explain me what changes web.config need.
    Thanks,
    Kevin

  • i have used ur code but it's not working......

  • Hi Kevin,
    Actualy no need of changing web.config if at the very begining of creating your web app you had choosed ajax enabled web site in VS 2005 (it does the changes in web.config for you). In VS 2008 not required its by default done. All you need is to import reference to ajax namespace on page level as I did in the example or in web.config (if you choose web.config declaration then its not required to import at page level).
    The code is working just fine, please provide code sample to be able to see what went wrong.

    Regards,
    Stoian Bucovich

  • Hi vikas kumar,

    Can you explain what exactly you did? The code is working 100%, the reason should be something diferent.

    Thanks,
    Stoian Bucovich

  • Hi sachin zaks,

    Would you like to share some code with us to see what went wrong?

    Thanks
    Stoian Bucovich

  • Hi vinod,

    Its good when you say something to tell us what you did so far so we could be able to find what went wrong with your application not just to say "I give up it doesn't work", as you can see this code works just fine for me and some folks above.

    Regards,
    Stoian

  • no it doesn t work I am so dissapointed

  • the code works just fine and it's very straight forward. if you still have problem of running the code, it would be nice to post of what you got and I am sure people can help you out. It's also helpful for other beginners.

  • Its really Good, very simple to understand

  • System.Threading.Thread.Sleep(3000)
    the above code will only stop to all requests right? and after 3000ms, the request will proceed and browser get response from server, so its not a update progress, because the progress was already stopped when we call System.Threading.Thread.Sleep(3000).
    Please explain

  • Yes System.Threading.Thread.Sleep(3000) will stop everything for 3 seconds.

    During that time the browser thinks the server is working on the postback (it cant know it is just waiting for 3 seconds).

    Because the browser is waiting during that time, it displays the update progress image (send.gif).

    The System.Threading.Thread.Sleep(3000) is just to show that this works, because a normal postback would be too fast to see the update progress image.

  • Thanks this blog solved my update progress problem

  • code is gud bt i want to use file download instead of lable .... for me its not working ..please help me...

Comments have been disabled for this content.