Usar TemplateFields en el control GridView (VB)

por Scott Mitchell

Descargar PDF

Para proporcionar flexibilidad, GridView ofrece TemplateField, que se representa mediante una plantilla. Una plantilla puede incluir una combinación de HTML estático, controles web y sintaxis de enlace de datos. En este tutorial examinaremos cómo usar TemplateField para lograr un mayor grado de personalización con el control GridView.

Introducción

GridView se compone de un conjunto de campos que indican qué propiedades de la DataSource se van a incluir en la salida representada junto con cómo se mostrarán los datos. El tipo de campo más sencillo es BoundField, que muestra un valor de datos como texto. Otros tipos de campo muestran los datos mediante elementos HTML alternativos. El CheckBoxField, por ejemplo, se representa como una casilla cuyo estado activado depende del valor de un campo de datos especificado; ImageField representa una imagen cuyo origen de imagen se basa en un campo de datos especificado. Los hipervínculos y botones cuyo estado depende de un valor de campo de datos subyacente se pueden representar mediante los tipos de campo HyperLinkField y ButtonField.

Aunque los tipos de campo CheckBoxField, ImageField, HyperLinkField y ButtonField permiten una vista alternativa de los datos, siguen siendo bastante limitados con respecto al formato. Un CheckBoxField solo puede mostrar una sola casilla, mientras que ImageField solo puede mostrar una sola imagen. ¿Qué ocurre si un campo determinado necesita mostrar texto, una casilla, y una imagen, todas basadas en valores de campo de datos diferentes? ¿O qué ocurre si queríamos mostrar los datos mediante un control web distinto de CheckBox, Image, HyperLink o Button? Además, BoundField limita su presentación a un único campo de datos. ¿Qué ocurre si queremos mostrar dos o más valores de campo de datos en una sola columna GridView?

Para dar cabida a este nivel de flexibilidad, GridView ofrece TemplateField, que se representa mediante una plantilla. Una plantilla puede incluir una combinación de HTML estático, controles web y sintaxis de enlace de datos. Además, TemplateField tiene una variedad de plantillas que se pueden usar para personalizar la representación para diferentes situaciones. Por ejemplo, el ItemTemplate se usa de forma predeterminada para representar la celda de cada fila, pero la plantilla de EditItemTemplate se puede usar para personalizar la interfaz al editar datos.

En este tutorial examinaremos cómo usar TemplateField para lograr un mayor grado de personalización con el control GridView. En el tutorial anterior vimos cómo personalizar el formato en función de los datos subyacentes mediante los DataBound controladores de eventosRowDataBound. Otra manera de personalizar el formato basado en los datos subyacentes es llamar a métodos de formato desde dentro de una plantilla. También veremos esta técnica en este tutorial.

En este tutorial usaremos TemplateFields para personalizar la apariencia de una lista de empleados. En concreto, enumeraremos todos los empleados, pero mostrarán los nombres y apellidos del empleado en una columna, su fecha de contratación en un control Calendario y una columna de estado que indica cuántos días han empleado en la empresa.

Figura 1: Se usan tres TemplateFields para personalizar la presentación (Haga clic para ver la imagen de tamaño completo)

Paso 1: Enlazar los datos a GridView

En escenarios de informes en los que necesita usar TemplateFields para personalizar la apariencia, lo más fácil es empezar creando un control GridView que contenga solo BoundFields primero y, a continuación, agregar nuevos TemplateFields o convertir los BoundFields existentes en TemplateFields según sea necesario. Por lo tanto, vamos a empezar este tutorial agregando una clase GridView a la página a través del Diseñador y enlazandola a un ObjectDataSource que devuelve la lista de empleados. Estos pasos crearán una clase GridView con BoundFields para cada uno de los campos de empleado.

Abra la página GridViewTemplateField.aspx y arrastre GridView desde el cuadro de herramientas al diseñador. En la etiqueta inteligente de GridView, elija agregar un nuevo control ObjectDataSource que invoque el método GetEmployees() de la clase EmployeesBLL.

Figura 2: agregar un nuevo control ObjectDataSource que invoca el GetEmployees()Método (haga clic para ver la imagen de tamaño completo)

Enlazar GridView de esta manera agregará automáticamente un BoundField para cada una de las propiedades de empleado: EmployeeID, LastName, FirstName, Title, HireDate, ReportsTo, y Country. Para este informe, no se molestará en mostrar las propiedades EmployeeID, ReportsToo Country. Para quitar estos BoundFields, puede:

• Use el cuadro de diálogo Campos haga clic en el vínculo Editar columnas de la etiqueta inteligente de GridView para abrir este cuadro de diálogo. A continuación, seleccione BoundFields en la lista inferior izquierda y haga clic en el botón X rojo para quitar BoundField.
• Edite la sintaxis declarativa de GridView manualmente desde la vista Origen, elimine el elemento <asp:BoundField> del BoundField que desea quitar.

Después de quitar el EmployeeID, ReportsTo, y Country BoundFields, el marcado de GridView debería ser similar al siguiente:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:BoundField DataField="LastName" HeaderText="LastName"
          SortExpression="LastName" />
        <asp:BoundField DataField="FirstName" HeaderText="FirstName"
          SortExpression="FirstName" />
        <asp:BoundField DataField="Title" HeaderText="Title"
          SortExpression="Title" />
        <asp:BoundField DataField="HireDate" HeaderText="HireDate"
          SortExpression="HireDate" />
    </Columns>
</asp:GridView>

Dedique un momento a ver nuestro progreso en un explorador. En este punto debería ver una tabla con un registro para cada empleado y cuatro columnas: una para el apellido del empleado, otra para su nombre, otra para su título y otra para su fecha de contratación.

Figura 3: se muestran los campos LastName, FirstName, Title, y HireDate para cada empleado (Haga clic para ver la imagen de tamaño completo)

Paso 2: mostrar los nombres y los apellidos en una sola columna

Actualmente, los nombres y apellidos de cada empleado se muestran en una columna independiente. Puede ser agradable combinarlos en una sola columna en su lugar. Para ello, es necesario usar TemplateField. Podemos agregar un nuevo TemplateField, agregarlo a la sintaxis necesaria de marcado y enlace de datos y, a continuación, eliminar los FirstName y LastName BoundFields, o podemos convertir el FirstName BoundField en un TemplateField, editar TemplateField para incluir el valor de LastName y, a continuación, quitar el LastName BoundField.

Ambos enfoques generan el mismo resultado, pero personalmente me gusta convertir BoundFields a TemplateFields cuando sea posible porque la conversión agrega automáticamente un ItemTemplate y EditItemTemplate con controles web y sintaxis de enlace de datos para imitar la apariencia y la funcionalidad del BoundField. La ventaja es que tendremos que hacer menos trabajo con TemplateField, ya que el proceso de conversión habrá realizado parte del trabajo para nosotros.

Para convertir un BoundField existente en un TemplateField, haga clic en el vínculo Editar columnas de la etiqueta inteligente de GridView, que muestra el cuadro de diálogo Campos. Seleccione BoundField para convertir de la lista en la esquina inferior izquierda y, a continuación, haga clic en el vínculo "Convertir este campo en un TemplateField" en la esquina inferior derecha.

Figura 4: convertir un BoundField en un TemplateField desde el cuadro de diálogo Campos (hacer clic para ver la imagen de tamaño completo)

Continúe y convierta el FirstName BoundField en un TemplateField. Después de este cambio, no hay ninguna diferencia perceptiva en el Diseñador. Esto se debe a que la conversión de BoundField en un TemplateField crea un TemplateField que mantiene la apariencia del BoundField. A pesar de que no hay ninguna diferencia visual en este momento en el Diseñador, este proceso de conversión ha reemplazado la sintaxis declarativa de BoundField (<asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" />) por la siguiente sintaxis TemplateField:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Como puede ver, TemplateField consta de dos plantillas un ItemTemplate que tiene una etiqueta cuya propiedad Text está establecida en el valor del campo de datos de FirstName y un EditItemTemplate con un control TextBox cuya propiedad Text también está establecida en el campo de datos FirstName. La sintaxis de enlace de datos (<%# Bind("fieldName") %>) indica que el campo de datos fieldName está enlazado a la propiedad de control web especificada.

Para agregar el valor del campo de datos de LastName a este TemplateField, es necesario agregar otro control web de etiqueta en el ItemTemplate y enlazar su Textpropiedad a LastName. Esto se puede lograr a mano o a través del Diseñador. Para hacerlo manualmente, basta con agregar la sintaxis declarativa adecuada al ItemTemplate:

<asp:TemplateField HeaderText="FirstName" SortExpression="FirstName">
    <EditItemTemplate>
        <asp:TextBox ID="TextBox1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:TextBox>
    </EditItemTemplate>
    <ItemTemplate>
        <asp:Label ID="Label1" runat="server"
            Text='<%# Bind("FirstName") %>'></asp:Label>
        <asp:Label ID="Label2" runat="server"
            Text='<%# Bind("LastName") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>

Para agregarlo a través del Diseñador, haga clic en el vínculo Editar plantillas desde la etiqueta inteligente de GridView. Se mostrará la interfaz de edición de plantillas de GridView. En la etiqueta inteligente de esta interfaz, se muestra una lista de las plantillas de GridView. Puesto que solo tenemos un TemplateField en este momento, las únicas plantillas enumeradas en la lista desplegable son esas plantillas para el FirstName TemplateField junto con el EmptyDataTemplate y PagerTemplate. La plantilla de EmptyDataTemplate, si se especifica, se usa para representar la salida de GridView si no hay ningún resultado en los datos enlazados a GridView; el PagerTemplate, si se especifica, se usa para representar la interfaz de paginación de un GridView que admita la paginación.

Figura 5: las plantillas de GridView se pueden editar a través del Diseñador (hacer clic para ver la imagen de tamaño completo)

Para mostrar también el LastName en el FirstName TemplateField, arrastre el control Etiqueta desde el cuadro de herramientas al del FirstName TemplateFieldItemTemplate en la interfaz de edición de plantillas de GridView.

Figura 6: agregar un control web de etiqueta al FirstName ItemTemplate de TemplateField (haga clic para ver la imagen de tamaño completo)

En este momento, el control Web Label agregado al TemplateField tiene su propiedad Text establecida en "Label". Es necesario cambiar esto para que esta propiedad esté enlazada al valor del campo de datos LastName en su lugar. Para ello, haga clic en la etiqueta inteligente del control Etiqueta y elija la opción Editar DataBindings.

Figura 7: elija la opción Editar DataBindings de la etiqueta inteligente (haga clic para ver la imagen de tamaño completo)

Se abrirá el cuadro de diálogo DataBindings. Desde aquí puede seleccionar la propiedad para participar en el enlace de datos de la lista de la izquierda y elegir el campo al que enlazar los datos desde la lista desplegable de la derecha. Elija la propiedad Text de la izquierda y el campo LastName de la derecha y haga clic en Aceptar.

Figura 8: enlace de la Textpropiedad al LastNamecampo de datos (haga clic para ver la imagen de tamaño completo)

Nota:

El cuadro de diálogo DataBindings permite indicar si se debe realizar el enlace de datos bidireccional. Si deja esta opción desactivada, se usará la sintaxis de enlace de datos <%# Eval("LastName")%> en lugar de <%# Bind("LastName")%>. Cualquiera de los enfoques es adecuado para este tutorial. El enlace de datos bidireccional es importante al insertar y editar datos. Sin embargo, para mostrar simplemente los datos, cualquiera de los enfoques funcionará igualmente bien. Analizaremos el enlace de datos bidireccional en detalle en los tutoriales futuros.

Dedique un momento a ver esta página a través de un explorador. Como puede ver, GridView todavía incluye cuatro columnas; sin embargo, la FirstNamecolumna ahora muestra los valores del campo de datos FirstName y LastName.

Figura 9: los valores FirstName y LastName se muestran en una sola columna (haga clic para ver la imagen de tamaño completo)

Para completar este primer paso, quite el LastName BoundField y cambie el nombre de la propiedad FirstNameTemplateFieldHeaderText a "Name". Después de estos cambios, el marcado declarativo de GridView debe tener un aspecto similar al siguiente:

<asp:GridView ID="GridView1" runat="server"
    AutoGenerateColumns="False" DataKeyNames="EmployeeID"
    DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name" SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="Title"
            SortExpression="" Title" />
        <asp:BoundField DataField="HireDate" HeaderText="
            HireDate" SortExpression="" HireDate" />
    </Columns>
</asp:GridView>

Figura 10: los nombres y apellidos de cada empleado se muestran en una columna (haga clic para ver la imagen de tamaño completo)

Paso 3: usar el control calendario para mostrar el campoHiredDate

Mostrar un valor de campo de datos como texto en GridView es tan sencillo como usar BoundField. Sin embargo, en algunos escenarios, los datos se expresan mejor mediante un control web determinado en lugar de solo texto. Esta personalización de la presentación de datos es posible con TemplateFields. Por ejemplo, en lugar de mostrar la fecha de contratación del empleado como texto, podríamos mostrar un calendario (con el control Calendario) con su fecha de contratación resaltada.

Para ello, empiece por convertir el HiredDate BoundField en un TemplateField. Simplemente vaya a la etiqueta inteligente de GridView y haga clic en el vínculo Editar columnas y abra el cuadro de diálogo Campos. Seleccione el HiredDate BoundField y haga clic en "Convertir este campo en un TemplateField."

Figura 11: convertir el HiredDate BoundField en un TemplateField (haga clic para ver la imagen de tamaño completo)

Como vimos en el paso 2, esto reemplazará BoundField por un TemplateField que contiene un ItemTemplate y EditItemTemplate por un Label y TextBox cuyas propiedades Text están enlazadas al valor HiredDate mediante la sintaxis de enlace de datos <%# Bind("HiredDate")%>.

Para reemplazar el texto por un control Calendario, edite la plantilla quitando la etiqueta y agregando un control Calendario. En el Diseñador, seleccione Editar plantillas en la etiqueta inteligente de GridView y elija HireDateTemplateFieldItemTemplate en la lista desplegable. A continuación, elimine el control Etiqueta y arrastre un control Calendario desde el Cuadro de herramientas a la interfaz de edición de plantillas.

Figura 12: agregar un control de calendario al de HireDateTemplateFieldItemTemplate (haga clic para ver la imagen de tamaño completo)

En este punto, cada fila de GridView contendrá un control Calendario en su HiredDate TemplateField. Sin embargo, el valor real HiredDate del empleado no se establece en ningún lugar del control Calendario, lo que hace que cada control Calendario muestre de forma predeterminada el mes y la fecha actuales. Para solucionar esto, es necesario asignar el HiredDate de cada empleado a las propiedades SelectedDate del control Calendario y VisibleDate.

En la etiqueta inteligente del control Calendario, elija Editar DataBindings. A continuación, enlace las propiedades SelectedDate y VisibleDate al campo de datos HiredDate.

Figura 13: enlazar las propiedades SelectedDate y VisibleDate al HiredDatecampo de datos (haga clic para ver la imagen de tamaño completo)

Nota:

La fecha seleccionada del control Calendario no debe estar necesariamente visible. Por ejemplo, un calendario puede tener el 1 de agosto de 1999 como fecha seleccionada, pero mostrar el mes y el año actuales. La fecha seleccionada y la fecha visible se especifican mediante las propiedades SelectedDate y VisibleDate del control Calendario. Dado que queremos seleccionar el HiredDate empleado y asegurarnos de que se muestra que necesitamos enlazar ambas propiedades al campo de datos HireDate.

Al ver la página en un explorador, el calendario muestra ahora el mes de la fecha de contratación del empleado y selecciona esa fecha concreta.

Figura 14: el HiredDate del empleado se muestra en el Control de calendario (haga clic para ver la imagen de tamaño completo)

Nota:

Al contrario de todos los ejemplos que hemos visto hasta ahora, para este tutorial no hemos establecido la propiedad EnableViewState a False para este GridView. El motivo de esta decisión es que al hacer clic en las fechas del control Calendario se produce un postback, estableciendo la fecha seleccionada del calendario en la fecha en la que acaba de hacer clic. Sin embargo, si el estado de vista de GridView está deshabilitado, en cada postback, los datos de GridView se vuelven a enlazar a su origen de datos subyacente, lo que hace que la fecha seleccionada del calendario se establezca atrás en el empleadoHireDate, sobrescribiendo la fecha elegida por el usuario.

En este tutorial se trata de una discusión de moot, ya que el usuario no puede actualizar el HireDate del empleado. Probablemente sería mejor configurar el control Calendario para que sus fechas no se puedan seleccionar. Independientemente de este tutorial, se muestra que, en algunas circunstancias, el estado de vista debe estar habilitado para proporcionar cierta funcionalidad.

Paso 4: mostrar el número de días que el empleado ha trabajado para la empresa

Hasta ahora hemos visto dos aplicaciones de TemplateFields:

• Combinar dos o más valores de campo de datos en una columna, y
• Expresar un valor de campo de datos mediante un control web en lugar de texto

Un tercer uso de TemplateFields consiste en mostrar metadatos sobre los datos subyacentes de GridView. Además de mostrar las fechas de contratación de los empleados, por ejemplo, también podríamos querer tener una columna que muestre cuántos días totales han estado en el trabajo.

Otro uso de TemplateFields surge en escenarios en los que los datos subyacentes deben mostrarse de forma diferente en el informe de página web que en el formato almacenado en la base de datos. Imagine que la tabla Employees tenía un campo Gender que almacenaba el carácter M o F para indicar el sexo del empleado. Al mostrar esta información en una página web, es posible que deseemos mostrar el género como "Masculino" o "Femenino", en lugar de solo "M" o "F".

Ambos escenarios se pueden controlar mediante la creación de un método de formato en la clase de código subyacente de la página ASP.NET (o en una biblioteca de clases independiente, implementada como un método Shared) que se invoca desde la plantilla. Este método de formato se invoca desde la plantilla mediante la misma sintaxis de enlace de datos que se ha visto anteriormente. El método de formato puede tomar cualquier número de parámetros, pero debe devolver una cadena. Esta cadena devuelta es el HTML que se inserta en la plantilla.

Para ilustrar este concepto, vamos a aumentar nuestro tutorial para mostrar una columna que muestra el número total de días que un empleado ha estado en el trabajo. Este método de formato tardará en un objeto Northwind.EmployeesRow y devolverá el número de días que el empleado se ha empleado como una cadena. Este método se puede agregar a la clase de código subyacente de la página de ASP.NET, pero debe marcarse como Protected o Public para que sea accesible desde la plantilla.

Protected Function DisplayDaysOnJob(employee As Northwind.EmployeesRow) As String
    ' Make sure HiredDate is not NULL... if so, return "Unknown"
    If employee.IsHireDateNull() Then
        Return "Unknown"
    Else
        ' Returns the number of days between the current
        ' date/time and HireDate
        Dim ts As TimeSpan = DateTime.Now.Subtract(employee.HireDate)
        Return ts.Days.ToString("#,##0")
    End If
End Function

Dado que el campo HiredDate puede contener NULL valores de base de datos, primero debemos asegurarnos de que el valor no es NULL antes de continuar con el cálculo. Si el valor HiredDate es NULL, simplemente se devuelve la cadena "Unknown"; si no es NULL, calculamos la diferencia entre la hora actual y el valor HiredDate y devuelve el número de días.

Para usar este método, es necesario invocarlo desde TemplateField en GridView mediante la sintaxis de enlace de datos. Comience agregando un nuevo TemplateField a GridView haciendo clic en el vínculo Editar columnas de la etiqueta inteligente de GridView y agregando un nuevo TemplateField.

Figura 15: agregar un nuevo TemplateField a GridView (haga clic para ver la imagen de tamaño completo)

Establezca esta nueva propiedad de TemplateField HeaderText en "Días en el trabajo" y su propiedad HorizontalAlign de ItemStyle en Center. Para llamar al método DisplayDaysOnJob desde la plantilla, agregue un ItemTemplate y use la siguiente sintaxis de enlace de datos:

<%# DisplayDaysOnJob(CType(CType(Container.DataItem, DataRowView).Row,
    Northwind.EmployeesRow)) %>

Container.DataItem devuelve un objeto DataRowView correspondiente al registro DataSource enlazado al GridViewRow. Su propiedad Row devuelve el Northwind.EmployeesRow fuertemente tipado, que se pasa al método DisplayDaysOnJob. Esta sintaxis de enlace de datos puede aparecer directamente en el ItemTemplate (como se muestra en la sintaxis declarativa siguiente) o se puede asignar a la propiedad Text de un control Web Label.

Nota:

Como alternativa, en lugar de pasar una instancia de EmployeesRow, podríamos pasar el valor HireDate mediante <%# DisplayDaysOnJob(Eval("HireDate")) %>. Sin embargo, el método Eval devuelve un Object, por lo que tendríamos que cambiar nuestra firma de método DisplayDaysOnJob para aceptar un parámetro de entrada de tipo Object, en su lugar. No se puede convertir ciegamente la llamada de Eval("HireDate") a un DateTime porque la columna HireDate de la tabla Employees puede contener valores NULL. Por lo tanto, tendríamos que aceptar un Object como parámetro de entrada para el método DisplayDaysOnJob, comprobar si tenía un valor NULL de base de datos (que se puede lograr mediante Convert.IsDBNull(objectToCheck)) y, a continuación, continuar en consecuencia.

Debido a estas sutilezas, he optado por pasar toda la instancia EmployeesRow. En el siguiente tutorial veremos un ejemplo más adecuado para usar la sintaxis Eval("columnName") para pasar un parámetro de entrada a un método de formato.

A continuación se muestra la sintaxis declarativa de GridView después de agregar TemplateField y el método DisplayDaysOnJob llamado desde el ItemTemplate:

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
    DataKeyNames="EmployeeID" DataSourceID="ObjectDataSource1">
    <Columns>
        <asp:TemplateField HeaderText="Name"
          SortExpression="FirstName">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Label ID="Label1" runat="server"
                    Text='<%# Bind("FirstName") %>'></asp:Label>
                <asp:Label ID="Label2" runat="server"
                    Text='<%# Eval("LastName") %>'></asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="Title" HeaderText="" Title"
            SortExpression="Title" />
        <asp:TemplateField HeaderText="HireDate" SortExpression="
            HireDate">
            <EditItemTemplate>
                <asp:TextBox ID="TextBox2" runat="server"
                    Text='<%# Bind("HireDate") %>'></asp:TextBox>
            </EditItemTemplate>
            <ItemTemplate>
                <asp:Calendar ID="Calendar1" runat="server"
                    SelectedDate='<%# Bind("HireDate") %>'
                    VisibleDate='<%# Eval("HireDate") %>'>
                </asp:Calendar>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Days On The Job">
            <ItemTemplate>
                <%# DisplayDaysOnJob(CType(CType(Container.DataItem, DataRowView).Row,
                    Northwind.EmployeesRow)) %>
            </ItemTemplate>
            <ItemStyle HorizontalAlign="Center" />
        </asp:TemplateField>
    </Columns>
</asp:GridView>

En la figura 16 se muestra el tutorial completado, cuando se ve a través de un explorador.

Figura 16: se muestra el número de días que el empleado ha estado en el trabajo (haga clic para ver la imagen de tamaño completo)

Resumen

TemplateField en el control GridView permite un mayor grado de flexibilidad para mostrar datos de los que están disponibles con los otros controles de campo. TemplateFields es ideal para situaciones en las que:

• Es necesario mostrar varios campos de datos en una columna GridView
• Los datos se expresan mejor mediante un control web en lugar de texto sin formato
• La salida depende de los datos subyacentes, como mostrar metadatos o volver a formatear los datos

Además de personalizar la visualización de datos, TemplateFields también se usa para personalizar las interfaces de usuario que se usan para editar e insertar datos, como veremos en los siguientes tutoriales.

Los dos tutoriales siguientes continúan explorando plantillas, empezando por un vistazo al uso de TemplateFields en un DetailsView. Después, pasaremos a FormView, que usa plantillas en lugar de campos para proporcionar mayor flexibilidad en el diseño y la estructura de los datos.

¡Feliz programación!

Acerca del autor

Scott Mitchell, autor de siete libros de ASP/ASP.NET y fundador de 4GuysFromRolla.com, lleva trabajando con tecnologías web de Microsoft desde 1998. Scott trabaja como consultor independiente, instructor y escritor. Su libro más reciente es Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Puede ponerse en contacto con él en mitchell@4GuysFromRolla.com. o a través de su blog, http://ScottOnWriting.NET.

Agradecimientos especiales a

Esta serie de tutoriales fue revisada por un gran número de revisores. El revisor principal de este tutorial fue Dan Jagers. ¿Le interesa revisar mis próximos artículos de MSDN? Si es así, escríbame a mitchell@4GuysFromRolla.com.

AnteriorSiguiente