Tutorial de ASP.NET
Vista Previa de ASP.NET 2.0

Databinding en Plantillas

Los controles de vinculado de datos "templated" nos dan una flexibilidad máxima en la presentación de los datos en nuestras páginas. Podemos recordar varios controles "templated" de ASP.NET v1.x, como el DataList o el Repeater. Estos controles siguen siendo soportados en ASP.NET 2.0, aunque se ha simplificado y mejorado la forma en la que enlazamos los controles dentro de las plantillas. Esta sección muestra varias formas de vincular datos dentro de una plantilla de un control de vinculado de datos.


Templated data-bound controls give you ultimate flexibility over the rendering of data in your pages. You may recall several templated controls from ASP.NET v1.x, such as the DataList and Repeater controls. Those controls continue to be supported in ASP.NET 2.0, however the way that you data bind controls inside templates have been simplified and improved in this release. This section discusses the various ways to data bind inside a data-bound control template.

Expresiones de Databinding

ASP.NET 2.0 añade mejoras al enlazado de datos en plantillas, simplificando la sintaxis de enlazado de datos, pasando de DataBinder.Eval(Container.DataItem, fieldname), de v1.x, a  Eval(fieldname). Cómo DataBinder.Eval, el método Eval también accepta un parámetro formatString opcional. La sintaxis acortada de Eval es diferente de la de DataBinder.Eval en el hecho de que Eval resuelve automáticamente el campo a través de la propiedad DataItem del objeto contenedor más cercano (DataListItem, en los ejemplos anteriores), mientras que DataBinder.Eval coge el argumento del contenedor. Es por ésto que Eval sólo se usa dentro de una plantilla de un control de enlazado de datos y no se puede usar en el nivel de Página. Por supuesto, DataBinder.Eval continúa siendo soportado en ASP.NET 2.0, de forma que podemos utilizarlo en escenarios en los que la sintaxis simplificada de Eval no puede usarse.
<asp:DataList DataSourceID="ObjectDataSource1" runat="server">
<ItemTemplate>
<asp:Image ImageUrl='<%# Eval("FileName", "images/thumbs/{0}") %>' runat="server"/>
<asp:Label Text='<%# Eval("Caption") %>' runat="server"/>
</ItemTemplate>
</asp:DataList>
El ejemplo anterior muestra la nueva sintaxis simplificada de Eval de enlazado de datos para enlazar una imagen, un Label y un control HyperLink en una plantilla de un Item DataList.

C# DataBinding en una Plantilla de DataList

 

El enlazado a datos también se puede incluir como parte de una definición de un tema para un control, de forma que es posible alterar drásticamente el diseño y la apariencia de un control "templated" cambiando simplemente el tema que se le aplica. Sin embargo, sólo Eval (o Bind, cómo se ha explicado antes) puede ser utilizado en una plantilla de Tema. Enlazar a código arbitrario del usuario no está permitido. El siguiente ejemplo muestra un Tema aplicado al anterior ejemplo para crear una visión completamente diferente de la página de fotos.
Para más información sobre temas acudid a la sección Aplicando Estilos, Temas i Skins de este tutorial.

C# DataBinding en una Plantilla de DataList (Themed)


El Control FormView

El control DataList itera sobre cada elemento de la fuente de datos y obtiene para cada elemento el "Item Template" (Plantilla de Elemento) una vez. Ésto es útil para representar una lista de elementos, pero a veces lo que queremos es elnazar datos a un sólo elemento de datos de un formulario. Para este propósito, ASP.NET 2.0 introduce el control FormView, que representa un sólo elemento de datos cada vez en una plantilla independiente. La principal diferencia entre DetailsView y FormView es que el primero tiene incorporado una representación tabular, mientras que FormVew requiere de la definición de una plantilla por parte del usuario para su representación. Por lo demás, ambos controles son muy similares. El siguiente ejemplo muestra un control FormView enlazado a un OjectDataSource. La propiedad ItemTemplate de FormVIew contiene una imagen enlazada a datos, una etiqueta (Label) y un hiperenlace (HyperLink) como el anterior ejemplo de DataList.

C# DataBinding en una Plantilla de FormView

 

De la misma manera que DetailsView, FormView mantiene el contacto con el elemento que se está representando y puede, opcionalmente, soportar paginación en múltiples elementos de datos, cuando la fuente de datos devuelve una lista. El siguiente ejemplo muestra un FormView con paginación permitida.

C# DataBinding en una Plantilla de FormView (Paginada)
 

Enlazadao de Datos "Two-way"

El FormView soporta Actualizaciones, Inserciones y Borrados automáticos, a través de sus controles de datos asociados, cómo lo hacía el control DetailsView. Para definir la UI de entrada para la edición o inserción, definiremos un EditItemTemplate o InsertItem, además de la ItemTemplate. En este ejemplo, enlazaremos a los campos de la fuente de datos controles de entrada como TextBox, CheckBox o DropDownList. El enlazado a dato de estas plantillas utiliza, sin embargo, una sintaxis de enlazado a datos del tipo "two-way" , para permitir al FormView extraer de la plantilla los valores de los controles de entrada, para así poder pasarlos a la fuente de datos. Estos enlazados a datos utilizan la sintaxis Bind(fieldname) en lugar de Eval.

Importante: Un control que se enlaza a datos mediante Bind debe tener establecida la propiedad ID.
<asp:FormView DataSourceID="ObjectDataSource1" DataKeyNames="PhotoID" runat="server">
<EditItemTemplate>
<asp:TextBox ID="CaptionTextBox" Text='<%# Bind("Caption") %>' runat="server"/>
<asp:Button Text="Update" CommandName="Update" runat="server"/>
<asp:Button Text="Cancel" CommandName="Cancel" runat="server"/>
</EditItemTemplate>
<ItemTemplate>
<asp:Label Text='<%# Eval("Caption") %>' runat="server" />
<asp:Button Text="Edit" CommandName="Edit" runat="server"/>
</ItemTemplate>
</asp:FormView>
Cuando realizamos actualizaciones con GridView o DetailsView en las que hay BoundFields definidos para las columnas o campos para el control, GridView o DetailsView se responsabilizan de la creación de la UI de entrada en los modos de Edición o Inserción, de forma que puede extraer automáticamente los valores de entrada y devolverlos a la fuente de datos. Debido a que las plantillas contienen controles de UI definidos por el usuario, es necesaria la sintaxis de enlazado a datos "two-way" para permitir que los controles "templated", como FormView, conozcan qué valores de control deberás ser extraidos de la plantilla para su actualización, inseción o borrado. Podemos seguir usando la sintaxis de Eval en una EditItemTemplate para realizar vinculaciones a datos que no deberían ser devueltas a la fuente de datos. Observar también que FormView soporta la propiedad DataKeyNames de la misma forma que DetailsView y GridView, para mantener los valores originales de los campos clave primarios y devolverlos a las acualizaciones/borrados, incluso si dichos campos no se representan.

El FormView soporta la propiedad DefaultMode para especificar la plantilla a mostrar por defecto, pero por defecto el FormVIew empieza en modo ReadOnly y representa la ItemTemplata. Para permitir que la UI cambie del modo ReadOnly a los modos Edit o Insert podemos añadir un control Button a la plantilla y establecer su propiedad CommandName a Edit o New. Desde la EditItemTemplate podermos añadir "Buttons" con el CommandName ya establecido a Update o Cancel para llevar a cabo o cancelar la operación de actualización. De forma similar, podemos añadir "Buttons" con CommandName establecido a Insert o Cancel para llevar a cabo o cancelar la operación de inserción.

El siguiente ejemplo muestra un FormView con ItemTemplate y EditItemTemplate ambas definidas. ItemTemplate contiene controles enlazados mediante Eval (one-way, un sentido)m mientras que EditItemTemplate contiene un control TextBox vinculado "two-way" (dos sentidos) mediante una sentencia Bind. El campo llave primario (PhotoID) es "round-tripped" en viewstate mediante la propiedad DataKeyNames. El FormView contiene botones de comando para cambiar entre las plantillas.

C# Enlazado a Datos "Two-Way" (de Ida y Vuelta) en una Plantilla de Edición de FormView

 
GriView y DetailsView también soportan una UI "templated" mediante el uso de un TemplateField añadido al grupo de Columnas o Campos (fields). TemplateField soporta ItemTemplate, EditItemTemplate y InsertItemTemplate (sólo DetailsView) para especificar la UI del campo en los diferentes modos de dichos controles. De las misma forma que en el ejemplo anterior, los enlazados a datos "two-way" en EditItemTemplate o InsertItemTemplate permitirán a GridView o DetailsView extraer valores de los controles en estas plantillas. Un uso común para TemplateField es añadir controles de validación a la EditItemTemplate para la validación declarativa de las operaciones GridView o DetailsView. El siguiente ejemplo muestra un ejemplo de esta técnica. Para más información sobre controles de validación en ASP.NET, acudid a la sección Validando Desde Controles de Entrada de este tutorial.

C# Validación en una Plantilla de Edición de GridView
 

Otro uso para TemplateField es personañizar los controles de entrada usados para introducir valores de los campos de GridView o DetailsView. Por ejemplo, podemos situar un DropDownList dentro de el EditItemTemplate o TemplateField para permitir la selección de una lista predefinida de valores. El siguiente ejemplo muestra esta técnica. Observar que la DropDownList de este ejemplo está vinculada a datos a su propio control de fuente de datos para obtenes los valores de la lista de forma dinámica.

C# DropDownList en una Plantilla de Edición de GridView