更新面板动画未显示

Question

在流行博客中遵循简单的“食谱”时，我似乎无法弹出带有动画 GIF 的更新面板。

我们使用带有 VB 代码隐藏页面的 ASP.NET 3.5（加入了一点 AJAX，但并不复杂）。用户会看到一个“选择页面”，里面装满了他们可以编辑的数据。该页面在顶部有一些复选框和下拉列表，用作下方网格视图的过滤器。单击给定行上的相应链接会将您重定向到该项目的详细信息页面。

复选框在触发时会导致再次访问数据库以获取数据网格绑定到的对象列表（指示要从数据库中读取的对象类别）。下拉列表用于“过滤”显示。这些过滤器运行得非常快——那里没问题。但是，对数据库的某些访问会调用大量历史数据，并且需要一段时间才能重新显示页面。我们想在屏幕上显示一些东西来告诉用户软件正在运行。

我们决定尝试here in Matt Berseth's blog所使用的方法

很遗憾，我一定是做错了什么，因为我没有得到弹出式动画面板。

第一个区别是有问题的页面有一个母版页——我不知道这是否很重要。但是这里是 asp:Content 和 asp:ScriptManager 标签之后的 aspx 的 sn-ps：

首先，我在引用页面上的示例中具有 onUpdating 和 onUpdate 函数，仅修改为符合我的 GridView 的名称。

然后是“包装”div 的开头，它以复选框和下拉列表所在的表格开头。

如何定义它们的示例如下：

    <asp:TableCell ID="TableCell4" runat="server"><asp:CheckBox ID="chkShowCancelled" runat="server" Text="Cancelled" AutoPostBack="True" /></asp:TableCell>
    <asp:TableCell>TO#:<asp:DropDownList ID="ddlTO" runat="server" AutoPostBack="True"></asp:DropDownList></asp:TableCell>

在那之后是带有gridview的UpdatePanel：

<asp:UpdatePanel ID="updatePanel" runat="server" UpdateMode="Conditional">
    <ContentTemplate>
        <asp:GridView ID="grdRequests" runat="server" Style="z-index: 100; left: 0px; top: 0px" 
            AutoGenerateColumns="False" CellPadding="4" Font-Size="Small" ForeColor="#333333" 
            GridLines="None" PageSize="25" AutoGenerateSelectButton="False" AllowSorting="True" Width="100%" EnableViewState="False">
            <HeaderStyle CssClass="tableheader" />
            <FooterStyle BackColor="#000099" Font-Bold="True" ForeColor="White" />
            <RowStyle BackColor="#EFF3FB" />
            <Columns>
                 ...Template Fields Deleted for Brevity...
            </Columns>
            <PagerStyle BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" />
            <SelectedRowStyle BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" />
            <HeaderStyle BackColor="#034EA1" Font-Bold="True" ForeColor="White" />
            <EditRowStyle BackColor="#2461BF" />
            <AlternatingRowStyle BackColor="White" />
        </asp:GridView>
    </ContentTemplate> </asp:UpdatePanel>

紧随其后的是 AnimationExtender 和弹出面板

<cc1:UpdatePanelAnimationExtender runat="server" TargetControlID="updatePanel">
    <Animations>
        <OnUpdating>
            <Parallel duration="0">
                <ScriptAction Script="onUpdating();" />
            </Parallel>
        </OnUpdating>
        <OnUpdated>
            <Parallel duration="0">
                <ScriptAction Script="onUpdated();" />
            </Parallel>
        </OnUpdated>
    </Animations>
</cc1:UpdatePanelAnimationExtender>
<asp:Panel ID="pnlPopup" runat="server" CssClass="progress" style="display:none;">
    <div class="pcontainer">
        <div class="pheader">Loading, please wait...</div>
        <div class="pbody">
            <img alt="Progressing..." src="~/Images/activity.gif" />
        </div>
    </div>
</asp:Panel> 

然后就是表格前面的“包装”div 的结束标记。

在示例中，Matt 只是在他的 Page.Load 中使用 System.Threading.Thread.Sleep(3000) 语句让页面进入睡眠状态（在检查 IsPostback 之后），让动画弹出并显示。我在 Page.Load（VB 中的代码隐藏）中有很多事情要做，但是当我单击其中一个复选框（以进行长途访问数据库）或从下拉菜单中选择某些内容时，动画根本不会出现 -下列表（过滤我已有的结果）。

如果重要的话，包含 Table、GridView、UpdatePanel、UpdatePanelAnimationExtender 的包装 div 被定义为没有属性。它实际上只是为了从 asp 标签中描述 Javascript。

我错过了什么？

Answer 1

好的，我已将 AJAX 控制工具包 1.0 与 .net 2.0 一起使用，并且我的更新面板运行良好。

首先，您的 javascript 代码在哪里？

编辑：这是我的有效代码：

                                <ContentTemplate>
                                     <asp:UpdateProgress id="tab1Updating" runat="server" AssociatedUpdatePanelID="tab1Update">
                                                    <ProgressTemplate>
                                                        <div>
                                                            <img src="./IMG/loader.gif" alt="loading" /> 
                                                               Please Wait...
                                                        </div>
                                                    </ProgressTemplate>
                                     </asp:UpdateProgress>
                             </ContentTemplate>
                             </asp:UpdatePanel>

                         </ContentTemplate>