How I can use the UpdateProgress Control to show a wait symbol?
56,899
Solution 1
First place your listview aspx code inside an update panel
<asp:UpdatePanel ID="up" runat="server">
<ContentTemplate>
// Place your list View Code here
<asp:ListView ..........
...... </asp:ListView>
</ContentTemplate>
<Triggers>
// If button is present outside update panel then specify AsynPostBackTrigger
<asp:AsyncPostBackTrigger ControlID="btnControlID" EventName="Click" />
</Triggers>
</asp:UpdatePanel>
// Now Set AssociatedUpdatePanelID="up" in the UpdateProgress
<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="up" >
<ProgressTemplate>
<div class="progress">
<img src="images/ajax-loader-arrows.gif" /> please wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Solution 2
Try to put your button within an UpdatePanel that contains the code may take a long time to execution, then associate the UpdateProgress control to the UpdatePanel. Code you may need is just like:
<asp:UpdatePanel ID="updatePanelMain" runat="server">
<ContentTemplate>
<asp:button runat="server" ID="btnBenutzerSuchen" OnClick="btnBenutzerSuchen_Click"/>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" runat="server" AssociatedUpdatePanelID="updatePanelMain" DisplayAfter="200">
<ProgressTemplate>
<div class="progress">
<img src="images/ajax-loader-arrows.gif" /> please wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
Solution 3
I did a small example simulation a button click within an updatePanel. Pay attention to the attribute AssociatedUpdatePanelID which must be set, in order to show your progressTemplate.
default.aspx
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Button ID="btnDoSomething" runat="server" Text="Do Something"
onclick="btnDoSomething_Click" />
<asp:ListView> YOUR_LISTVIEW_GOES_HERE </asp:ListView>
</ContentTemplate>
</asp:UpdatePanel>
<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="true" runat="server"
AssociatedUpdatePanelID="UpdatePanel1">
<ProgressTemplate>
<div class="progress">
<img src="images/ajax-loader-arrows.gif" /> please wait...
</div>
</ProgressTemplate>
</asp:UpdateProgress>
default.aspx.cs
protected void btnDoSomething_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
// or update listView
}
Comments
-
Tarasov over 4 years
I have an ASP.NET application with a
ListView. I get data from Active Directory and now I want a wait symbol for the time if theListVewis building. I thought I would use aUpdateProgressControl from Ajax Control toolkit. But I don't know how I can use it if I click on a Button and the wait symbol (for example a gif) closes if theListViewis finished. :(My CS file:
protected void btnBenutzerSuchen_Click(object sender, EventArgs e) { //If I click on this Button the gif must start try { ... // my ListView get data this.myListView.DataSource = dv; this.myListView.DataBind(); ... } catch (Exception) { ... } //If the ListView is finish the gif must close }How I can do this? Can I do this with the
UpdateProgresslike this:<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="?" > <ProgressTemplate> <div class="progress"> <img src="images/ajax-loader-arrows.gif" /> please wait... </div> </ProgressTemplate> </asp:UpdateProgress>My update.aspx file:
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="~/BenutzerListe.aspx.cs" Inherits="BenutzerListe.BenutzerListe" %> <%@ Register TagPrefix="asp" Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"%> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <script src="Scripte/jquery-1.7.2.js" type="text/javascript"></script> <script type="text/javascript" src="Scripte/jquery-ui-1.8.22.custom.min.js" ></script> <script language="javascript" type="text/javascript"> // my javascript code </script> <link href="~/App_Theme/BenutzerListeStyle.css" type="text/css" rel="Stylesheet" /> <link href="App_Theme/jquery-ui-1.8.22.custom.css" type="text/css" rel="Stylesheet" /> <link href="App_Theme/PopUpDialog_Style.css" type="text/css" rel="Stylesheet" /> <style type="text/css"> #SuchTabelle { width: 587px; } </style> </head> <body> <form id="form1" runat="server"> <asp:scriptmanager id="ScriptManager1" runat="server"> </asp:scriptmanager> <div class="header"> <br /> <table id="SuchTabelle" class="SuchTabelle" runat="server" border="0" width="100%"> <tr> <th><asp:Label ID="id_SearchUser" runat="server" Text="lblSearchUser"></asp:Label></th> <th class="txtBenutzerSuchen"><asp:TextBox ID="txtBenutzer" runat="server" Width="150px" ToolTip="Gesucht wird nach Vorname, Nachname, eMail , Abteilung und Telefonnummer"></asp:TextBox></th> <th><asp:Label ID="id_location" runat="server" Text="lblLocation"></asp:Label></th> <th class="DropDownList"><asp:DropDownList ID="dropWerk" runat="server" Width="200px" /></th> <th> <asp:Button ID="Button2" runat="server" Text="Suchen" onclick="btnBenutzerSuchen_Click" Width="150px"/> </th> </tr> </table> </div> <div class="bodyList"> <asp:UpdatePanel ID="update" runat="server"> <ContentTemplate> <asp:ListView> .... </asp:ListView> </ContentTemplate> </asp:UpdatePanel> <asp:UpdateProgress ID="updatePro" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="update"> <ProgressTemplate> <asp:Image ImageUrl="~/App_Theme/ajax_loader_circle.gif" runat="server" ID="waitsymbol" /> </ProgressTemplate> </asp:UpdateProgress> <hr /> </div> </form> </body> </html> -
Waqar Janjua almost 12 yearsif button is inside update panel then specify a postback trigger for it if Button is outside the update panel then specify a asynpostback trigger, I will update my answer.
