ASP.NET - Control DataList

El control DataList, similar al control Repeater, se utiliza para mostrar listas repetitivas de elementos limitadas por el control. Sin embargo, el control DataList agrega por defecto una tabla a los elementos de datos.

Ejemplo

Control DataList
Control DataList con estilo
Control DataList con <AlternatingItemTemplate>

Vincular DataSet al control DataList

El control DataList, similar al control Repeater, se utiliza para mostrar listas repetitivas de elementos limitadas por el control. Sin embargo, el control DataList agrega por defecto una tabla a los elementos de datos. El control DataList puede estar vinculado a tablas de bases de datos, archivos XML u otras listas de elementos. Aquí, mostraremos cómo vincular un archivo XML a un control DataList.

Vamos a usar el siguiente archivo XML en el ejemplo ("cdcatalog.xml"):

<?xml version="1.0" encoding="ISO-8859-1"?>
<catalog>
<cd>
  <title>Empire Burlesque</title>
  <artist>Bob Dylan</artist>
  <country>USA</country>
  <company>Columbia</company>
  <price>10.90</price>
  <year>1985</year>
</cd>
<cd>
  <title>Hide your heart</title>
  <artist>Bonnie Tyler</artist>
  <country>UK</country>
  <company>CBS Records</company>
  <price>9.90</price>
  <year>1988</year>
</cd>
<cd>
  <title>Greatest Hits</title>
  <artist>Dolly Parton</artist>
  <country>USA</country>
  <company>RCA</company>
  <price>9.90</price>
  <year>1982</year>
</cd>
<cd>
  <title>Still got the blues</title>
  <artist>Gary Moore</artist>
  <country>UK</country>
  <company>Virgin records</company>
  <price>10.20</price>
  <year>1990</year>
</cd>
<cd>
  <title>Eros</title>
  <artist>Eros Ramazzotti</artist>
  <country>EU</country>
  <company>BMG</company>
  <price>9.90</price>
  <year>1997</year>
</cd>
</catalog>

Por favor, revise este archivo XML:cdcatalog.xml

Primero, importa el espacio de nombres "System.Data" . Necesitamos este espacio de nombres para trabajar con el objeto DataSet. Incluye la siguiente instrucción en la parte superior de la página .aspx:

<%@ Import Namespace="System.Data" %>

A continuación, crea un DataSet para este archivo XML y carga este archivo XML en el DataSet cuando la página se carga por primera vez:

<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
end if
end sub

Luego creamos un control DataList en la página .aspx. El contenido del elemento <HeaderTemplate> solo aparece una vez en la salida, mientras que el contenido del elemento <ItemTemplate> se repite según el "record" del DataSet, y finalmente, el contenido del <FooterTemplate> solo aparece una vez en la salida:

<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog" runat="server">
<HeaderTemplate>
...
</HeaderTemplate>
<ItemTemplate>
...
</ItemTemplate>
<FooterTemplate>
...
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Luego agregamos el script que crea el DataSet y lo vinculamos al control DataList mycdcatalog. También usamos estos elementos para llenar el control DataList: el <HeaderTemplate> que contiene la cabecera, el <ItemTemplate> que contiene los elementos a mostrar y el <FooterTemplate> que contiene el texto. Nota que el atributo gridlines del DataList se ha configurado como "both" para mostrar los bordes de la tabla:

<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
  cdcatalog.DataSource=mycdcatalog
  cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog">
gridlines="both" runat="server">
<HeaderTemplate>
Mi Catálogo de CD
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" de
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<FooterTemplate>
Copyright codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Mostrar este ejemplo

Usa estilos

También puedes agregar estilos al control DataList para que sea más elegante:

<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
  dim mycdcatalog=New DataSet
  mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
  cdcatalog.DataSource=mycdcatalog
  cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog">
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-name="Verdana"
headerstyle-font-size="12pt"
headerstyle-horizontalalign="center"
headerstyle-font-bold="true"
itemstyle-backcolor="#778899"
itemstyle-forecolor="#ffffff"
footerstyle-font-size="9pt"
footerstyle-font-italic="true"
<HeaderTemplate>
Mi Catálogo de CD
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" de
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<FooterTemplate>
Copyright codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Mostrar este ejemplo

Usa <AlternatingItemTemplate>

Puedes agregar el elemento <AlternatingItemTemplate> después del elemento <ItemTemplate> para describir el aspecto de las filas alternas. Puedes aplicar estilos a la sección <AlternatingItemTemplate> interna del control DataList:

<%@ Import Namespace="System.Data" %>
<script runat="server">
sub Page_Load
if Not Page.IsPostBack then
dim mycdcatalog=New DataSet
mycdcatalog.ReadXml(MapPath("cdcatalog.xml"))
cdcatalog.DataSource=mycdcatalog
cdcatalog.DataBind()
end if
end sub
</script>
<html>
<body>
<form runat="server">
<asp:DataList id="cdcatalog">
runat="server"
cellpadding="2"
cellspacing="2"
borderstyle="inset"
backcolor="#e8e8e8"
width="100%"
headerstyle-font-name="Verdana"
headerstyle-font-size="12pt"
headerstyle-horizontalalign="center"
headerstyle-font-bold="True"
itemstyle-backcolor="#778899"
itemstyle-forecolor="#ffffff"
alternatingitemstyle-backcolor="#e8e8e8"
alternatingitemstyle-forecolor="#000000"
footerstyle-font-size="9pt"
footerstyle-font-italic="True">
<HeaderTemplate>
Mi Catálogo de CD
</HeaderTemplate>
<ItemTemplate>
"<%#Container.DataItem("title")%>" de
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</ItemTemplate>
<AlternatingItemTemplate>
"<%#Container.DataItem("title")%>" de
<%#Container.DataItem("artist")%> -
$<%#Container.DataItem("price")%>
</AlternatingItemTemplate>
<FooterTemplate>
© codew3c.com
</FooterTemplate>
</asp:DataList>
</form>
</body>
</html>

Mostrar este ejemplo