入れ子になった Repeater コントロールと Visual C# .NET を使用して階層データを表示する
この記事では、入れ子になった 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 サーバー コントロール」を参照してください。