更新面板动画没有显示

问题描述:

当我在流行的博客中遵循一个简单的“配方”时,我似乎无法获得带有GIF动画的更新面板。我们正在使用ASP.NET 3.5与VB代码隐藏页面(有点AJAX洒在,但没有什么复杂的)。用户会看到一个“选择页面”,里面充满了他们可以编辑的数据。该页面顶部有一些复选框和下拉列表,用作下面gridview的过滤器。单击给定排列中的适当链接可将您重定向到该项目的详细信息页面。更新面板动画没有显示

复选框在触发时会导致另一次访问数据库以获取数据网格绑定的对象列表(指示要从数据库中读取哪些对象类)。下拉列表用于“过滤”显示。这些过滤器运行速度非常快 - 没有问题。但是,某些访问数据库会调用大量历史数据,页面重新显示需要一段时间。我们希望屏幕上有东西告诉用户软件正在运行。

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

的方法不幸的是我必须做一些错误的,因为我没有收到弹出动画面板。

第一个不同之处在于所讨论的页面有一个母版页 - 我不知道这是否至关重要。但是,这里是ASP后的aspx代码片段:Content和asp:ScriptManager标签:

首先,我在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> 

之后,是在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> 

然后只是'wrapping'div的结束标签只是befo重新摆放桌子。

在这些示例中,Matt简单地将页面放入睡眠中,并在他的Page.Load中检查System.Threading.Thread.Sleep(3000)语句(在检查IsPostback之后)让动画弹出并显示。我在Page.Load(VB中的代码隐藏)中有很多事情要做,但是当我单击其中一个复选框(以便长途跋涉数据库)或从下拉菜单中选择某些内容时,下拉列表(以筛选我已有的结果)。

如果很重要,包含表格,GridView,UpdatePanel,UpdatePanelAnimationExtender的包装div没有定义属性。真的只是在那里从asp标签描绘Javascript。

我错过了什么?

+0

@大卫 - 是Ajax特性的网站上正常别处工作?即更新面板在预期的地方执行异步回发? – 2009-06-16 19:28:32

+0

我们尝试了一些UpdatePanel的东西,但它不起作用 - 认为它可能是我们的Web服务器尝试调用Web服务时遇到的问题(没有足够的时间来正确诊断)。但是像Accordion extender和Panelrounder这样的产品工作得很好。 – David 2009-06-16 19:34:03

好的我已经使用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>