DataList Web サーバー コントロールの宣言構文
更新 : 2007 年 11 月
データ ソースの項目をテンプレートを使用して表示します。ItemTemplate や HeaderTemplate など、DataList コントロールのさまざまなコンポーネントを構成するテンプレートを操作することによって、このコントロールの外観および内容をカスタマイズできます。
<asp:DataList
AccessKey="string"
BackColor="color name|#dddddd"
BorderColor="color name|#dddddd"
BorderStyle="NotSet|None|Dotted|Dashed|Solid|Double|Groove|Ridge|
Inset|Outset"
BorderWidth="size"
Caption="string"
CaptionAlign="NotSet|Top|Bottom|Left|Right"
CellPadding="integer"
CellSpacing="integer"
CssClass="string"
DataKeyField="string"
DataMember="string"
DataSource="string"
DataSourceID="string"
EditItemIndex="integer"
Enabled="True|False"
EnableTheming="True|False"
EnableViewState="True|False"
ExtractTemplateRows="True|False"
Font-Bold="True|False"
Font-Italic="True|False"
Font-Names="string"
Font-Overline="True|False"
Font-Size="string|Smaller|Larger|XX-Small|X-Small|Small|Medium|
Large|X-Large|XX-Large"
Font-Strikeout="True|False"
Font-Underline="True|False"
ForeColor="color name|#dddddd"
GridLines="None|Horizontal|Vertical|Both"
Height="size"
HorizontalAlign="NotSet|Left|Center|Right|Justify"
ID="string"
OnCancelCommand="CancelCommand event handler"
OnDataBinding="DataBinding event handler"
OnDeleteCommand="DeleteCommand event handler"
OnDisposed="Disposed event handler"
OnEditCommand="EditCommand event handler"
OnInit="Init event handler"
OnItemCommand="ItemCommand event handler"
OnItemCreated="ItemCreated event handler"
OnItemDataBound="ItemDataBound event handler"
OnLoad="Load event handler"
OnPreRender="PreRender event handler"
OnSelectedIndexChanged="SelectedIndexChanged event handler"
OnUnload="Unload event handler"
OnUpdateCommand="UpdateCommand event handler"
RepeatColumns="integer"
RepeatDirection="Horizontal|Vertical"
RepeatLayout="Table|Flow"
runat="server"
SelectedIndex="integer"
ShowFooter="True|False"
ShowHeader="True|False"
SkinID="string"
Style="string"
TabIndex="integer"
ToolTip="string"
UseAccessibleHeader="True|False"
Visible="True|False"
Width="size"
>
<AlternatingItemStyle />
<AlternatingItemTemplate>
<!-- child controls -->
</AlternatingItemTemplate>
<EditItemStyle />
<EditItemTemplate>
<!-- child controls -->
</EditItemTemplate>
<FooterStyle />
<FooterTemplate>
<!-- child controls -->
</FooterTemplate>
<HeaderStyle />
<HeaderTemplate>
<!-- child controls -->
</HeaderTemplate>
<ItemStyle />
<ItemTemplate>
<!-- child controls -->
</ItemTemplate>
<SelectedItemStyle />
<SelectedItemTemplate>
<!-- child controls -->
</SelectedItemTemplate>
<SeparatorStyle />
<SeparatorTemplate>
<!-- child controls -->
</SeparatorTemplate>
</asp:DataList>
解説
テンプレートを定義することによって、コントロールのレイアウトと内容を操作できます。DataList コントロールの各種テンプレートを次の表に一覧表示します。
ItemTemplate 要素に似ていますが、DataList コントロール内の 1 行おきの行 (交互の項目) に適用されます。スタイル プロパティを設定して、AlternatingItemTemplate 要素に別の外観を指定できます。 |
|
編集モードに設定されている項目のレイアウト。このテンプレートには、通常、編集コントロール (TextBox コントロールなど) が含まれています。EditItemTemplate は、EditItemIndex に DataList コントロールの行の序数が設定されたときに、その行に対して呼び出されます。 |
|
DataList コントロールの下端に表示されるテキストおよびコントロール (フッター)。 FooterTemplate はデータにバインドできません。 |
|
DataList コントロールの上端に表示されるテキストおよびコントロール (ヘッダー)。 HeaderTemplate はデータにバインドできません。 |
|
データ ソースの行ごとに 1 回表示される要素。 |
|
ユーザーが DataList コントロールの項目を選択したときに表示される要素。通常、表示するデータ フィールドの数を増やし、行を強調表示するために使用されます。 |
|
各項目の間に表示される要素。 SeparatorTemplate 項目はデータにバインドできません。 |
コントロールのさまざまな部分のスタイル プロパティを設定することによって、DataList コントロールの外観をカスタマイズできます。DataList コントロールのさまざまな部分の外観を制御するスタイル プロパティを次の表に一覧表示します。
スタイル プロパティ |
説明 |
スタイル クラス |
|---|---|---|
1 つおきの項目 (交互の項目) のスタイル。 |
||
編集中の項目のスタイル。 |
||
リストの末尾のフッターのスタイル (フッターがある場合)。 |
||
リストの先頭のヘッダーのスタイル (ヘッダーがある場合)。 |
||
個別の項目のスタイル。 |
||
選択されている項目のスタイル。 |
||
各項目間の区分線のスタイル。 |
.gif "メモ") メモ : |
|---|
DataList コントロールは Repeater コントロールとは異なり、RepeatColumns プロパティと RepeatDirection プロパティを使用した表示方向の指定や、HTML テーブル内に表示するためのオプションをサポートしています。 |
Items コレクションには、DataList コントロールのデータ バインド メンバが含まれています。このコレクションには、DataBind コントロールに対して DataList メソッドが呼び出されたときにメンバが読み込まれます。ヘッダーがある場合はまずヘッダーが追加され、次にデータ行ごとに 1 つの Item オブジェクトが追加されます。SeparatorTemplate が存在する場合、Separators が作成されて、各項目の間に追加されますが、これらは Items コレクションには追加されません。
DataSource の行に対してすべての項目が作成されたら、Footer がコントロールに追加されます (Items コレクションには追加されません)。最後に、各項目に対して ItemCreated イベントが発生します。この項目には、ヘッダー、フッター、および区分線も含まれます。ほとんどのコレクションとは異なり、Items コレクションは Add メソッドおよび Remove メソッドを公開しません。ただし、項目の内容は、ItemCreated イベントのハンドラを作成することで変更できます。
.gif "Caution メモ") 注意 : |
|---|
テキストは、DataList コントロールに表示される前には HTML エンコードされません。これにより、テキストの HTML タグ内にスクリプトを埋め込むことができるようになります。コントロールの値がユーザーによって入力された場合は、セキュリティの脆弱性への対策として、入力された値を必ず検証してください。 |
DataList Web サーバー コントロールのプロパティとイベントの詳細については、DataList クラスのドキュメントを参照してください。
使用例
DataList コントロールを使用して、データ ソースの項目を表示する方法の例を次に示します。
<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script runat="server">
Function CreateDataSource() As ICollection
' Create sample data for the DataList control.
Dim dt As DataTable = New DataTable()
dim dr As DataRow
' Define the columns of the table.
dt.Columns.Add(New DataColumn("IntegerValue", GetType(Int32)))
dt.Columns.Add(New DataColumn("StringValue", GetType(String)))
dt.Columns.Add(New DataColumn("CurrencyValue", GetType(Double)))
dt.Columns.Add(New DataColumn("ImageValue", GetType(String)))
' Populate the table with sample values.
Dim i As Integer
For i = 0 To 8
dr = dt.NewRow()
dr(0) = i
dr(1) = "Description for item " & i.ToString()
dr(2) = 1.23 * (i + 1)
dr(3) = "Image" & i.ToString() & ".jpg"
dt.Rows.Add(dr)
Next i
Dim dv As DataView = New DataView(dt)
Return dv
End Function
Sub Page_Load(sender As Object, e As EventArgs)
' Load sample data only once, when the page is first loaded.
If Not IsPostBack Then
ItemsList.DataSource = CreateDataSource()
ItemsList.DataBind()
End If
End Sub
</script>
<head runat="server">
<title>DataList Example</title>
</head>
<body>
<form id="form1" runat="server">
<h3>DataList Example</h3>
<asp:DataList id="ItemsList"
BorderColor="black"
CellPadding="5"
CellSpacing="5"
RepeatDirection="Vertical"
RepeatLayout="Table"
RepeatColumns="3"
runat="server">
<HeaderStyle BackColor="#aaaadd">
</HeaderStyle>
<AlternatingItemStyle BackColor="Gainsboro">
</AlternatingItemStyle>
<HeaderTemplate>
List of items
</HeaderTemplate>
<ItemTemplate>
Description: <br />
<%# DataBinder.Eval(Container.DataItem, "StringValue") %>
<br />
Price: <%# DataBinder.Eval(Container.DataItem, "CurrencyValue", "{0:c}") %>
<br />
<asp:Image id="ProductImage" AlternateText="Product picture"
ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ImageValue") %>'
runat="server"/>
</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<script runat="server">
ICollection CreateDataSource()
{
// Create sample data for the DataList control.
DataTable dt = new DataTable();
DataRow dr;
// Define the columns of the table.
dt.Columns.Add(new DataColumn("IntegerValue", typeof(Int32)));
dt.Columns.Add(new DataColumn("StringValue", typeof(String)));
dt.Columns.Add(new DataColumn("CurrencyValue", typeof(double)));
dt.Columns.Add(new DataColumn("ImageValue", typeof(String)));
// Populate the table with sample values.
for (int i = 0; i < 9; i++)
{
dr = dt.NewRow();
dr[0] = i;
dr[1] = "Description for item " + i.ToString();
dr[2] = 1.23 * (i + 1);
dr[3] = "Image" + i.ToString() + ".jpg";
dt.Rows.Add(dr);
}
DataView dv = new DataView(dt);
return dv;
}
void Page_Load(Object sender, EventArgs e)
{
// Load sample data only once, when the page is first loaded.
if (!IsPostBack)
{
ItemsList.DataSource = CreateDataSource();
ItemsList.DataBind();
}
}
</script>
<head runat="server">
<title>DataList Example</title>
</head>
<body>
<form id="form1" runat="server">
<h3>DataList Example</h3>
<asp:DataList id="ItemsList"
BorderColor="black"
CellPadding="5"
CellSpacing="5"
RepeatDirection="Vertical"
RepeatLayout="Table"
RepeatColumns="3"
runat="server">
<HeaderStyle BackColor="#aaaadd">
</HeaderStyle>
<AlternatingItemStyle BackColor="Gainsboro">
</AlternatingItemStyle>
<HeaderTemplate>
List of items
</HeaderTemplate>
<ItemTemplate>
Description: <br />
<%# DataBinder.Eval(Container.DataItem, "StringValue") %>
<br />
Price: <%# DataBinder.Eval(Container.DataItem, "CurrencyValue", "{0:c}") %>
<br />
<asp:Image id="ProductImage" AlternateText="Product picture"
ImageUrl='<%# DataBinder.Eval(Container.DataItem, "ImageValue") %>'
runat="server"/>
</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>