Как вставить UserControl внутри аккордеона в asp.net?

У меня есть пользовательский элемент управления, который выглядит следующим образом:

<%@ 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 inside Panes, но страница не отображает его, вместо этого я получаю ошибку:

Сообщение Об Ошибке Парсера: AjaxControlToolkit.AccordionPaneCollection должен иметь элементы типа ‘ AjaxControlToolkit.AccordionPane’. ‘uc1: ProfileGroupComponent’ имеет тип ‘ ASP.controls_profilegroupcomponent_ascx’.

Идея заключается в динамическом добавлении нескольких панелей, но с согласованным пользовательским интерфейсом, где я могу редактировать элемент управления и изменять внешний вид. Есть ли какой-то безопасный способ сделать это?

1 ответ

  1. Сообщение об ошибке указывает, что AccordionPanesожидается набор AccordionPaneэлементов, а не пользовательский элемент управления.

    Существует несколько возможных способов решения этой проблемы.

    1. Сделайте ваш аккордеон частью управления ASCX.
      Одна хорошая вещь в этом подходе заключается в том, что вам больше не нужно разбивать Accordionконтроль на несколько частей, что, я думаю, неудобно делать в первую очередь. Затем вы можете использовать аккордеон прямо внутри вашего собственного элемента управления ASCX.

    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>
    
    1. Рассмотрите возможность динамического добавления AccordionPane в код позади. Это, конечно, немного сложнее сделать, потому что вы должны написать больше кода. Но больше власти вам, если у вас есть относительно сложная логика, чтобы определить, как аккордеон должен быть представлен на странице.

    Вы можете посмотреть на эту ссылку для получения более подробной информации об этой технике:
    https://www.asp.net/web-forms/overview/ajax-control-toolkit/accordion/dynamically-adding-an-accordion-pane-cs