Sintaxis declarativa del control de servidor Web DataList
Actualización: noviembre 2007
Muestra los elementos de un origen de datos mediante plantillas. Para personalizar la apariencia y el contenido del control, manipule las plantillas que forman los diferentes componentes del control DataList, como ItemTemplate y HeaderTemplate.
<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>
Comentarios
El diseño y el contenido del control se pueden manipular mediante la definición de plantillas. En la siguiente tabla se recogen las diferentes plantillas para el control DataList.
Es similar al elemento ItemTemplate, pero se representa para cada dos filas (filas alternas) en el control DataList. Se puede especificar otra apariencia para el elemento AlternatingItemTemplate estableciendo el valor de sus propiedades de estilo. |
|
Diseño de un elemento cuando está en modo de edición. Esta plantilla suele contener controles de edición, como controles TextBox. Se invoca EditItemTemplate para una fila del control DataList cuando EditItemIndex tiene como valor el número ordinal de dicha fila. |
|
Texto y controles que se van a representar en la parte inferior (pie) del control DataList. FooterTemplate no se puede enlazar a datos. |
|
Texto y controles que se van a representar en la parte superior (encabezado) del control DataList. HeaderTemplate no se puede enlazar a datos. |
|
Elementos que se van a representar una vez para cada fila del origen de datos. |
|
Elementos que se van a representar cuando el usuario seleccione un elemento del control DataList. Se utiliza normalmente para aumentar el número de campos de datos que se muestran y marcar visualmente la fila resaltándola. |
|
Elementos que se van a representar entre cada elemento. Los elementos de SeparatorTemplate no se pueden enlazar a datos. |
Se puede personalizar la apariencia del control DataList especificando un estilo para las diferentes partes del control. La siguiente tabla recoge las propiedades de estilo que controlan la apariencia de las diferentes partes del control DataList.
Propiedad de estilo |
Descripción |
Clase de estilo |
|---|---|---|
Estilo de cada dos elementos (elementos alternos). |
||
Estilo del elemento que se está editando. |
||
Estilo del pie de página al final de la lista (si existe). |
||
Estilo del encabezado al principio de la lista (si existe). |
||
Estilo de elementos individuales. |
||
Estilo del elemento seleccionado. |
||
Estilo del separador entre cada elemento. |
Nota
El control DataList se diferencia del control Repeater ya que admite la representación direccional (mediante las propiedades RepeatColumns y RepeatDirection) así como la opción de representación en una tabla HTML.
La colección Items contiene los miembros enlazados a datos del control DataList. La colección se rellena cuando se llama al método DataBind en el control DataList. Primero se agrega el encabezado (si lo hay) y, a continuación, un objeto Item por cada fila de datos. Si existe una plantilla SeparatorTemplate, se crean Separators y se agregan entre cada elemento, pero no se agregan a la colección Items.
Una vez creados todos los elementos de las filas en el DataSource, se agrega el Footer al control (pero no a la colección Items). Por último, el control provoca el evento ItemCreated para cada elemento, incluidos el encabezado, el pie y los separadores. A diferencia de la mayoría de las colecciones, la colección Items no expone el método Add o Remove. No obstante, se puede modificar el contenido de un elemento proporcionando un controlador para el evento ItemCreated.
.gif "Nota de precaución") Precaución: |
|---|
El texto no contiene código HTML antes de mostrarse en el control DataList. Esto permite incrustar una secuencia de comandos en las etiquetas HTML del texto. Si los valores del control provienen de la entrada del usuario, asegúrese de validar los valores para ayudar a evitar puntos vulnerables en la seguridad. |
Para obtener más información sobre los eventos y propiedades del control de servidor Web DataList, consulte la documentación referente a la clase DataList.
Ejemplo
En el siguiente ejemplo se muestra cómo usar un control DataList para mostrar los elementos de un origen de datos.
<%@ 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>