0

下午所有,ASP.Net CollapsiblePanelextender控制

我wonding如果我可以配置并在表格内使用ASP.net一个collapsiblePanelextender。我想将其用于我正在创建的会议系统的会议记录。我有以下代码,并认为如果我添加pnlPresenter和pnlTime与pnlHeader一起CollapseControlID我将能够得到这个工作,但我不能。

有没有人有任何其他建议?

<table width="100%"> 
    <tr> 
      <td class="style3">Topic</td> 
      <td class="style2">Presenter</td> 
      <td>Time Alloted</td> 
    </tr> 
    <tr > 
      <td class="style1" colspan="3"> 
      <asp:Panel ID="pnlHeader" runat="server" CssClass="cpHeader" Width="228%" Height="18px"> 
       1. Agenda Item 1 
      <asp:Image ID="ImgToggle" runat="server" ImageUrl="~/Images/collapse.jpg" ImageAlign="Middle" /> 
      </asp:Panel> 
      </td> 
    </tr> 
    <tr> 
      <td class="style3"> 
      <asp:Panel ID="pnlInfo" runat="server" CssClass="cpBody" > 
       The Agenda topic details goes within here, The Agenda topic details goes within here, 
       The Agenda topic details goes within here, The Agenda topic details goes within here,. 
      </asp:Panel> 
      </td> 
      <td class="style2"> 
      <asp:Panel ID="pnlPresenter" runat="server" CssClass="cpBody" Width="107px"> 
       Presenters Name 
      </asp:Panel> 
      </td> 
      <td class="style2"> 
      <asp:Panel ID="pnlTime" runat="server" CssClass="cpBody" Width="107px"> 
       Time 
      </asp:Panel> 
      </td> 
     </tr> 
</table> 

提前

问候非常感谢 贝蒂

回答

0

这不是完全清楚你想要什么在这里实现,特别是有在标记没有CollapsiblePanelExtender你张贴,所以我这是假设你想要显示一个会议的页面,其中每个议程项目是可展开/可折叠的。

我建议你使用Repeater构建表格,而不是将其硬编码到您的页面中,然后对于每个议程项目,Repeater可以为您呈现一个新行。在由Repeater呈现的行内部,您可以将议程主题作为标题,并将议题项目详细信息作为使用扩展程序展开/折叠的面板:

<asp:Repeater runat="server" ID="AgendaRepeater" DataSourceID="AgendaDataSource"> 
    <HeaderTemplate> 
     <table border="1"> 
      <tr> 
       <td> 
       </td> 
      </tr> 
    </HeaderTemplate> 
    <ItemTemplate> 
     <tr> 
      <td> 
       <asp:Label runat="server" ID="AgendaTopicLabel" Text='<%# Eval("Topic") %>' /> 
       <asp:ImageButton runat="server" ID="PanelExpandContractImageButton" ImageUrl="~/images/zoom_in_16x16.gif" /> 
       <asp:Panel runat="server" ID="AgendaItemDetailsPanel" Height="0px"> 
        <asp:Label runat="server" ID="TopicDetailsLabel" Text='<%# Eval("Details") %>' /><br /> 
        <asp:Label runat="server" ID="PresenterLabel" Text='<%# Eval("Presenter") %>' /><br /> 
        <asp:Label runat="server" ID="TimeLabel" Text='<%# Eval("Time") %>' /> 
       </asp:Panel> 
       <ajaxToolkit:CollapsiblePanelExtender runat="server" TargetControlID="AgendaItemDetailsPanel" 
         Collapsed="true" ExpandControlID="PanelExpandContractImageButton" CollapseControlID="PanelExpandContractImageButton" 
         ImageControlID="PanelExpandContractImageButton" CollapsedImage="~/images/zoom_in_16x16.gif" 
         ExpandedImage="~/images/zoom_out_16x16.gif" ExpandedSize="100" ExpandDirection="Vertical" 
         ScrollContents="true" /> 
      </td> 
     </tr> 
    </ItemTemplate> 
    <FooterTemplate> 
     </table> 
    </FooterTemplate> 
</asp:Repeater> 
+0

非常感谢。我已经按照你的建议使用了中继器,这是一种享受。 – Betty