c# - 带 ListView 的 Accordion

Question

我正在使用 listview 来填充包含 1000 行的表格。数据库表是关于问题和答案的。

我想将 accordion 控件与 listview 一起使用。我应该将 accordion 控件放在 listview itemtemplate 中吗？

我想要的是点击第一个问题打开第一个答案，点击第二个问题关闭第一个答案并打开第二个答案。

更新:

我正在尝试这种方式

<asp:ListView ID="lvQuestions" runat="server"
    DataKeyNames="QueryID" 
        DataSourceID="SqlDataSourceQueries">
    <LayoutTemplate>

        <asp:PlaceHolder ID="itemPlaceholder" runat="server" />

    </LayoutTemplate>
    <ItemTemplate>
    <div id="products">
       <h3><a href="#"><asp:Label ID="Label1" runat="server" Text='<%# Eval("Query") %>' ></asp:Label></a></h3>
         <div><asp:Label ID="ReplyLabel" runat="server" Text='<%# Eval("Reply") %>'></asp:Label></div>
   </div>
    </ItemTemplate>
</asp:ListView> 

但它不起作用。

Answer 1

你可以使用 Jquery Accordion

就像在文档中一样，您会将行呈现为以下结构:

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

您的 ListView 可能如下所示:

<asp:ListView ID="lvQuestions" runat="server"
    onitemdatabound="lvQuestions_ItemDataBound">
    <LayoutTemplate>
       <div id="accordion">
        <asp:PlaceHolder ID="itemPlaceholder" runat="server" />
       </div>
    </LayoutTemplate>
    <ItemTemplate>
       <h3><a href="#"><asp:Literal ID="litQuestion" runat="server" /></a></h3>
         <div><asp:Literal ID="litAnswer" runat="server" /></div>
    </ItemTemplate>
</asp:ListView> 

Codebehind(抱歉，它是在 C# 中，但你应该能够翻译)

protected void lvQuestions_ItemDataBound(object sender, ListViewItemEventArgs e)
{
    if (e.Item.ItemType == ListViewItemType.DataItem)
    {
        Literal litQuestion = (Literal)e.Item.FindControl("litQuestion");
        Literal litAnswer = (Literal)e.Item.FindControl("litAnswer");


        YourClass item = e.Item.DataItem as YourClass;
        litQuestion.Text = item.Question;
        litAnswer.Text = item.Answer;
     }
 }

使用 ItemDataBound-Event 对某些人来说可能看起来是不必要的开销，但根据您的情况，您可能希望根据自定义类中的值对呈现的文本进行更多控制。