如何在asp.net的Accordion中插入UserControl

Question

我有一个用户控件，看起来像这样:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="ProfileGroupComponent.ascx.cs" Inherits="Reports.Controls.ProfileGroupComponent" %>
<ajaxToolkit:AccordionPane ID="accordionPane" runat="server">
    <Header>
        <asp:Table ID="Table1" runat="server">
            <asp:TableHeaderRow  runat="server">
                <asp:TableHeaderCell>
                    <asp:Label ID="lblHeader" runat="server">
                </asp:Label>
                </asp:TableHeaderCell>
                <asp:TableHeaderCell>
                    <asp:Label ID="Label3" runat="server" Text="Frecuency: "></asp:Label>
                    <asp:Label ID="lblFrecuency" runat="server"></asp:Label>
                </asp:TableHeaderCell>
                <asp:TableHeaderCell>
                    <asp:Label ID="Label7" runat="server" Text="Nxt Invoice Dt: "></asp:Label>
                    <asp:Label ID="lblNxtInvoiceDt" runat="server"></asp:Label>
                </asp:TableHeaderCell>
                <asp:TableHeaderCell>
                   <asp:Label ID="Label9" runat="server" Text="Not Consolidated:"></asp:Label>
                    <ajaxToolkit:ComboBox ID="cmbNotConsolidated" runat="server" AutoCompleteMode="Suggest"></ajaxToolkit:ComboBox>
                </asp:TableHeaderCell>
                <asp:TableHeaderCell>
                     <asp:Button ID="btnPayorDetails" runat="server" Text="Payor Details" OnClick="btnPayorDetails_OnClick"/>
                </asp:TableHeaderCell>
            </asp:TableHeaderRow>
        </asp:Table>
    </Header>
    <Content>
        <asp:BulletedList ID="bltListDeitals" runat="server">
        </asp:BulletedList>
    </Content>
</ajaxToolkit:AccordionPane>

在

里面有一个手风琴

<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
                    HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent"
                    FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None"
                    RequireOpenedPane="false" SuppressHeaderPostbacks="true" Width="1880">
                    <Panes>
                        <uc1:ProfileGroupComponent runat="server" ID="ProfileGroupComponent" />
                    </Panes>
                </ajaxToolkit:Accordion>

我试图在窗格内插入UserControl标签，但页面不渲染它，而是我得到一个错误:

解析器错误消息:AjaxControlToolkit. js。AccordionPaneCollection必须有'AjaxControlToolkit.AccordionPane'类型的项。'uc1:ProfileGroupComponent'的类型为'ASP.controls_profilegroupcomponent_ascx'.

背后的想法是动态地添加多个窗格，但使用一致的UI，我可以编辑控件并更改外观。有什么安全的方法吗?

Answer 1

错误消息表明AccordionPanes期望AccordionPane项的集合，而不是您的自定义用户控件。

有几个可能的方法来解决这个问题。

1. 让Accordion控件成为ASCX控件的一部分。这种方法的一个好处是，你不再需要将Accordion控制本身分解成多个部分，我认为这样做首先有点尴尬。然后你可以在你自己的ASCX控件中使用Accordion

2. 更改ASPX页面和ASCX控件的标记代码。通过这样做，您将需要将AccordionPane项模板移动到您的ASPX页面，并使您的ASCX仅作为内容控件。如果需要在应用程序的其他地方重用它，您还可以尝试创建标题内容ASCX控件。所以最后，它归结为这样的东西

的例子:

<ajaxToolkit:Accordion ID="MyAccordion" runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader" HeaderSelectedCssClass="accordionHeaderSelected" ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40" TransitionDuration="250" AutoSize="None" RequireOpenedPane="false" SuppressHeaderPostbacks="true" Width="1880"> 
     <Panes>
          <asp:AccordionPane ID="AccordionPane1" runat="server">
             <Header><uc1:HeaderCtrl runat="server" ID="myHeader" /></Header>
             <Content><uc1:ContentCtrl runat="server" ID="myContent" />
             </Content>
          </asp:AccordionPane>   
     </Panes>
</ajaxToolkit:Accordion>

考虑在后面的代码中动态添加AccordionPane。这当然更具有挑战性，因为您需要编写更多的代码。但是，如果您有相对复杂的逻辑来决定如何在页面上呈现Accordion，则会更强大。

您可以查看此链接以了解有关此技术的更多详细信息:
https://www.asp.net/web-forms/overview/ajax-control-toolkit/accordion/dynamically-adding-an-accordion-pane-cs