업데이트: 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 컨트롤에서 하나씩 건너뛰어 교대로 반복되는 행에 대해 렌더링됩니다. 이 템플릿의 스타일 속성을 설정하여 AlternatingItemTemplate 요소의 모양을 다르게 지정할 수 있습니다. |
|
편집 모드로 설정되어 있을 때 항목의 레이아웃입니다. 일반적으로 이 템플릿에는 TextBox 컨트롤과 같은 편집 컨트롤이 포함되어 있습니다. DataList 컨트롤에서 EditItemIndex를 행의 순서를 나타내는 서수로 설정하면 해당 행에 대해 EditItemTemplate이 호출됩니다. |
|
DataList 컨트롤의 아래쪽에 렌더링되는 텍스트와 컨트롤입니다(바닥글). FooterTemplate에서는 데이터를 바인딩할 수 없습니다. |
|
DataList 컨트롤의 위쪽에 렌더링되는 텍스트와 컨트롤입니다(머리글). HeaderTemplate에서는 데이터를 바인딩할 수 없습니다. |
|
데이터 소스의 각 행에 대해 한 번 렌더링되는 요소입니다. |
|
사용자가 DataList 컨트롤에서 항목을 선택하는 경우 렌더링되는 요소입니다. 대개 표시할 데이터 필드 수를 늘리고 행을 시각적으로 강조 표시하는 데 사용합니다. |
|
각 항목 사이에 렌더링하는 요소입니다. SeparatorTemplate 항목에서는 데이터를 바인딩할 수 없습니다. |
DataList 컨트롤의 다양한 부분에 스타일을 지정하여 이 컨트롤의 모양을 사용자 지정할 수 있습니다. 다음 표에서는 다양한 DataList 컨트롤 부분의 모양을 제어하는 스타일 속성을 보여 줍니다.
스타일 속성 |
설명 |
스타일 클래스 |
|---|---|---|
한 항목씩 건너뛰어 모든 항목(교대 항목)에 적용되는 스타일 |
||
편집 중인 항목의 스타일 |
||
목록 끝에 바닥글이 있을 경우, 바닥글의 스타일 |
||
목록 시작 부분에 머리글이 있을 경우, 머리글의 스타일 |
||
개별 항목의 스타일 |
||
선택된 항목의 스타일 |
||
각 항목 사이의 구분 기호에 대한 스타일 |
참고
DataList 컨트롤은 Repeater 컨트롤과 달리 RepeatColumns 및 RepeatDirection 속성을 사용하여 방향 렌더링을 지원하고 HTML 표 내에서 렌더링할 수 있습니다.
Items 컬렉션에는 DataList 컨트롤의 데이터 바인딩된 멤버가 포함되어 있습니다. DataList 컨트롤에서 DataBind 메서드가 호출되면 이 컬렉션이 채워집니다. 머리글이 있으면 먼저 머리글이 추가된 다음 각 데이터 행에 대해 Item 개체가 하나씩 추가됩니다. SeparatorTemplate이 있는 경우 Separators가 만들어지고 각 항목 사이에 추가되지만 Items 컬렉션에는 이러한 개체가 추가되지 않습니다.
DataSource의 행에 대해 모든 항목이 만들어진 후에는 Footer가 컨트롤에 추가되지만 Items 컬렉션에는 추가되지 않습니다. 마지막으로 머리글, 바닥글 및 구분 기호를 포함하여 각 항목에 대해 컨트롤에서 ItemCreated 이벤트를 발생시킵니다. 대부분의 컬렉션과 달리 Items 컬렉션에서는 Add 또는 Remove 메서드를 노출하지 않습니다. 그러나 ItemCreated 이벤트에 대한 처리기를 제공하여 항목의 내용을 수정할 수 있습니다.
경고
텍스트는 DataList 컨트롤에 표시된 후에 HTML로 인코딩됩니다. 따라서 텍스트의 HTML 태그 내에 스크립트를 포함시킬 수 있습니다. 컨트롤 값을 사용자 입력에서 가져온 경우 값이 유효한지 확인하여 보안상의 허점을 방지합니다.
DataList 웹 서버 컨트롤의 속성과 이벤트에 대한 자세한 내용은 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>