2012-08-30 127 views
1

我有ASP.NET應用程序與ListView。我從Active Directory獲取數據,現在如果ListVew正在構建,現在我需要一個等待符號。我以爲我使用來自Ajax Control工具包的一個UpdateProgress控件。但是我不知道如果我點擊一個按鈕,並且等待符號(例如gif)關閉,如果ListView完成,我該如何使用它。 :(如何使用UpdateProgress控件顯示等待時間

我的CS文件:

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 
} 

我怎樣才能做到這一點,我能做到這一點與UpdateProgress如何:

<asp:UpdateProgress ID="UpdateProgress1" DynamicLayout="true" runat="server" AssociatedUpdatePanelID="?" > 
    <ProgressTemplate> 
    <div class="progress"> 
     <img src="images/ajax-loader-arrows.gif" />&nbsp;please wait... 
    </div> 
    </ProgressTemplate> 
</asp:UpdateProgress> 

update aspx

<%@ 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> 

回答

8

第一將你的listview aspx代碼放在更新面板

012中
<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" />&nbsp;please wait... 
</div> 
</ProgressTemplate> 
</asp:UpdateProgress> 
+0

必須在UpdatePanel中的按鈕?...媽媽在這裏是我的更新 – Tarasov

+0

如果按鈕是內部更新面板然後指定一個回發觸發它,如果按鈕是更新外面板然後指定一個asynpostback觸發器,我會更新我的答案。 –

+1

@塔拉索夫它的工作與否? –

3

嘗試將包含的代碼可能需要很長的時間來執行,那麼UpdateProgress控件到UpdatePanel的關聯一個UpdatePanel內的按鈕。你可能需要的代碼就像:

<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" />&nbsp;please wait... 
    </div> 
</ProgressTemplate> 
</asp:UpdateProgress> 

希望這會有所幫助。 :)

2

我做了一個小例子模擬一個按鈕點擊更新面板。注意必須設置的屬性AssociatedUpdatePanelID,以便顯示你的進度模板

的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" />&nbsp;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 
} 
+0

它顯示的圖像,但列表視圖不建立比:/ – Tarasov

+1

只需在updatePanel中添加listView和它將 –

0

顯示進度條在Asp.net

請參閱此鏈接瞭解更多信息,使用UpdateProgress控件

http://www.freshcodehub.com/Article/22/show-progress-bar-using-updateprogress-control-in-aspnet

<asp:UpdateProgress ID="prgLoadingStatus" runat="server" DynamicLayout="true"> 
 
     <ProgressTemplate> 
 
      <div id="overlay"> 
 
       <div id="modalprogress"> 
 
        <div id="theprogress"> 
 
         <asp:Image ID="imgWaitIcon" runat="server" ImageAlign="AbsMiddle" ImageUrl="~/img/progress.gif" 
 
          Width="230px" /><br /> 
 
         Please wait... 
 
        </div> 
 
       </div> 
 
      </div> 
 
     </ProgressTemplate> 
 
    </asp:UpdateProgress> 
 
    <asp:UpdatePanel ID="UpdatePanel1" runat="server"> 
 
     <ContentTemplate> 
 
      <asp:Button ID="btnProgress" runat="server" Text="Show Progress" OnClick="btnProgress_Click" />    
 
     </ContentTemplate> 
 
    </asp:UpdatePanel>