2

を使用しlistviewて、テーブルに1000行を入力しています。DBテーブルは、質問と回答に関するものです。

accordionでコントロール を使いたいlistview。accordionコントロールを中に入れるべきlistview itemtemplateですか？

最初の質問をクリックすると1番目の回答が開き、2番目の質問をクリックすると1番目の回答が閉じて2番目の回答が開きます。

アップデート：

私はそれをこのように試しています

<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>

しかし、それは機能していません。

4

2 に答える 2

3

Jqueryアコーディオンを使用できます

ドキュメントのように、行を次の構造にレンダリングします。

<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>

コードビハインド（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を使用することは、一部の人にとっては不必要なオーバーヘッドのように見えるかもしれませんが、状況によっては、カスタムクラスの値に応じてレンダリングされるテキストをより細かく制御したい場合があります。

于 2012-04-06T07:20:01.800 に答える
0

試したことはありませんが、リストビューのテンプレート内でアコーディオンを使用することをお勧めします。次に、itemtemplate内でaccordionitemを使用できます。それは次のようなものになります：

<ListView>
  <ListView.Template>
    <ControlTemplate TargetType="ListView">
      <Accordion IsItemsHost="True"/>
    </ControlTemplate>
  </ListView.Template>
  <ListView.ItemTemplate>
    <DataTemplate>
      <AccordionItem .../>
    </ControlTemplate>
  </ListView.ItemTemplate>
</ListView>
于 2012-04-06T07:16:14.780 に答える