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 