Repeater Web サーバー コントロール
リストに表示する各項目に、指定したテンプレートを繰り返し適用することによって、レイアウトをカスタマイズできるデータ連結リスト コントロールを作成します。
<asp:Repeaterid="Repeater1" DataSource="<% databindingexpression %>" runat=server> <HeaderTemplate> Header template HTML </HeaderTemplate> <ItemTemplate>Item template HTML </ItemTemplate> <AlternatingItemTemplate> Alternating item template HTML </AlternatingItemTemplate> <SeparatorTemplate> Separator template HTML </SeparatorTemplate> <FooterTemplate> Footer template HTML </FooterTemplate><asp:Repeater>
解説
Repeater コントロールを使用して、テンプレートを指定した基本的なデータ連結リストを作成します。Repeater コントロールには、組み込みのレイアウトやスタイルがありません。すべての HTML レイアウト、書式指定、およびスタイル タグをコントロールのテンプレート内で明示的に宣言する必要があります。
Repeater コントロールは、他のデータ リスト コントロールとは異なり、テンプレート内に HTML フラグメントを配置できます。これによって、テーブルなどの複雑な HTML 構造を作成できます。たとえば、HTML テーブルの中にリストを作成するには、まず HeaderTemplate に <table> タグを挿入してテーブルを作成します。次に、ItemTemplate に <tr> タグ、<td> タグ、およびデータ連結項目を挿入し、テーブルの行と列を作成します。テーブル内の項目の外観を交互に変更するには、内容は ItemTemplate と同じで、違うスタイルを指定した AlternatingItemTemplate を作成します。最後に、FooterTemplate に </table> タグを挿入して、テーブルを完成させます。
Repeater コントロールの各種テンプレートを次の表に一覧表示します。
| テンプレート | 説明 |
|---|---|
| AlternatingItemTemplate | ItemTemplate 要素に似ていますが、Repeater コントロール内の 1 行おきの行 (交互の項目) に適用されます。スタイル プロパティを設定して、AlternatingItemTemplate 要素に別の外観を指定できます。 |
| FooterTemplate | すべてのデータ連結行が表示された後で 1 回だけ表示される要素。一般的には、</table> などにより、HeaderTemplate 項目で開かれた要素を閉じるために使用します。
メモ FooterTemplate はデータに連結できません。 |
| HeaderTemplate | データ連結行を表示する前に 1 回だけ表示される要素。一般的には、テーブルなどのコンテナ要素を開始します。
メモ HeaderTemplate 項目はデータに連結できません。 |
| ItemTemplate | データ ソースの行ごとに 1 回表示される要素。ItemTemplate でデータを表示するには、1 つ以上の Web サーバー コントロールを宣言し、それらのデータ連結式を、Repeater コントロール (コンテナ コントロール) の DataSource のフィールドに評価されるように設定します。名前が含まれているフィールドを Label コントロールに表示する宣言の例を次に示します。
|
| SeparatorTemplate | 行間に表示される要素。一般的には、改行 (<br> タグ)、水平線 (<hr> タグ) などです。
メモ SeparatorTemplate 項目はデータに連結できません。 |
Repeater コントロールには、選択機能や編集機能は組み込まれていません。コントロールの ItemCommand イベントのハンドラを作成して、テンプレートからコントロールに送信されるコントロール イベントを処理できます。
Item テンプレートと AlternatingItem テンプレートは、コントロールの DataSource プロパティで参照されるデータ構造に連結されます。Header、Footer、Separator の各テンプレートは、データに連結できません。Repeater コントロールの DataSource プロパティが設定されているのにデータが返されなかった場合は、コントロールには Header テンプレートと Footer テンプレートだけが表示され、項目は表示されません。DataSource プロパティが設定されていない場合、Repeater コントロールは表示されません。
注意 テキストは、Repeater コントロールに表示される前には HTML エンコードされません。これにより、テキストの HTML タグ内にスクリプトを埋め込むことができるようになります。コントロールの値がユーザーによって入力された場合は、セキュリティの脆弱性への対策として、入力された値を必ず検証してください。
Repeater Web サーバー コントロールのプロパティとイベントの詳細については、Repeater クラスのドキュメントを参照してください。
例
Repeater コントロールを使用して、データ ソースの項目を表示する方法を次の例に示します。
<%@ Page Language="VB" AutoEventWireup="True" %>
<html>
<head>
<script runat="server">
Sub Page_Load(Sender As Object, e As EventArgs)
If Not IsPostBack Then
Dim values As New ArrayList()
values.Add(New PositionData("Microsoft", "Msft"))
values.Add(New PositionData("Intel", "Intc"))
values.Add(New PositionData("Dell", "Dell"))
Repeater1.DataSource = values
Repeater1.DataBind()
Repeater2.DataSource = values
Repeater2.DataBind()
End If
End Sub
Public Class PositionData
Private myName As String
Private myTicker As String
Public Sub New(newName As String, newTicker As String)
Me.myName = newName
Me.myTicker = newTicker
End Sub
Public ReadOnly Property Name() As String
Get
Return myName
End Get
End Property
Public ReadOnly Property Ticker() As String
Get
Return myTicker
End Get
End Property
End Class
</script>
</head>
<body>
<form runat="server">
<h3>Repeater Example</h3>
<b>Repeater1:</b>
<p>
<asp:Repeater id=Repeater1 runat="server">
<HeaderTemplate>
<table border=1>
<tr>
<td><b>Company</b></td>
<td><b>Symbol</b></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "Name") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "Ticker") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<p>
<b>Repeater2:</b>
<p>
<asp:Repeater id=Repeater2 runat="server">
<HeaderTemplate>
Company data:
</HeaderTemplate>
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "Name") %>
(<%# DataBinder.Eval(Container.DataItem, "Ticker") %>)
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
</form>
</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<html>
<head>
<script runat="server">
void Page_Load(Object Sender, EventArgs e)
{
if (!IsPostBack)
{
ArrayList values = new ArrayList();
values.Add(new PositionData("Microsoft", "Msft"));
values.Add(new PositionData("Intel", "Intc"));
values.Add(new PositionData("Dell", "Dell"));
Repeater1.DataSource = values;
Repeater1.DataBind();
Repeater2.DataSource = values;
Repeater2.DataBind();
}
}
public class PositionData
{
private string name;
private string ticker;
public PositionData(string name, string ticker)
{
this.name = name;
this.ticker = ticker;
}
public string Name
{
get
{
return name;
}
}
public string Ticker
{
get
{
return ticker;
}
}
}
</script>
</head>
<body>
<form runat="server">
<h3>Repeater Example</h3>
<b>Repeater1:</b>
<p>
<asp:Repeater id=Repeater1 runat="server">
<HeaderTemplate>
<table border=1>
<tr>
<td><b>Company</b></td>
<td><b>Symbol</b></td>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr>
<td>
<%# DataBinder.Eval(Container.DataItem, "Name") %>
</td>
<td>
<%# DataBinder.Eval(Container.DataItem, "Ticker") %>
</td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
<p>
<b>Repeater2:</b>
<p>
<asp:Repeater id=Repeater2 runat="server">
<HeaderTemplate>
Company data:
</HeaderTemplate>
<ItemTemplate>
<%# DataBinder.Eval(Container.DataItem, "Name") %>
(<%# DataBinder.Eval(Container.DataItem, "Ticker") %>)
</ItemTemplate>
<SeparatorTemplate>
,
</SeparatorTemplate>
</asp:Repeater>
</form>
</body>
</html>