Question

在热门博客中关注简单的“食谱”时，我似乎无法获得带有动画GIF的更新面板。

我们正在使用带有VB代码隐藏页面的ASP.NET 3.5（一点点AJAX，但没有任何复杂）。向用户呈现“选择页面”，其中包含他们允许编辑的数据。该页面顶部有一些复选框和下拉列表，用作右下方网格视图的过滤器。单击给定rown上的相应链接会将您重定向到该项目的详细信息页面。

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

我们决定尝试使用here in Matt Berseth's blog

的方法

不幸的是，由于我没有弹出动画面板，我必须做错事。

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

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

然后是'wrapped'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>

之后，UpdatePanel中是否包含gridview：

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

然后只是表格前面'wrap'div的结束标记。

在示例中，Matt只是通过他的Page.Load中的System.Threading.Thread.Sleep（3000）语句将页面置于睡眠状态（在检查IsPostback之后）以弹出并显示动画。我已经在Page.Load（VB中的代码隐藏）中进行了大量的工作，但是当我点击其中一个复选框（对数据库进行长途旅行）或从一个选项中选择一些东西时，动画根本不会出现 - 下拉列表（过滤我已经拥有的结果）。

如果重要，那么包含Table，GridView，UpdatePanel，UpdatePanelAnimationExtender的包装div将被定义为没有属性。它实际上仅用于从asp标签中描述Javascript。

我错过了什么？

Answer 1

好的，我已经使用了带有.net 2.0的AJAX控件工具包1.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>

更新面板动画未显示

1 个答案: