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

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

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

まとめ

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

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

  • System.Data
  • System.Data.SqlClient

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

  1. Visual Studio .NET を起動します。

  2. [ファイル] メニューの [新規作成] をポイントし、 [プロジェクト] をクリックします。

  3. プロジェクトの種類の下の Visual C# プロジェクトをクリックし、 Templatesの下の [Web アプリケーションASP.NET] をクリックします。

  4. [ Location ボックスで、 WebApplication#を削除し、「 NestedRepeater」と入力します。 ローカル サーバーを使用する場合は、サーバー名を http://localhostのままにします。 http://localhost/NestedRepeater パスが [Location ボックスに表示されます。 [OK] をクリックします。

  5. ソリューション エクスプローラーで、NestedRepeater プロジェクト名ノードを右クリックし、Add をポイントして、[Web フォームの追加] クリック。

  6. Web フォームに名前を付けるには、「 NestedRepeater」と入力し、 Open をクリックします。

  7. 新しい Web フォームが作成されます。 Visual Studio .NET の統合開発環境 (IDE) のデザイン ビューで開きます。 ツールボックスから Repeater コントロールを選択し、Web フォーム ページにドラッグします。

  8. この Repeater コントロールの ID プロパティを parentRepeater に変更します。

  9. この Web フォームの HTML ビューに切り替えます。 これを行うには、デザイナーの左下隅にある HTML タブをクリックします。 Repeater コントロールは、次の HTML コードを生成します。

    <asp:Repeater id="parentRepeater" runat="server"></asp:Repeater>

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

  11. ソリューション エクスプローラーでNestedRepeater.aspxを右クリックし、[コードの表示] クリックしてNestedRepeater.aspx.cs分離コード ファイルに切り替えます。

  12. 次の名前空間宣言をファイルの先頭に追加します。

    using System.Data;
using System.Data.SqlClient;

  13. 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();
 }

    Note

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

  14. すべてのファイルを保存します。

  15. ソリューション エクスプローラーで、NestedRepeater.aspxを右クリックし、[スタート ページとして設定] クリック。

  16. [ Build メニューの Build Solution をクリックしてプロジェクトをコンパイルします。

  17. ブラウザーで.aspx ページを表示し、ページがここまで動作することを確認します。 出力は次のように表示されます。

    172-32-1176
213-46-8915
238-95-7766
267-41-2394
...

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

  1. 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 コントロールを追加します。

  2. 子 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>

  3. 次のページ ディレクティブをページの上部に追加します。

    <%@ Import Namespace="System.Data" %>

  4. 分離コード ページで、 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 に追加され、 Authors テーブルと Titles テーブルの間のリレーションシップが追加されます。

  5. アプリケーションを保存してコンパイルします。

  6. ブラウザーでページを表示し、そのページがここまで動作することを確認します。 出力は次のように表示されます。

    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 サーバー コントロール」を参照してください。

  • Last updated on