コメント
コメントの投稿
※名前とタイトルが入力されていないコメントでは他のコメントとの区別ができません。
入力されていないコメントには返信しませんのであらかじめご了承くださいませ。
多階層構造のリピーターコントロールにデータバインドする方法 -How to bind multilayer dataset to repeater- | asp.net
- 2019/02/17
- 01:56
今回は asp.net の サーバーコントロール Repeater において 親子関係を保持する多階層構造を表現する方法についてご紹介いたします。
GrapeCity の SPREAD ではバインドするだけで容易に多階層構造を表現することができましたが、asp.net の通常の Repeater コントロールでは少し設定をしないと多階層の表現をすることはできませんでした。
前提条件
・Windows 7 Professional 以降 / Windows Server 2008 R2 以降
・Visual Studio 2010 Professional 以降
・VB.NET
・.Net Framework 4.0 以降
１．DataSet の構成方法
前回の記事「データセットに複数列のリレーションを追加する方法」にて 多階層構造を表現するためのデータセットの設定方法についてご紹介していますので、ご参考ください。２．プロパティの実装
親子関係のデータビューを取得するためのプロパティを実装します。DataSetTest.vb
Option Explicit On
Option Strict On
Public Class DataSetTest
Inherits System.Web.UI.Page
Protected ReadOnly Property GetChildRelation(ByVal dataItem As Object, ByVal relation As String) As DataView
Get
Dim drv As DataRowView = DirectCast(dataItem, DataRowView)
If drv IsNot Nothing Then
Return drv.CreateChildView(relation)
Else
Return Nothing
End If
End Get
End Property
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
'以前の記事でご紹介していますので、省略します。
End Sub
End Class
３．Repeater の実装方法
Repeater の内部にさらに Repeater を追加していき、親子孫の多階層構造となる多段 Repeater を実装します。リピーターには以下のデータソース設定を追加することが必要なポイントとなります。
DataSource='<%# GetChildRelation(Container.DataItem, "リレーション名")%>'
DataSetTest.aspx
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="DataSetTest.aspx.vb" Inherits="AspNetTest.DataSetTest" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>DataSetTest</title>
<link rel="stylesheet" type="text/css" href="~/Styles/Style.css" media="all" />
<script src="Scripts/jquery-1.10.2.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<%-- 親階層 --%>
<asp:Repeater ID="rptLargeCategory" runat="server">
<ItemTemplate>
<ul>
<li>
<asp:Label ID="lblCode" runat="server" Text='<%# Eval("LargeCode") %>' />
:
<asp:Label ID="lblName" runat="server" Text='<%# Eval("LargeName") %>' />
</li>
<%-- 子階層 --%>
<asp:Repeater ID="rptMiddleCategory" runat="server" DataSource='<%# GetChildRelation(Container.DataItem, "Category_Large-Middle")%>'>
<ItemTemplate>
<ul>
<li>
<asp:Label ID="lblCode" runat="server" Text='<%# Eval("MiddleCode") %>' />
:
<asp:Label ID="lblName" runat="server" Text='<%# Eval("MiddleName") %>' />
</li>
<%-- 孫階層 --%>
<asp:Repeater ID="rptSmallCategory" runat="server" DataSource='<%# GetChildRelation(Container.DataItem, "Category_Middle-Small")%>'>
<ItemTemplate>
<ul>
<li>
<asp:Label ID="lblCode" runat="server" Text='<%# Eval("SmallCode") %>' />
:
<asp:Label ID="lblName" runat="server" Text='<%# Eval("SmallName") %>' />
</li>
</ul>
</ItemTemplate>
</asp:Repeater>
</ul>
</ItemTemplate>
</asp:Repeater>
</ul>
</ItemTemplate>
</asp:Repeater>
</div>
</form>
</body>
</html>
以上で 多階層構造のリピーターコントロールにデータバインドできます。
最後までお読みいただきありがとうございます。
いかがでしたでしょうか。他にも asp.net に関連する記事を投稿しておりますのでよろしければご参考くださいませ。
- 関連記事
-
- テーマを設定してCSSやJSを動的に変更する方法 -How to use Theme- | asp.net
- リピーターの明細毎のデータを取得・更新する方法 -How to get the dataitem value of all rows in repeater- | asp.net
- 多階層構造のリピーターコントロールにデータバインドする方法 -How to bind multilayer dataset to repeater- | asp.net
- span タグを出力しない ラジオボタン の作成方法 -RadioButton & CheckBox without span- | asp.net
- ボタンのテキストを改行させる方法 | asp.net
