Unidad 4. Recurso 1. Plantillas y Data Binding

Web Forms: plantillas y Data Binding
Introducción
Como su nombre indica en este nuevo capítulo trataremos dos características que nos ofrece ASP
.NET y que se encuentran dentro del entorno de los Web Forms, se trata de las plantillas (templates) y
del mecanismo de conexión con datos o Data Binding, estas dos características están muy relacionadas
con el último tipo de controles Web, que veremos en el siguiente capítulo y que introduciremos en el
actual, se trata de los controles de lista. Comúnmente los controles de lista se utilizan en combinación
con plantillas (definen su aspecto) y Data Binding (define el origen de los datos).
La funcionalidad de Data Binding no es algo nuevo dentro del mundo de la programación en general,
ya la presentaba Visual Basic es versiones anteriores, pero si es nuevo para el mundo de la
programación de páginas ASP. Mediante este mecanismo podemos asociar unos datos con un control
del interfaz de usuario correspondiente, ASP .NET permite establecer el origen de los datos de los
controles ASP .NET ofreciendo compatibilidad con todos los navegadores.
La idea del mecanismo de Data Binding es muy sencilla, se conectan controles Web a una fuente de
datos y ASP .NET muestra la información de forma automática, es una forma muy sencilla de
organizar la información en listas, cajas de texto, grids, etc, precisamente estos controles son los
controles llamados controles Web de lista (list-bound controls).
Por otro lado el mecanismo de plantillas nos va a permitir definir el aspecto que van a mostrar los
controles de lista, ya que, como veremos a continuación, estos controles no ofrecen un aspecto
determinado, sino que debemos indicar el formato que van a tener los datos que contienen los
controles.
Desarrollo de aplicaciones para Internet con ASP .NET © Grupo EIDOS
Introducción a los controles de lista

Estos controles se encuentran especializados en mostrar listados de datos en las páginas ASP .NET,
tarea que suele ser bastante común en la mayoría de las aplicaciones ASP .NET, gracias a estos
controles, que como ya habíamos dicho, en capítulos anteriores, pertenecen al espacio de nombres
System.Web.UI.WebControls, las tareas de relacionadas con los listados de información son mucho
más sencillas, estos controles ASP .NET, en combinación con las plantillas y Data Binding, generan
de forma automática el interfaz de usuario que muestra la información permitiendo la paginación,
filtrado y otras operaciones sobre los contenidos correspondientes.
Como ya se comentó en la introducción, los controles de tipo lista se suelen utilizar en combinación
con otra nueva característica ofrecida por el entorno de los Web Forms, se trata de Data Binding, es
decir, la conexión de los datos con los controles en los que se van a mostrar, esta característica la
podemos encontrar en versiones anteriores de Visual Basic.
Existen tres controles estándar dentro de esta familia: Repeater, DataList y DataGrid.
Relacionado con los controles de lista, más estrechamente con los controles Repeater y DataList, nos
encontramos un interesante mecanismo que nos ofrece ASP .NET denominado plantillas (templates),
que nos va a permitir personalizar el aspecto de la información que vamos a mostrar, el control es
absoluto, existiendo para ello cinco tipos distintos de plantillas, que los comentaremos en detalle en el
apartado correspondiente. Estas plantillas se utilizan en combinación con los controles Web DataList y
Repeater.
A continuación se va a describir de forma muy breve cada uno de los controles de lista:
• Repeater: este control muestra elementos de datos en una lista, por sí sólo no genera una salida
visible para el usuario, para que sea visible se debe utilizar junto con las plantillas. Es el más
sencillo de los tres controles.
• DataList: similar al control anterior pero permite una mayor personalización a la hora de
mostrar la información en forma de lista. También permite la selección y edición de
elementos. También debe utilizarse junto con las plantillas.
• DataGrid: este control muestra la información en forma de tabla con celdas y columnas,
generando el código HTML equivalente a una tabla. Es el más complejo de los tres controles
de lista ofreciendo un alto grado de personalización y una serie de características muy
interesantes como pueden ser la ordenación, paginación, definición de columnas, edición, etc.
Aunque los controles de lista los vamos a utilizar en algunos ejemplos en los siguientes apartados será
en el siguiente capítulo cuando los veamos con detenimiento. En el siguiente apartado se va a
comentar el mecanismo de plantillas del que hacen uso estos controles Web.
Plantillas (templates)
La mayoría de los controles Web tienen un aspecto estándar definido, pero los controles Repeater y
DataList no ofrecen una salida sino que debemos especificar el aspecto que van a tener a través del
mecanismo de templates.
En ASP .NET podemos encontrar una serie de plantillas (templates) que nos van a permitir definir la
presentación y aspecto que van a tener los datos. Existen cinco plantillas que se pueden utilizar con los
controles Repeater y DataList y son los siguientes:
196
© Grupo EIDOS 10. Web Forms: plantillas y Data Binding
• HeaderTemplate: representa la primera línea para los datos, es decir, es la cabecera de los
datos. Un uso típico de esta plantilla es para indicar el inicio de una elemento contenedor de
información, como puede ser una tabla.
• ItemTemplate: representa cada línea de los datos, es decir, representa cada elemento o
registro. Dentro de esta plantilla se debe utilizar la sintaxis especial de Data Binding, que
veremos más adelante. En el caso de una tabla sería cada una de sus filas.
• AlternatingItemTemplate: esta plantilla se aplica a elementos alternos, y tiene la misma

funcionalidad que la anterior.
• SeparatorItemTemplate: esta plantilla permite separar cada uno de los elementos, es decir,
cada una de las líneas de datos, pueden ser saltos de línea, líneas o indicadores de fin e inicio
de columna de una fila de una tabla.
• FooterTemplate: es la última línea de salida, es decir, el pie de los datos. Normalmente suele
contener el elemento que cierra el contenedor, es decir, cierra el elemento que se ha abierto
previamente con la plantilla HeaderTemplate.
Las plantillas también se pueden utilizar con el control DataGrid, pero no directamente sino a través
de sus columnas.
Para utilizar las plantillas únicamente debemos utilizar la etiqueta con el nombre de plantilla
correspondiente, podemos utilizar cualquiera de los cinco anteriores. Entre las dos etiquetas de inicio y
finalización del elemento <NombrePlantilla> debemos indicar el código HTML que queremos que se
muestre en cada caso, para formar parte del aspecto de los datos.
A continuación vamos a ver un ejemplo de utilización de plantillas. En el Código fuente 128 se puede
ver la utilización de cuatro de las cinco plantillas comentadas a través de un control de lista Repeater.
En este caso al control Repeater se le ha asignado como origen de datos una tabla de una base de
datos, el lector no tiene porque entender todavía este código, ya que se trata de acceso a datos
mediante ADO .NET, que se verá en próximos capítulos.
<%@ Import Namespace="System.Data" %>

<%@ Import Namespace="System.Data.SqlClient" %>
<html>
<script language="C#" runat="server">
void Page_Load(Object sender, EventArgs e) {
SqlConnection conexion = new SqlConnection(
"server=angel;database=pubs;uid=sa;pwd=");
SqlDataAdapter comando = new SqlDataAdapter("select * from Titles", conexion);
DataSet ds = new DataSet();
comando.Fill(ds, "Titles");
repiteDatos.DataSource = ds.Tables["Titles"].DefaultView;
repiteDatos.DataBind();
}
</script>
<body>
<asp:Repeater id="repiteDatos" runat="server">
<HeaderTemplate>
<table width="100%" style="font: 8pt verdana">
<tr bgcolor="ff00d8">
<th>Título</th>
197
<th>Tipo</th>
<th>Precio</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<tr bgcolor="FFECD8">
<td><%# DataBinder.Eval(Container.DataItem, "title") %></td>
<td><%# DataBinder.Eval(Container.DataItem, "type") %></td>
<td align="right">
<%# DataBinder.Eval(Container.DataItem, "price", "{0:f} €") %></td>
</tr>
</ItemTemplate>
</SeparatorTemplate>
<AlternatingItemTemplate>
<tr style="background-color:FFEC00">
<td><%# DataBinder.Eval(Container.DataItem, "title") %></td>
<td><%# DataBinder.Eval(Container.DataItem, "type") %></td>
<td align="right">
<%# DataBinder.Eval(Container.DataItem, "price", "{0:f} €") %></td>
</tr>
</AlternatingItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</body>
</html>
Código fuente 128
Además de adelantar un fragmento de código que muestra el acceso a datos, mediante ADO .NET,
también se ha adelantado en este ejemplo la utilización del mecanismo de Data Binding. La forma más
sencilla de establecer el origen de los datos de un control que muestra un conjunto de datos (ListBox,
Repeater, DataGrid, etc.) es utilizar la propiedad DataSource del control correspondiente para indicar
la fuente de los datos y a continuación llamar al método DataBind() del control.
También es posible llamar al método DataBind() de la página ASP .NET, representada mediante el
objeto Page, con lo que se establecen todos lo enlaces con los datos existentes en todos los controles
de la página.
En la propiedad DataSource del control Web podemos especificar un amplio tipo de fuentes de datos:
un array, un objeto DataView de ADO .NET (como vimos en el ejemplo anterior), una expresión, etc.
Una vez establecido el origen de datos, otro aspecto que debemos tener en cuenta es la sintaxis de la
característica Data Binding, para indicar en qué lugar se mostrará cada uno de los distintos datos.
El ejemplo anterior no tiene desperdicio, ya que muestra también la sintaxis que se debe utilizar para
poder hacer uso del mecanismo de Data Binding, mediante el carácter especial almohadilla (#) y el
método Eval() de la clase DataBinder, todo esto lo veremos en mayor detalle en el apartado
correspondiente.
En la Figura 73 se puede ver el aspecto que tendría el control Repeater en combinación con las
plantillas.
198
Figura 73
El Código fuente 129 ofrece un fragmento del código HTML generado por esta página ASP .NET.
<html>
<body>
<th>Título</th>
<th>Tipo</th>
<th>Precio</th>
</tr>
<td>The Busy Executive's Database Guide</td>
<td>business </td>
<td align="right">19,90 €</td>
</tr>
<td>Cooking with Computers: Surreptitious Balance Sheets</td>
<td>business </td>
</tr>
………………………………
<td>Sushi, Anyone?</td>
<td>trad_cook </td>
</tr>
</table>
</body>
</html>
Código fuente 129
199
Una vez realizados estos comentados sobre el código de ejemplo vamos a centrarnos en el aspecto que
más nos interesa, que no es otro que la definición de plantillas. En el ejemplo se han utilizado cuatro
plantillas (<template>) distintas con el control Repeater.
Se ha utilizado una plantilla de cabecera de la información (HeaderTemplate) para definir la cabecera

de una tabla, otra de pie (FooterTemplate) para cerrar la definición de la tabla definida en la plantilla
HeaderTemplate,. Otra plantilla más para definir el aspecto de cada elemento (ItemTemplate), en este
caso se define como va a ser cada fila de la tabla y una platilla muy similar que define un aspecto para
elementos alternativos (AlternatingItemTemplate), es decir, el aspecto de las filas alternativas de la
tabla.
En el Código fuente 130 se puede observar la utilización de un objeto Repeater que utiliza el
mecanismo de plantillas y de Data Binding de una manera distinta. En este caso el origen de los datos
del control Repeater es un array de objetos String, y se ha utilizado una plantilla más, la plantilla que
indica el separador de cada elemento (SeparatorTemplate).
<%@ Page Language="c#"%>

<script language="c#" runat="server">
void Page_Load(Object objFuente,EventArgs args){
String[] datos=new String [5];
datos[0]="Bora-bora";
datos[1]="Morea";
datos[2]="Pascua";
datos[3]="Papeete";
datos[4]="Santiago de Chile";
lista.DataSource=datos;
lista.DataBind();
}
</script>
<html>
<body>
<form id="DataBindingSencillo" method="post" runat="server">
<asp:Repeater id="lista" runat="server">
<HeaderTemplate>
<h1>Destinos</h1>
</HeaderTemplate>
<ItemTemplate>
<font face="courier" size="2" color="blue">
<%#Container.DataItem%>
</font>
</ItemTemplate>
<AlternatingItemTemplate>
<font face="arial" size="2" color="green">
<%#Container.DataItem%>
</font>
</AlternatingItemTemplate>
<SeparatorTemplate>
<hr>
</SeparatorTemplate>
<FooterTemplate>
<hr><br>
<small><i>
<a href="mailto:reservas@correo.es">reservas@correo.es</a>
</i></small>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
Código fuente 130
200
En este nuevo ejemplo se ha utilizado: una plantilla HeaderTemplate para indicar el título de los
elementos que se van a mostrar; una plantilla ItemTemplate que define el tipo de letra con el que va a
aparecer cada elemento, debido a que el origen de datos es más sencillo (se trata de un array de
cadenas) se ha utilizado una sintaxis de Data Binding más sencilla que la anterior para hacer referencia
a los elementos; también aparece una platilla AlternatingItemTemplate que cambia el color y el tipo de
letra; una plantilla SeparatorTemplate que muestra una línea de separación entre cada uno de los
elementos; y por último una plantilla FooterTemplate que muestra una dirección de correo de
contacto.
En el Código fuente 131 se puede ver el código HTML que se genera al ejecutar esta página ASP
.NET.
<html>
<body>
<form name="DataBindingSencillo" method="post" action="plantillarepeaterdos.aspx"
id="DataBindingSencillo">
<input type="hidden" name="__VIEWSTATE"
value="dDwyMDA1MDYwODM7dDw7bDxpPDE+Oz47bDx0PDtsPGk8MT47PjtsPHQ8cDxsPF8hSXRlbUNvdW50
Oz47bDxpPDU+Oz4+O2w8aTwxPjtpPDM+O2k8NT47aTw3PjtpPDk+Oz47bDx0PDtsPGk8MD47PjtsPHQ8QDx
Cb3JhLWJvcmE7Pjs7Pjs+Pjt0PDtsPGk8MD47PjtsPHQ8QDxNb3JlYTs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2
w8dDxAPFBhc2N1YTs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPFBhcGVldGU7Pjs7Pjs+Pjt0PDtsPGk8M
D47PjtsPHQ8QDxTYW50aWFnbyBkZSBDaGlsZTs+Ozs+Oz4+Oz4+Oz4+Oz4+Oz4=" />
<h1>Destinos</h1>
Bora-bora
</font>
<hr>
Morea
</font>
<hr>
Pascua
</font>
<hr>
Papeete
</font>
<hr>
Santiago de Chile
</font>
<hr><br>
<small><i>
<a href="mailto:reservas@correo.es">reservas@correo.es</a>
</i></small>
</form>
</body>
</html>
Código fuente 131
En la Figura 74 se puede observar el aspecto que ofrece este control Repeater al utilizar las plantillas
comentadas.
Una vez que ya hemos visto la utilización de plantillas vamos a tratar una característica que se
encuentra muy relacionada con las mismas y que a su vez está muy relacionada con los controles de
lista, no es otra que la característica de Data Binding o de conexión con los datos que ofrece la
tecnología ASP .NET.
201
Figura 74
Data Binding
Ya hemos adelantado a lo largo del capítulo algunos de los aspectos del mecanismo de Data Binding
que ofrece ASP .NET, pero en este apartado lo vamos a ver con un mayor detenimiento y también se
ofrecerán varios ejemplos ilustrativos.
El mecanismo de Data Binding (conexión con los datos o enlace con los datos) es una nueva facilidad
que ofrece ASP .NET, pero que debe ser familiar para los lectores que conozcan el entorno de
desarrollo de Visual Basic. Mediante este mecanismo podemos asociar unos datos con un control del
interfaz de usuario correspondiente definido dentro de un Web Form.
ASP .NET permite establecer el origen de los datos de los controles ASP .NET ofreciendo
compatibilidad con todos los navegadores.
La idea del mecanismo de Data Binding es muy sencilla, se conectan controles Web a una fuente de
datos y ASP .NET muestra la información de forma automática, es una forma muy sencilla de
organizar la información en listas, cajas de texto, grids, párrafos, etc.
La forma más sencilla de establecer el origen de los datos de un control que muestra un conjunto de
datos (ListBox, Repeater, DataGrid, etc.) es utilizar la propiedad DataSource del control
correspondiente para indicar la fuente de los datos y a continuación llamar al método DataBind() del
control. También es posible llamar al método DataBind() de la página ASP.NET, con lo que se
establecen todos lo enlaces con los datos existentes en todos los controles de la página.
En la propiedad DataSource del control Web podemos especificar un amplio tipo de fuentes de datos:
un array, un objeto DataView de ADO .NET (como vimos en el apartado anterior), una expresión, un
array, el resultado de un método, una propiedad, etc.
202
La sintaxis general para las expresiones de Data Binding se puede observar en el Código fuente 132,
dónde se ofrecen dos escenarios, la asignación de una expresión Data Binding a una propiedad de un
control Web y también un segundo escenario en el que se muestra la expresión de Data Binding en
cualquier lugar de la página ASP .NET que deseemos.
<asp:ControlWeb propiedad=”<%# expresión Data Bindging %>” runat=”server” />

Texto literal en la página: <%# expresión Data Binding %>
Código fuente 132
Los lectores familiarizados con versiones anteriores de ASP, habrán comprobado que la sintaxis del
mecanismo de Data Binding es muy similar a la sintaxis abreviada <%= %>, que se correspondía en
ASP (y sigue correspondiendo a lo mismo en ASP .NET) a la instrucción Response.Write.
Sin embargo el comportamiento de la nueva sintaxis <%# %> es bastante diferente, mientras que la
sintaxis abreviado de la instrucción Response.Write se evaluaba mientras la página era procesada, la
sintaxis de Data Binding de ASP .NET se evalúa sólo cuando el método DataBing() correspondiente
es invocado.
ASP .NET ofrece una sintaxis muy flexible para establecer el mecanismo de Data Binding mediante
los delimitadores <%# %>, a continuación se ofrece un esbozo de una serie de ejemplos que
demuestran la utilización de esta sintaxis en distintas situaciones:
• Se utiliza una propiedad como origen de datos: Cliente <%# IDCliente %>.
• Una colección: <asp:ListBox id=”lista” datasource=”<%# miArray %>” runat=”server”>
• Una expresión: Contacto: <%# cliente.Nombre+” “+cliente.Apellidos %>
• El resultado de un método: Código: <%# getCodigo() %>
Todas las expresiones de Data Binding, con independencia del lugar en el que se ubiquen, deben estar
contenidas entre los caracteres delimitadores <%# %>.
El Código fuente 133 nos muestra el mecanismo de conexión con datos (Data Binding) en plena
acción, se muestran varios ejemplos de conexión con datos para distintos controles Web dentro de una
página ASP .NET.
<%@ Page Language="C#"%>

<html>
<script runat="server">
String[] datosDos=new String [5];
ArrayList datos=new ArrayList();
void Page_Load(Object objFuente, EventArgs args){
datos.Add("Uno");
datos.Add("Dos");
datos.Add("Tres");
datos.Add("Cuatro");
datos.Add("Cinco");
datosDos[0]="Bora-bora";
datosDos[1]="Morea";
datosDos[2]="Pascua";
datosDos[3]="Papeete";
datosDos[4]="Santiago de Chile";
203
listaDos.DataBind();
lista.DataBind();
hora.DataBind();
caja.DataBind();
}
</script>
<body>
<form id="EjemplosDataBinding" method="post" runat="server">
Números:
<asp:DropDownList id="lista" runat="server" DataSource="<%# datos %>">
</asp:DropDownList><br>
Destinos:
<asp:ListBox id="listaDos" runat="server" DataSource="<%# datosDos %>">
</asp:ListBox><br>
<asp:Label ID="hora" runat="server" Text="<%# DateTime.Now %>"/><br>
Navegador:
<asp:TextBox ID="caja" runat="server" Text="<%# Page.Request.Browser.Browser %>">
</asp:TextBox>
</form>
</body></html>
Código fuente 133
En este ejemplo se han establecido como orígenes de datos de los controles DropDownList y ListBox
un objeto ArrayList y un arrary de objetos String, respectivamente, para el objeto Label se le ha
asignado a su propiedad Text el valor devuelto por la propiedad Now, y para el control TextBox se ha
seguido el mismo criterio pero utilizando el objeto Request, que es uno de los objetos integrados en
ASP .NET y que veremos en el capítulo correspondiente y que será familiar para aquellos lectores que
ya conozcan el entorno de ASP.
El resultado de la ejecución de este ejemplo de Data Binding se puede ver en la Figura 75.
Figura 75
Y se generaría el código HTML que ofrece el Código fuente 134.
204
<html>
<body>
<form name="EjemplosDataBinding" method="post" action="databindingcoleccion.aspx"
id="EjemplosDataBinding">
value="dDwxOTg4MDI4Nzk2O3Q8O2w8aTwyPjs+O2w8dDw7bDxpPDE+O2k8Mz47aTw1Pjs+O2w8dDx0PDt0
PGk8NT47QDxVbm87RG9zO1RyZXM7Q3VhdHJvO0NpbmNvOz47QDxVbm87RG9zO1RyZXM7Q3VhdHJvO0NpbmN
vOz4+Oz47Oz47dDx0PDt0PGk8NT47QDxCb3JhLWJvcmE7TW9yZWE7UGFzY3VhO1BhcGVldGU7U2FudGlhZ2
8gZGUgQ2hpbGU7PjtAPEJvcmEtYm9yYTtNb3JlYTtQYXNjdWE7UGFwZWV0ZTtTYW50aWFnbyBkZSBDaGlsZ
Ts+Pjs+Ozs+O3Q8cDxwPGw8VGV4dDs+O2w8MDIvMDIvMjAwMiAxNTo1MjozNTs+Pjs+Ozs+Oz4+Oz4+Oz4=
" />
Números:
<select name="lista" id="lista">
<option value="Uno">Uno</option>
<option value="Dos">Dos</option>
<option value="Tres">Tres</option>
<option value="Cuatro">Cuatro</option>
<option value="Cinco">Cinco</option>
</select><br>
Destinos:
<select name="listaDos" id="listaDos" size="4">
<option value="Bora-bora">Bora-bora</option>
<option value="Morea">Morea</option>
<option value="Pascua">Pascua</option>
<option value="Papeete">Papeete</option>
<option value="Santiago de Chile">Santiago de Chile</option>
</select><br>
<span id="hora">02/02/2002 15:52:35</span><br>
Navegador:
<input name="caja" type="text" value="IE" id="caja" />
</form>
</body></html>
Código fuente 134
Podemos modificar el ejemplo anterior para establecer la conexión con los datos en el momento en el
que pulsemos un control Button de la página, así el mecanismo de Data Binding no está establecido
desde el principio al cargar la página, y además en este caso el método DataBind() no se va a lanzar
sobre cada control, sino que se va a lanzar sobre el objeto Page que representa a la página ASP .NET
actual. El resultado de estas modificaciones da lugar al ejemplo del Código fuente 135.

<html>
datos.Add("Uno");
datos.Add("Dos");
datos.Add("Tres");
datos.Add("Cinco");
datosDos[0]="Bora-bora";
datosDos[1]="Morea";
datosDos[2]="Pascua";
datosDos[3]="Papeete";
datosDos[4]="Santiago de Chile";
205
void EstableceDataBinding(Object objFuente, EventArgs args){

Page.DataBind();
//o también:
//DataBind();
}
</script>
<body>
Números:
</asp:DropDownList><br>
Destinos:
<asp:ListBox id="listaDos" runat="server" DataSource="<%# datosDos %>">
</asp:ListBox><br>
<asp:Label ID="hora" runat="server" Text="<%# DateTime.Now %>"/><br>
Navegador:
<asp:TextBox ID="caja" runat="server" Text="<%# Page.Request.Browser.Browser %>">
</asp:TextBox><br>
<asp:Button ID="boton" Runat="server" Text="Establecer Data Binding"
OnClick="EstableceDataBinding"></asp:Button>
</form>
</body></html>
Código fuente 135
De esta forma al cargar la página ASP .NET y no pulsar el botón, tendría el aspecto de la Figura 76, es
decir, todos los controles aparecerían sin sus datos correspondientes hasta que no se pulse el botón.
Figura 76
En los siguientes subapartados vamos a mostrar a través de ejemplos algunas de las distintas
posibilidades que nos ofrece la conexión con datos en distintos casos y escenarios.
206
Estableciendo como origen de datos propiedades

Mediante ASP .NET podemos utilizar como origen de los datos en el mecanismo de Data Binding
propiedades de la página (objeto Page) o bien propiedades de otros controles Web.
En el Código fuente 136 se muestra como se establece en una conexión de datos, que posee como
origen una propiedad de sólo lectura de la página ASP .NET, y que se conecta con la propiedad Text
de un control Web de la clase Label. En este caso se han definido dos propiedades para la página que
se mostrarán en dos objetos Label.

<html>
<head>
etiquetaUno.DataBind();
etiquetaDos.DataBind();
}
string nombrePagina{
get {
return "Mi Página";
}
}
int numeroPagina{
get {
return 11;
}
}
</script>
</head>
<body>
<form runat="server" ID="WebForm">
Nombre página:
<asp:Label Runat="server" ID="etiquetaUno" Text="<%# nombrePagina %>">
</asp:Label><br>
Número de página:
<asp:Label Runat="server" ID="etiquetaDos" Text="<%# numeroPagina %>">
</asp:Label><br>
</form>
</body>
</html>
Código fuente 136
Como se puede comprobar la sintaxis de Data Binding en este caso es muy sencilla, únicamente
debemos utilizar los delimitadores <%# %> y acceder a la propiedad deseada.
El resultado de la ejecución de la página anterior se puede observar en la Figura 77.
207
Figura 77
Y se genera el código HTML que se puede ver en el Código fuente 137.
<html>
<head>
</head>
<body>
<form name="WebForm" method="post" action="databindingpropiedad.aspx" id="WebForm">
value="dDwxNDI0NDUwMTY1O3Q8O2w8aTwyPjs+O2w8dDw7bDxpPDE+O2k8Mz47PjtsPHQ8cDxwPGw8VGV4
dDs+O2w8TWkgUMOhZ2luYTs+Pjs+Ozs+O3Q8cDxwPGw8VGV4dDs+O2w8MTE7Pj47Pjs7Pjs+Pjs+Pjs+"
/>
Nombre página:
<span id="etiquetaUno">Mi Página</span><br>
Número de página:
<span id="etiquetaDos">11</span><br>
</form>
</body>
</html>
Código fuente 137
Si queremos utilizar el mecanismo directamente sobre la página ASP .NET, sin necesidad de utilizar
controles Label utilizaremos el Código fuente 138.

<html>
Page.DataBind();
}
string nombrePagina{
get {
return "Mi Página";
}
}
int numeroPagina{
get {
208
return 11;
}
}
</script>
<body>
Nombre página: <%# nombrePagina %><br>
Número de página: <%# numeroPagina %><br>
</body>
</html>
Código fuente 138
En el Código fuente 139 se puede ver otro ejemplo de Data Binding con propiedades, en este nuevo
ejemplo la propiedad que funciona como origen de datos es una propiedad de otro control Web en la
misma página ASP .NET. La propiedad de origen en este caso es la propiedad Text de la propiedad
SelectedItem del control DropDownList, de esta forma el objeto Label mostrará el valor del elemento
seleccionado de la lista.
<html>
void Page_Load(Object Sender, EventArgs E) {

if (!Page.IsPostBack) {
ArrayList valores = new ArrayList();
valores.Add ("Agapornis");
valores.Add ("Ninfa");
valores.Add ("Iguana");
valores.Add ("Varano");
valores.Add ("Tortuga");
lista.DataSource=valores;
lista.DataBind();
}
}
void BotonPulsado(Object sender, EventArgs e) {

etiqueta.DataBind();
}
</script>
<body>
<form runat=server ID="Formulario">
<asp:DropDownList id="lista" runat="server" />
<asp:button Text="Enviar" OnClick="BotonPulsado" runat=server
ID="boton"/><br>
<asp:Label id="etiqueta" font-name="Verdana" font-size="10pt" runat="server"
Text="<%# lista.SelectedItem.Text %>"/>
</form>
</body>
</html>
Código fuente 139
En la Figura 78 se puede ver un ejemplo de ejecución del código anterior.
209
Figura 78
Estableciendo como origen de datos colecciones y listas

Normalmente este tipo de DataBinding se suele aplicar a controles Web como puede ser controles
DropDownList, DataList, DataGrid, ListBox, etc.
En el Código fuente 140 se muestra un ejemplo de cómo se establece un objeto ArrayList como origen
de datos de un objeto DropDownList. Al seleccionar un elemento de la lista se muestra dentro de un
control Web de la clase Label. Como se puede comprobar la sintaxis de Data Binding sigue siendo
muy sencilla, indicamos el nombre del objeto ArrayList entre los ya conocidos delimitadores <%# %>.

<html>
datos.Add("Uno");
datos.Add("Dos");
datos.Add("Tres");
datos.Add("Cinco");
DataBind();
}
</script>
<body>
Números:
</asp:DropDownList>
</form>
</body></html>
Código fuente 140
En este caso se utiliza la propiedad DataSource del objeto DropDownList para indicar el origen de los
datos.
En la Figura 79 se puede ver un ejemplo de ejecución de la página ASP .NET anterior.
210
Figura 79
Y el código HTML que se generaría sería similar al del Código fuente 141.
<html>
<body>
<form name="EjemplosDataBinding" method="post" action="databindingcoleccion.aspx"
id="EjemplosDataBinding">
value="dDwxNTc0NDE0MzM7dDw7bDxpPDI+Oz47bDx0PDtsPGk8MT47PjtsPHQ8dDw7dDxpPDU+O0A8VW5v
O0RvcztUcmVzO0N1YXRybztDaW5jbzs+O0A8VW5vO0RvcztUcmVzO0N1YXRybztDaW5jbzs+Pjs+Ozs+Oz4
+Oz4+Oz4=" />
Números:
<select name="lista" id="lista">
<option value="Uno">Uno</option>
<option value="Dos">Dos</option>
<option value="Tres">Tres</option>
<option value="Cuatro">Cuatro</option>
<option value="Cinco">Cinco</option>
</select>
</form>
</body></html>
Código fuente 141
Hay ocasiones en que el origen de los datos no presenta una estructura de datos sencilla, sino que tiene
un estructura similar a una tabla de una base de datos, poseyendo el origen de datos distintos campos
con información. En estos casos es necesario mapear los campos del origen de los datos a las
propiedades del control Web correspondiente sobre el que se va a establecer el Data Binding.
Un caso típico de este origen de datos es un objeto de la clase HashTable, que contiene un conjunto de
valores identificados por una clave, es decir, por cada elemento de datos tenemos dos valores,
representados mediante los pares clave (Key) y valor (Value).
Estas estructuras de datos complejas de utilizan como orígenes de datos de controles Web de lista, es
decir, con controles Repeater, DataList y DataGrid, que se combinarán a su vez con el mecanismo de
platillas para dar un aspecto determinado a la información que van a contener.
211
En el Código fuente 142 se muestra un ejemplo de Data Binding que utiliza como origen de datos un
objeto HashTable y este origen de datos se conecta con un control DataList.
<%@ Page language="c#"%>

<html>
Hashtable h = new Hashtable();
h.Add ("clave1", "valor1");
lista.DataSource = h;
lista.DataBind();
}
</script>
<body>
<form runat="server" ID="formulario">

<asp:DataList id="lista" runat="server"
BorderColor="black"
BorderWidth="1"
GridLines="Both"
CellPadding="4"
CellSpacing="0"
>
<ItemTemplate>
<%# ((DictionaryEntry)Container.DataItem).Key %> :
<%# ((DictionaryEntry)Container.DataItem).Value %>
</ItemTemplate>
</asp:DataList>
</form>
</body>
</html>
Código fuente 142
Como se puede apreciar entre los delimitadores <%# %> se utiliza la instrucción Container.DataItem.
Esta expresión nos permite indicar una columna determinada dentro de el origen de datos, para
establecer el mecanismo de Data Binding con el control Web correspondiente, en este caso se trata de
indicar que en la primera columna de la tabla representada por la plantilla (template) aplicada sobre el
control DataList, se van a mostrar las claves de el objeto HashTable, y en la segunda columna los
valores del objeto HashTable.
Container hace referencia al contenedor de los datos (objeto DataList, Repeater o DataGrid), y la
propiedad DataItem devuelve un objeto de la clase Object que hace referencia a la fila dentro de la
estructura del origen de datos.
Para obtener el valor de la clave se utiliza la propiedad Key, y para obtener el valor del elemento del
objeto HashTable se utiliza la propiedad Value. Para poder utilizar estas propiedades, como se puede
apreciar en el Código fuente 142, se debe hacer la conversión (casting) de tipos correspondientes, ya
que la propiedad DataItem siempre nos devolverá un objeto de la clase genérica Object.
212
En este ejemplo se ha utilizado por código, en el evento de carga de la página, la propiedad

DataSource del objeto DataList para indicar el origen de datos, y la sintaxis de Data Binding se ha
utilizado para indicar en que lugar se van a mostrar los distintos campos del origen de datos.
El resultado de la ejecución del código del ejemplo anterior se puede ver en la Figura 80.
Figura 80
Y el Código fuente 143 es el código HTML que se generaría.
<html>
<body>
<form name="formulario" method="post" action="databindingcontaineruno.aspx"
id="formulario">
value="dDwyNDkyNDgzNDI7dDw7bDxpPDI+Oz47bDx0PDtsPGk8MT47PjtsPHQ8QDA8cDxwPGw8RGF0YUtl
eXM7XyFJdGVtQ291bnQ7PjtsPGw8PjtpPDM+Oz4+Oz47Ozs7Ozs7Oz47bDxpPDA+O2k8MT47aTwyPjs+O2w
8dDw7bDxpPDA+Oz47bDx0PEA8Y2xhdmUzO3ZhbG9yMzs+Ozs+Oz4+O3Q8O2w8aTwwPjs+O2w8dDxAPGNsYX
ZlMjt2YWxvcjI7Pjs7Pjs+Pjt0PDtsPGk8MD47PjtsPHQ8QDxjbGF2ZTE7dmFsb3IxOz47Oz47Pj47Pj47P
j47Pj47Pg==" />
<table id="lista" cellspacing="0" cellpadding="4" rules="all"

bordercolor="Black" border="1" style="border-color:Black;border-width:1px;border-
style:solid;border-collapse:collapse;">
<tr>
<td>
clave3 :
valor3
</td>
</tr><tr>
<td>
clave2 :
valor2
</td>
</tr><tr>
<td>
clave1 :
valor1
213
</td>
</tr>
</table>
</form>
</body>
</html>
Código fuente 143
Para aclarar más las cosas se ofrece el Código fuente 144, en este caso el origen de datos es un objeto
de la clase DataView que representa una estructura de datos como la de una tabla de una base se datos
con sus filas y columnas (este objeto lo veremos en mayor profundidad cuando en siguientes capítulos
se trate el acceso a datos mediante ADO .NET). El control Web encargado de mostrar los datos es el
ya cada vez más conocido por todos control Repeater.
<%@ Page language="c#"%>

<%@ Import namespace="System.Data" %>
<html>
void Page_Load(Object sender, EventArgs e ) {
DataTable dt = new DataTable();
DataRow dr;
dt.Columns.Add(new DataColumn("Entero", typeof(Int32)));
dt.Columns.Add(new DataColumn("Cadena", typeof(string)));
dt.Columns.Add(new DataColumn("Booleano", typeof(bool)));
for (int i = 1; i <= 9; i++) {
dr = dt.NewRow();
dr[0] = i;
dr[1] = "Cadena " + i.ToString();
dr[2] = (i % 2 != 0) ? true : false;
dt.Rows.Add(dr);
}
datos.DataSource = new DataView(dt);
datos.DataBind();
}
</script>
<body>
<form runat="server" ID="formulario">

<asp:Repeater id="datos" runat="server">
<HeaderTemplate>
<th>Entero</th>
<th>Cadena</th>
<th>Booleano</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<td><%# ((DataRowView)Container.DataItem)[0]%></td>
</tr>
</ItemTemplate>
<FooterTemplate>
214
</table>
</FooterTemplate>
</asp:Repeater>
</form>
</body>
</html>
Código fuente 144
En este caso también hay que utilizar la expresión Container.DataItem para indicar en que posición
deseamos mostrar cada columna del objeto DataView, y también se debe realizar la conversión de
tipos correspondiente para poder hacer referencia a las columnas de manera correcta.
En la Figura 81 se puede ver el aspecto que tendría esta página ASP .NET.
Figura 81
En el apartado dedicado al control Web Repeater veremos más ejemplos en los que el origen de datos
es una colección.
Estableciendo como origen de datos expresiones y métodos

En este nuevo ejemplo (Código fuente 145) el origen de los datos va a ser el resultado ofrecido por un
método definido dentro de la página ASP .NET y llamado ParOImpar(), que devolverá las cadenas
“Par” o “Impar” según el valor del entero que le pasemos por parámetro. Este método se ha conectado
con la propiedad Text de un control Label.
Al pulsar sobre el botón (control Web de la clase Button) se pasará al método ParOImpar() el valor
indicado en el control TextBox.
215

<html>
void BotonPulsado(Object Sender, EventArgs E) {
DataBind();
}
String ParOImpar(String valor){
try {
int i= int.Parse(valor);
if ((i % 2) == 0)
return "Par";
else
return "Impar";
}catch{
return "Se ha producido un error";
}
}
</script>
<body>
Número:
<asp:TextBox Runat="server" ID="texto"></asp:TextBox>
<asp:Button Runat="server" ID="boton" OnClick="BotonPulsado"
Text="Pulsar"></asp:Button><br>
<asp:Label Runat="server" ID="etiqueta"
Text="<%# ParOImpar(texto.Text) %>"></asp:Label>
</form>
</body>
</html>
Código fuente 145
El resultado de la ejecución de esta nueva página ASP .NET se puede ver en la Figura 82.
Figura 82
El método DataBinder.Eval()
Aunque este apartado no indica un origen de datos en concreto como sucedía en los anteriores
apartados, está estrechamente relacionado con la sintaxis del mecanismo de Data Binding.
216
El método DataBinder.Eval() es un método estático que nos ofrece ASP .NET para realizar
conversiones de tipos a la hora de establecer el mecanismo de Data Binding y también nos permite dar
un formato determinado a la información.
Este método es utilizado cuando tenemos que hacer referencia a un valor dentro de un origen de datos
y además deseamos darle un formato determinado. Este origen de datos va a contener más de un valor
por cada fila, es decir, sería similar a una tabla de una base de datos con sus diferentes campos por
cada registro.
Un ejemplo de origen de datos que puede utilizar el método estático DataBinder.Eval() es un objeto de
la clase DataView (estos objetos los veremos más adelante en el texto cuando tratemos ADO .NET),
que posee una estructura de tabla con filas (registros) y columnas (campos). Este método se utiliza
normalmente en combinación con la instrucción Container.DataItem, que ya vimos en un subapartado
anterior.
El método DataBinder.Eval() posee tres parámetros: el primer parámetro es un objeto de la clase

Object que va a representar el contenedor de los datos, en el caso de los controles Repeater, DataList y
DataGrid el contenedor de los datos siempre será la expresión Container.DataItem; el segundo
parámetro es un objeto de la clase String que va a hacer referencia al campo de los datos y el tercero es
otro objeto String que va a indicar el formato con el que se va a mostrar el campo correspondiente.
Para ver en profundidad las cadenas que especifican el formato de la salida de los datos recomiendo al
lector que consulte la documentación de referencia ofrecida en Microsoft .NET Framework SDK,
aunque más adelante se muestran algunas de las cadenas de formato más comunes.
El método DataBinder.Eval() está sobrecargado y la otra versión del método elimina el tercer
parámetro, es decir, no es necesario especificar el formato si no se desea.
Si estamos estableciendo el mecanismo de Data Binding sobre la propia página ASP .NET el primer
parámetro del método Eval(), es decir, el que indica el contenedor, será en este caso Page.
La cadena que especifica el formato de salida debe tener los corchetes {} y entre ellos una expresión
que define el formato correspondiente. A continuación vamos a pasar a definir esta expresión.
Entre los corchetes en primer lugar siempre debe aparecer el valor cero (0) que hace referencia a modo
de variable al valor actual que contiene el campo de datos. A continuación aparecen dos puntos (:)
seguidos de los caracteres especiales de formato de cadenas. Fuera de los corchetes podemos indicar
cualquier cadena, que será tomada como un literal.
En la Tabla 8 se ofrecen los distintos caracteres especiales que podemos utilizar para formatear valores
numéricos.
Carácter de Descripción
formato
c Indica la moneda del sistema (10,20 €)
g Formato general (depende del formato del dato)
e Formato científico (3,77e+01)
f Formato de coma flotante (3,44)
n Formato numérico
217
p Formato porcentual (20%)
x Formato hexadecimal
Tabla 8
En la Tabla 9 se ofrecen los caracteres para formatear fechas.
formato
d Fecha corta (d/m/yyyy)
D Fecha larga (dddd, dd mmmm, yyyy)
f Fecha larga y hora corta (dddd, dd mmmm yyyy hh:mm)
g Fecha corta y tiempo corto (d/m/yyyy hh:mm)
m Mes y día (dd mmmm)
t Hora corta (hh:mm)
y Mes y año (mmmm, yyyy)
Tabla 9
También es posible utilizar una serie de caracteres que nos permiten especificar de forma directa el
formato que van a tener los valores numéricos. Así por ejemplo, si aplicamos la cadena de formato
“00#.##” sobre el número 1,2345 el resultado será “001,23”. En la Tabla 10 se comentan estos últimos
caracteres de formato.
formato
0 Muestra un cero si no hay un valor significativo, es decir,

añade un cero delante de un número o bien al final de un
número después de la coma.
# Se reemplaza únicamente con dígitos significativos, es

decir equivale a un dígito en el caso de que éste exista.
. Muestra la coma decimal.
, Separa los números en grupos utilizando el carácter

correspondiente del sistema actual.
Tabla 10
218
Una vez comentado en profundidad el método DataBinder.Eval() vamos a verlo en acción en el

Código fuente 146. En este ejemplo se ha utilizado como origen de datos una tabla de una base de
datos y el control encargado de mostrar estos datos en un control Repeater (que veremos en el próximo
capítulo).
<%@ Import Namespace="System.Data" %>

<%@ Import Namespace="System.Data.SqlClient" %>
<html>
SqlConnection conexion = new
SqlConnection("server=angel;database=pubs;uid=sa;pwd=");
SqlDataAdapter comando = new SqlDataAdapter("select * from Titles", conexion);
DataSet ds = new DataSet();
comando.Fill(ds, "Titles");
repiteDatos.DataSource = ds.Tables["Titles"].DefaultView;
repiteDatos.DataBind();
}
</script>
<body>
<asp:Repeater id="repiteDatos" runat="server">
<HeaderTemplate>
<th>Título</th>
<th>Unidades</th>
<th>Fecha publicación</th>
<th>Ventas</th>
<th>Precio</th>
</tr>
</HeaderTemplate>
<ItemTemplate>
<td><%# DataBinder.Eval(Container.DataItem, "titulo") %></td>
<td align="right">
<%# DataBinder.Eval(Container.DataItem, "unidades","{0:#,###}") %></td>
<td align="right">
<%# DataBinder.Eval(Container.DataItem, "fecha","{0:m}") %></td>
<td align="right">
<%# DataBinder.Eval(Container.DataItem, "ventas","{0:g}") %></td>
<td align="right">
<%# DataBinder.Eval(Container.DataItem, "precio", "{0:0#.00} €") %></td>
</tr>
</ItemTemplate>
<FooterTemplate>
</table>
</FooterTemplate>
</asp:Repeater>
</body>
</html>
Código fuente 146
Para la columna título de la tabla de la base de datos no se ha especificado ningún formato, pero si
para las siguientes columnas: se ha indicado que en el campo unidades se agrupen los miles; en el
219
campo fecha de publicación se ha formateado la fecha con el día y el mes; para el campo ventas se ha
indicado el formato general; y para terminar en el campo precio se ha dado un formato de precio para
euros, indicando también el carácter (€) de la moneda.
En la Figura 83 se puede ver el aspecto que mostraría esta página.
Figura 83
Con este ejemplo se da por finalizado el presente capítulo, en el siguiente trataremos los controles de
lista.
220

Unidad 4. Recurso 1. Plantillas y Data Binding

Cargado por

Información del documento

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Unidad 4. Recurso 1. Plantillas y Data Binding

Cargado por

Copyright:

Formatos disponibles

Web Forms: plantillas y Data Binding

Introducción a los controles de lista

• AlternatingItemTemplate: esta plantilla se aplica a elementos alternos, y tiene la misma

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

<asp:Repeater id="repiteDatos" runat="server">

Código fuente 128

Código fuente 129

Se ha utilizado una plantilla de cabecera de la información (HeaderTemplate) para definir la cabecera

<%@ Page Language="c#"%>

Código fuente 130

Código fuente 131

<asp:ControlWeb propiedad=”<%# expresión Data Bindging %>” runat=”server” />

Código fuente 132

• Una colección: <asp:ListBox id=”lista” datasource=”<%# miArray %>” runat=”server”>

• Una expresión: Contacto: <%# cliente.Nombre+” “+cliente.Apellidos %>

• El resultado de un método: Código: <%# getCodigo() %>

<%@ Page Language="C#"%>

Código fuente 133

Y se generaría el código HTML que ofrece el Código fuente 134.

Código fuente 134

<%@ Page Language="C#"%>

void EstableceDataBinding(Object objFuente, EventArgs args){

Código fuente 135

Estableciendo como origen de datos propiedades

<%@ Page Language="C#"%>

Código fuente 136

El resultado de la ejecución de la página anterior se puede observar en la Figura 77.

Y se genera el código HTML que se puede ver en el Código fuente 137.

Código fuente 137

<%@ Page Language="C#"%>

Código fuente 138

void Page_Load(Object Sender, EventArgs E) {

void BotonPulsado(Object sender, EventArgs e) {

Código fuente 139

En la Figura 78 se puede ver un ejemplo de ejecución del código anterior.

Estableciendo como origen de datos colecciones y listas

<%@ Page Language="C#"%>

Código fuente 140

En la Figura 79 se puede ver un ejemplo de ejecución de la página ASP .NET anterior.

Código fuente 141

<%@ Page language="c#"%>

<form runat="server" ID="formulario">

Código fuente 142

En este ejemplo se ha utilizado por código, en el evento de carga de la página, la propiedad

Y el Código fuente 143 es el código HTML que se generaría.

<table id="lista" cellspacing="0" cellpadding="4" rules="all"

Código fuente 143

<%@ Page language="c#"%>

<form runat="server" ID="formulario">

Código fuente 144

Estableciendo como origen de datos expresiones y métodos

<%@ Page Language="C#"%>

Código fuente 145

El método DataBinder.Eval() posee tres parámetros: el primer parámetro es un objeto de la clase

c Indica la moneda del sistema (10,20 €)

g Formato general (depende del formato del dato)

e Formato científico (3,77e+01)

f Formato de coma flotante (3,44)

p Formato porcentual (20%)

En la Tabla 9 se ofrecen los caracteres para formatear fechas.

d Fecha corta (d/m/yyyy)

D Fecha larga (dddd, dd mmmm, yyyy)

f Fecha larga y hora corta (dddd, dd mmmm yyyy hh:mm)

g Fecha corta y tiempo corto (d/m/yyyy hh:mm)