5

我有一个带有ListView. 我从 Active Directory 获取数据，现在如果ListVew正在构建，我想要一个等待符号。我想我会使用UpdateProgressAjax Control 工具包中的控件。但是我不知道如果我单击一个按钮并且等待符号（例如 gif）在ListView完成后关闭，我该如何使用它。:(

我的 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>
4

4 回答 4

11

首先将您的 listview aspx 代码放在更新面板中

<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>
于 2012-08-30T07:17:13.127 回答
4

尝试将按钮放在包含代码的 UpdatePanel 中可能需要很长时间才能执行，然后将 UpdateProgress 控件关联到 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>
于 2012-08-30T07:32:53.917 回答
2

我做了一个小例子，模拟了updatePanel 中的按钮点击。注意AssociatedUpdatePanelID必须设置的属性，以显示您的 progressTemplate。

默认.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>

默认.aspx.cs

protected void btnDoSomething_Click(object sender, EventArgs e)
{
    System.Threading.Thread.Sleep(5000);
    // or update listView
}
于 2012-08-30T07:39:30.627 回答
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>

于 2015-07-08T07:40:34.303 回答