ネストした Repeater コントロールを使用して、Visual C#.NET で階層化データを表示します。
ネストした Repeater コントロールや Visual C#.NET を使用して、階層データを表示できます。以下はその例です。
以下のデータ構造があるとします。
public class Category
{
public string Name { get; set; }
public List<Product> Products { get; set; }
}
public class Product
{
public string Name { get; set; }
}
まず、フロントエンドのページフロントに、2つのレピーターコントロールを追加する必要があります。1つは分類を表示するため、もう1つは製品情報を表示するためです。以下のようなコードをページに追加します。
<asp:Repeater ID="rptCategories" runat="server">
<ItemTemplate>
<h2><%# Eval("Name") %></h2>
<asp:Repeater ID="rptProducts" runat="server" DataSource='<%# Eval("Products") %>'>
<ItemTemplate>
<p><%# Eval("Name") %></p>
</ItemTemplate>
</asp:Repeater>
</ItemTemplate>
</asp:Repeater>
次に、データのRepeaterコントロールとのバインドを、コードビハインドに記述します。Page_Load イベント内にて、下記のコードを追加してください。
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
List<Category> categories = GetCategories(); // 获取分类数据
rptCategories.DataSource = categories;
rptCategories.DataBind();
}
}
private List<Category> GetCategories()
{
// 模拟从数据库中获取数据
List<Category> categories = new List<Category>();
Category category1 = new Category
{
Name = "分类1",
Products = new List<Product>()
{
new Product { Name = "产品1" },
new Product { Name = "产品2" },
new Product { Name = "产品3" }
}
};
Category category2 = new Category
{
Name = "分类2",
Products = new List<Product>()
{
new Product { Name = "产品4" },
new Product { Name = "产品5" },
new Product { Name = "产品6" }
}
};
categories.Add(category1);
categories.Add(category2);
return categories;
}
上記コードを使用すると、Repeaterコントロールは、データ構造に基づいて入れ子表示します。まずカテゴリ名を表示し、各カテゴリの下に商品名を表示します。これにより階層的にデータを表示する機能が実現されます。