懶惰加載asp.net Ajax Control Toolkit手風琴

Question

我正在使用asp.net Ajax Control Toolkit手風琴（http://www.asp.net/ajaxlibrary/act_Accordion.ashx），每個手風琴窗格都包含相當多的信息。

所有信息都在頁面中生成，但未顯示，因為工具包提供了非活動窗格a

 (style="display:none;)

但由於信息在頁面中，因此加載的頁面變得非常繁重。

我正在尋找一種按需加載窗格的方法：因此，只有當用戶單擊窗格時，才會發送ajax請求並加載和展開窗格。

這可以通過這種控制來完成，還是應該選擇不同的手風琴？ 任何幫助或建議表示贊賞。

更新目前，Accordion是使用兩個嵌套的中繼器創建的。 第一個轉發器循環遍歷類別，並為每個類別創建一個面板。 第二個轉發器在每個面板內重復獲取一個類別的內容並創建面板的內容。

Pleun

Answer 1

我沒有評論點，並問你問題。 抱歉。 :(
我的問題是關於你計划如何創建和填充手風琴。

您是否可以使用IDE中的標記手動創建窗格，還是將Accordion綁定到將動態創建所需窗格的DataSource？

您是否有3個單獨的DataSource或以下的不同組合：
1.）DataSource初始化面板數量並僅填充面板的Header信息。
2.）DataSource在第一次加載時填充所有面板的靜態內容。
3.）DataSource用於填充用戶單擊以展開的單個面板的Lazy-Loaded Content。

有了你的答案，我希望用真實的答案更新這個答案。 謝謝。

achievable with the Ajax Control Toolkit's Accordion. 更新：這 Ajax控件工具包的手風琴實現的。
basic code below as proof of concept. 我在下面有一些基本的代碼作為概念證明。 它可以更順暢，但如果您認為有必要，我將使用UpdatingProgress控件添加“加載”圖像。

Aspx標記中的手風琴：
（注意UpdatePanels - 如果你願意，你可以用回調替換它們，我只是想讓答案變得簡單）

<asp:Accordion ID="acc_Accordion" runat="server" RequireOpenedPane="false" 
        SelectedIndex="-1" onitemcommand="acc_Accordion_ItemCommand" >
    <HeaderTemplate>
        <asp:UpdatePanel ID="up_UpdateHeader" runat="server">
            <ContentTemplate>
            <%--When using "Eval" inside strings for Asp.net controls,
                you MUST wrap them in apostrophes ('),
                otherwise with (") you will get parser errors!--%>
            <asp:LinkButton ID="btn_Header" runat="server"
                 Text='<%# Eval("HeaderText") %>'
                 CommandName="UpdatePane" CommandArgument='<%# Eval("ItemID") %>'
                 Font-Underline="false" ForeColor="Black"
                 style="width:100%; height:100%; cursor:pointer;"/>
                 <%--Use Cursor:Pointer to keep a consistent
                     interface after disabling the button.--%>
            </ContentTemplate>
        </asp:UpdatePanel>
    </HeaderTemplate>
    <ContentTemplate>
        <asp:UpdatePanel ID="up_UpdateContent" runat="server"
                         UpdateMode="Conditional">
            <ContentTemplate>
                <%# Eval("ContentText")%>
                <asp:Label ID="lbl_Content" runat="server"
                     Text="<%# DateTime.Now.ToLongTimeString() %>"></asp:Label>
            </ContentTemplate>
        </asp:UpdatePanel>
    </ContentTemplate>
</asp:Accordion>  

Page_Load（） - 准備我們的“虛擬”數據：

protected void Page_Load(object sender, EventArgs e)
{
    if (IsPostBack == false)
    {
        DataTable dt = new DataTable();
        dt.Columns.Add("ItemID");
        dt.Columns.Add("HeaderText");
        dt.Columns.Add("ContentText");

        dt.Rows.Add(new object[] { 123456, "Header 1", "Content A." });
        dt.Rows.Add(new object[] { 654321, "Header 2", "Content B." });

        acc_Accordion.DataSource = new System.Data.DataTableReader(dt);
        acc_Accordion.DataBind();
    }
}

ItemCommand（） - 它捕獲Accordion中的按鈕點擊：

protected void acc_Accordion_ItemCommand(object sender, CommandEventArgs e)
{
    if (e.CommandName == "UpdatePane")
    {
        AjaxControlToolkit.AccordionContentPanel acp
            = (e as AjaxControlToolkit.AccordionCommandEventArgs).Container;
        UpdatePanel upHeader
            = acc_Accordion.Panes[acp.DisplayIndex].HeaderContainer
             .Controls.OfType<Control>()
             .Single(c => c is UpdatePanel) as UpdatePanel;
        LinkButton btn
            = upHeader.ContentTemplateContainer
             .Controls.OfType<Control>()
             .Single(b => b is LinkButton) as LinkButton;
        UpdatePanel upContent
            = acc_Accordion.Panes[acp.DisplayIndex].ContentContainer
             .Controls.OfType<Control>()
             .Single(c => c is UpdatePanel) as UpdatePanel;
        Label lbl
            = upContent.ContentTemplateContainer
             .Controls.OfType<Control>()
             .Single(c => c is Label) as Label;
        lbl.Text = " ID: " + e.CommandArgument
                 + " and Time: " + DateTime.Now.ToLongTimeString();
        //You can use the ID from e.CommandArgument to query the database
        // for data to update your Repeaters with.
        btn.Enabled = false;//Disabling the button for our Header
        // will prevent Asyncronous Postbacks to update the content again.
        //Only disable this if you don't need to update the content
        // when the user clicks to view the pane again.
        upContent.Update();//Set UpdateMode="Conditional".
    }
}

我知道這看起來很多，但它只有幾行代碼（在包裝和評論之前）。

Answer 2

提示4 使用ASP.NET AJAX Accordion Control的提示解釋了如何確定所選索引的更改時間。 從JavaScript事件處理程序中，您可以執行任何操作，以更新新選擇的折疊窗格的內容（調用Web服務，使用更新面板等）

將此與另一篇文章結合使用，說明如何在為簡單演示選擇標簽頁時使用更新面板來補充內容 ：

    <ajaxToolKit:Accordion ID="accSample" runat="server"
 RequireOpenedPane="false" SelectedIndex="-1">
 <Panes>
  <ajaxToolKit:AccordionPane runat="server">
   <Header>Sample</Header>
   <Content>
 <asp:Button ID="btnSample" runat="server" OnClick="OnShowSample" Style="display: none" />
 <script type="text/javascript">
  Sys.Application.add_load(function (sender, args) {
   if (!args.get_isPartialLoad()) { 
    var accSample = $find('<%= accSample.ClientID %>_AccordionExtender');
    accSample.add_selectedIndexChanged(function (sender, eventArgs) {
     $get('<%= btnSample.ClientID %>').click();
    });
   }
  });
 </script>
 <asp:UpdatePanel ID="upSample" runat="server">
  <ContentTemplate>
   <asp:DataGrid ID="dgSample" runat="server" Visible="false"/>
  </ContentTemplate>
  <Triggers>
   <asp:AsyncPostBackTrigger ControlID="btnSample" />
  </Triggers>
 </asp:UpdatePanel>
   </Content>
  </ajaxToolKit:AccordionPane>
 </Panes>
</ajaxToolKit:Accordion>

然后在代碼隱藏

protected void OnShowSample(object sender, EventArgs e)
{
 dgSample.DataSource = new string[] { "test" };
 dgSample.DataBind();
 dgSample.Visible = true; 
}

Answer 3

看看DevExpress的ASPxNavBar控件（免費ASPxperience Suite的一部分）。 如果ASPxNavBar的EnableCallBacks屬性設置為true ，則折疊組的內容不會在客戶端表示。 當組首次展開時，將從服務器檢索其內容，然后在客戶端上緩存。 下一次擴展組時，其內容將從客戶端獲取，並且不會執行對服務器的回調。

查看ASPxNavBar - 回調（AJAX）在線演示以獲取更多信息。

Answer 4

我可以建議你將linkBut​​tons添加到你的窗格的標題和面板：

        <Panes>
            <asp:AccordionPane ID="First" runat="server">
                <Header>
                    <asp:LinkButton CommandName="ASD2" ID="LinkButton2" runat="server">LinkButton</asp:LinkButton>
                </Header>
                <Content>
                    <asp:Panel ID="Panel2" runat="server" Visible="true">
                         First
                    </asp:Panel>
                </Content>
            </asp:AccordionPane>
            <asp:AccordionPane ID="Second" runat="server">
                <Header>
                    <asp:LinkButton CommandName="ASD" ID="LinkButton1" runat="server">LinkButton</asp:LinkButton>
                </Header>
                <Content>
                    <asp:Panel ID="Panel1" runat="server" Visible="false">
                         Second
                    </asp:Panel>
                </Content>
            </asp:AccordionPane>
        </Panes>

並在Accordion1_ItemCommand設置相應面板的Visible屬性。

protected void Accordion1_ItemCommand(object sender, CommandEventArgs e)