入れ子になった Repeater コントロールと Visual C# .NET を使用して階層データを表示する

[アーティクル]
07/17/2023

この記事では、入れ子になった Repeater コントロールと Visual C# .NET を使用して階層データを表示する方法について説明します。

元の製品バージョン: Visual C#
元の KB 番号: 306154

概要

この記事では、入れ子になった Repeater コントロールを使用して階層データを表示する方法について説明します。この概念は、他のリストバインドコントロールに適用できます。

この記事では、次の Microsoft .NET Framework クラスライブラリ名前空間について説明します。

System.Data
System.Data.SqlClient

親テーブルにバインドする

Visual Studio .NET を起動します。
[ ファイル] メニューの [ 新規] をポイントし、[ プロジェクト] をクリックします。
[プロジェクトの種類] で [Visual C# プロジェクト] をクリックし、[テンプレート] の下にある [web アプリケーション ASP.NET] をクリックします。
[ 場所 ] ボックスで WebApplication#を削除し、「 NestedRepeater」と入力します。ローカルサーバーを使用する場合は、サーバー名をとして http://localhost残します。パスが http://localhost/NestedRepeater [ 場所 ] ボックスに表示されます。 [OK] をクリックします。
ソリューションエクスプローラーで、NestedRepeater プロジェクト名ノードを右クリックし、[追加] をポイントして、[Web フォームの追加] をクリックします。
Web フォームに名前を付ける場合は、「 NestedRepeater」と入力し、[ 開く] をクリックします。
新しい Web フォームが作成されます。 Visual Studio .NET の統合開発環境 (IDE) のデザインビューで開きます。ツールボックスから Repeater コントロールを選択し、Web フォームページにドラッグします。
この Repeater コントロールの ID プロパティを parentRepeater に変更します。
この Web フォームの HTML ビューに切り替えます。そのためには、Designerの左下隅にある [HTML] タブをクリックします。 Repeater コントロールは、次の HTML コードを生成します。
```
<asp:Repeater id="parentRepeater" runat="server"></asp:Repeater>
```

タグに次のコードを Repeater 追加します。

<itemtemplate>
    <b>
        <%# DataBinder.Eval(Container.DataItem, "au_id") %>
    </b>
    <br>
</itemtemplate>

その後、Repeater の HTML コードは次のようになります。

<asp:Repeater id="parentRepeater" runat="server">
    <itemtemplate>
        <b>
            <%# DataBinder.Eval(Container.DataItem, "au_id") %>
        </b>
        <br>
    </itemtemplate>
</asp:Repeater>

ソリューションエクスプローラーでNestedRepeater.aspxを右クリックし、[コードの表示] をクリックして、NestedRepeater.aspx.cs分離コードファイルに切り替えます。
次の名前空間宣言をファイルの先頭に追加します。
```
using System.Data;
using System.Data.SqlClient;
```

次のコードを Page_Load イベントに追加して Pubs データベースへの接続を作成し、テーブルを Authors Repeater コントロールにバインドします。

 public void Page_Load(object sender, EventArgs e)
 {
     //Create the connection and DataAdapter for the Authors table.
     SqlConnection cnn = new SqlConnection("server=(local);database=pubs; Integrated Security=SSPI");
     SqlDataAdapter cmd1 = new SqlDataAdapter("select * from authors",cnn);

     //Create and fill the DataSet.
     DataSet ds = new DataSet();
     cmd1.Fill(ds,"authors");
     //Insert code in step 4 of the next section here.
     //Bind the Authors table to the parent Repeater control, and call DataBind.
     parentRepeater.DataSource = ds.Tables["authors"];
     Page.DataBind();

     //Close the connection.
     cnn.Close();
 }

注:

環境に応じてデータベース接続文字列を変更する必要がある場合があります。

すべてのファイルを保存します。
ソリューションエクスプローラーで、NestedRepeater.aspxを右クリックし、[スタートページとして設定] をクリックします。
[ ビルド ] メニューの [ ソリューションのビルド ] をクリックして、プロジェクトをコンパイルします。
ブラウザーで.aspx ページを表示し、ページがここまで動作することを確認します。出力は次のように表示されます。
```
172-32-1176
213-46-8915
238-95-7766
267-41-2394
...
```

子テーブルにバインドする

[NestedRepeater.aspx] ページの HTML ビューで、次のコード行を見つけます。
```
<b>
    <%# DataBinder.Eval(Container.DataItem, "au_id") %>
</b>
<br>
```
このコードの後に次のコードを追加します。
```
<asp:repeater id="childRepeater" runat="server">
    <itemtemplate>
        <%# DataBinder.Eval(Container.DataItem, "[\"title_id\"]")%>
        <br>
    </itemtemplate>
</asp:repeater>
```
この新しいコードは、親 Repeater コントロールのプロパティに ItemTemplate 2 つ目の Repeater コントロールを追加します。

子 Repeater DataSource コントロールのプロパティを次のように設定します。

<asp:repeater ... datasource='<%# ((DataRowView)Container.DataItem).Row.GetChildRows("myrelation") %>' >

子 Repeater コントロールの DataSource プロパティを設定すると、2 つの Repeater コントロール (親と子) の HTML コードが次のように表示されます。

<asp:Repeater id="parentRepeater" runat="server">
    <itemtemplate>
        <b>
            <%# DataBinder.Eval(Container.DataItem, "au_id") %>
        </b>
        <br>
        <asp:repeater id="childRepeater" runat="server"
        datasource='<%# ((DataRowView)Container.DataItem).Row.GetChildRows("myrelation") %>' >
            <itemtemplate>
                <%# DataBinder.Eval(Container.DataItem, "[\"title_id\"]")%><br>
            </itemtemplate>
        </asp:Repeater>
    </itemtemplate>
</asp:Repeater>

次の page ディレクティブをページの上部に追加します。
```
<%@ Import Namespace="System.Data" %>
```

分離コードページで、イベント内の次の行を Page_Load 置き換えます。

//Insert code in step 4 of the next section here.

//Create a second DataAdapter for the Titles table.
SqlDataAdapter cmd2 = new SqlDataAdapter("select * from titleauthor",cnn);
cmd2.Fill(ds,"titles");

//Create the relation between the Authors and Titles tables.
ds.Relations.Add("myrelation",
ds.Tables["authors"].Columns["au_id"],
ds.Tables["titles"].Columns["au_id"]);

これにより、テーブルが Titles DataSet に追加され、テーブルと Titles テーブルの間のリレーションシップがAuthors追加されます。

アプリケーションを保存してコンパイルします。
ブラウザーでページを表示し、ページがここまで機能することを確認します。出力は次のように表示されます。
```
172-32-1176
PS3333
213-46-8915
BU1032
BU2075
238-95-7766
PC1035
267-41-2394
BU1111
TC7777
```

Nestedrepeater.aspx コード

<%@ Page language="c#" Codebehind="NestedRepeater.aspx.cs" AutoEventWireup="false" Inherits="NestedRepeater.NestedRepeater" %>
<%@ Import Namespace="System.Data" %>

<html>
    <body>
        <form runat=server>
            <!-- start parent repeater -->
            <asp:repeater id="parentRepeater" runat="server">
                <itemtemplate>
                    <b>
                        <%# DataBinder.Eval(Container.DataItem,"au_id") %>
                    </b>
                    <br>
                    <!-- start child repeater -->
                    <asp:repeater id="childRepeater" datasource='<%# ((DataRowView)Container.DataItem).Row.GetChildRows("myrelation") %>' runat="server">
                        <itemtemplate>
                            <%# DataBinder.Eval(Container.DataItem, "[\"title_id\"]")%><br>
                        </itemtemplate>
                    </asp:repeater>
                    <!-- end child repeater -->
                </itemtemplate>
            </asp:repeater>
            <!-- end parent repeater -->
        </form>
    </body>
</html>

Nestedrepeater.aspx.cs コード

using System;
using System.Data;
using System.Data.SqlClient;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;

namespace NestedRepeater
{
    public class NestedRepeater : System.Web.UI.Page
    {
        protected System.Web.UI.WebControls.Repeater parentRepeater;
        public NestedRepeater()
        {
            Page.Init += new System.EventHandler(Page_Init);
        }
        public void Page_Load(object sender, EventArgs e)
        {
            //Create the connection and DataAdapter for the Authors table.
            SqlConnection cnn = new SqlConnection("server=(local);database=pubs; Integrated Security=SSPI ;");
            SqlDataAdapter cmd1 = new SqlDataAdapter("select * from authors",cnn);

            //Create and fill the DataSet.
            DataSet ds = new DataSet();
            cmd1.Fill(ds,"authors");

            //Create a second DataAdapter for the Titles table.
            SqlDataAdapter cmd2 = new SqlDataAdapter("select * from titleauthor",cnn);
            cmd2.Fill(ds,"titles");

            //Create the relation bewtween the Authors and Titles tables.
            ds.Relations.Add("myrelation",
            ds.Tables["authors"].Columns["au_id"],
            ds.Tables["titles"].Columns["au_id"]);

            //Bind the Authors table to the parent Repeater control, and call DataBind.
            parentRepeater.DataSource = ds.Tables["authors"];
            Page.DataBind();

            //Close the connection.
            cnn.Close();
        }
        private void Page_Init(object sender, EventArgs e)
        {
            InitializeComponent();
        }
        private void InitializeComponent()
        {
            this.Load += new System.EventHandler(this.Page_Load);
        }
    }
}

詳細

詳細については、「 Repeater Web サーバーコントロール」を参照してください。