延迟加载 asp.net Ajax 控制工具包 手风琴

Question

我正在使用 asp.net Ajax Control Toolkit 手风琴 (http://www.asp.net/ajaxlibrary/act_Accordion.ashx)，每个手风琴窗格都包含相当多的信息。

所有这些信息都是在页面中生成的，但不会显示，因为工具包为非活动窗格提供了 a

 (style="display:none;)

但因为信息位于页面中，所以它会成为一个需要加载的非常繁重的页面。

我正在寻找一种按需加载窗格的方法：因此，只有当用户单击窗格时，才会发送 ajax 请求，并且加载并展开窗格。

这可以用这个控件来完成还是我应该选择不同的手风琴？任何帮助或建议表示赞赏。

更新 目前，手风琴是用两个嵌套的中继器创建的。第一个中继器循环遍历类别并为每个类别创建一个面板。第二个重复器在每个面板内重复获取一个类别的内容并创建面板的内容。

普伦

Answer 1

我没有资格评论和问你问题。对不起。 :(
我的问题是关于您计划如何创建和填充手风琴。

您会使用 IDE 中的标记手动创建窗格，还是将 Accordion 绑定到将动态创建您需要的窗格的数据源？

您是否有 3 个独立的数据源或以下不同的组合：
    1.) DataSource 用于初始化面板数量并仅填充面板的标题信息。
    2.) 数据源在首次加载时填充所有面板的静态内容。
    3.) 数据源填充用户单击展开的单个面板的延迟加载内容。

有了你的答案，我希望用真实的答案来更新这个答案。谢谢。

更新：这可以通过 Ajax Control Toolkit 的 Accordion 来实现。
下面有一些非常基本的代码作为概念证明。它可能会更流畅，但如果您认为有必要，我将让您自行使用 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

使用 ASP.NET AJAX Accordion Control 的 6 个提示中的提示 4 解释了如何操作确定所选索引何时发生更改。从 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

看一下 ASPxNavBar 控件（免费 ASPxperience Suite 的一部分）来自DevExpress。如果 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)