2009-06-16 97 views
0

當我在流行的博客中遵循一個簡單的「配方」時,我似乎無法獲得帶有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

回答

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>