Compartir a través de

Formato personalizado basado en datos (C#)

de Scott Mitchell

Descargar PDF

Ajustar el formato de GridView, DetailsView o FormView en función de los datos enlazados a él se puede lograr de varias maneras. En este tutorial, analizaremos cómo lograr el formato enlazado a datos mediante el uso de los controladores de eventos DataBound y RowDataBound.

Introducción

La apariencia de los controles GridView, DetailsView y FormView se puede personalizar a través de una gran cantidad de propiedades relacionadas con el estilo. Las propiedades como CssClass, Font, BorderWidth, BorderStyleBorderColor, , Widthy Height, entre otras, dictan la apariencia general del control representado. Las propiedades que incluyen HeaderStyle, RowStyle, AlternatingRowStyley otras permiten aplicar estas mismas opciones de estilo a secciones concretas. Del mismo modo, esta configuración de estilo se puede aplicar en el nivel de campo.

Sin embargo, en muchos escenarios, los requisitos de formato dependen del valor de los datos mostrados. Por ejemplo, para llamar la atención sobre los productos agotados, un informe que lista la información de productos podría establecer el color de fondo en amarillo para aquellos productos cuyos campos UnitsInStock y UnitsOnOrder son ambos iguales a 0. Para resaltar los productos más caros, es posible que deseemos mostrar los precios de esos productos que cuestan más de $75.00 en una fuente negrita.

Ajustar el formato de GridView, DetailsView o FormView en función de los datos enlazados a él se puede lograr de varias maneras. En este tutorial, veremos cómo realizar el formato enlazado a datos mediante el uso de los controladores de eventos DataBound y RowDataBound. En el siguiente tutorial exploraremos un enfoque alternativo.

Uso del manejador de eventos delDataBoundcontrol DetailsView

Cuando los datos se enlazan a detailsView, ya sea desde un control de origen de datos o mediante la asignación mediante programación de datos a la propiedad del DataSource control y la llamada a su DataBind() método, se produce la siguiente secuencia de pasos:

  1. Se desencadena el evento del control web de DataBinding datos.
  2. Los datos se enlazan al control web de datos.
  3. Se desencadena el evento del control web de DataBound datos.

La lógica personalizada se puede insertar inmediatamente después de los pasos 1 y 3 a través de un controlador de eventos. Al crear un controlador de eventos para el DataBound evento, podemos determinar mediante programación los datos que se han enlazado al control web de datos y ajustar el formato según sea necesario. Para ilustrar esto, vamos a crear un DetailsView que mostrará información general sobre un producto, pero mostrará el UnitPrice valor en una fuente en negrita y cursiva si supera los 75,00 USD.

Paso 1: Mostrar la información del producto en un DetailsView

Abra la página CustomColors.aspx en la carpeta CustomFormatting, arrastre un control DetailsView desde el Cuadro de herramientas al Diseñador, establezca el valor de su propiedad ID en ExpensiveProductsPriceInBoldItalic y vincule con un nuevo control ObjectDataSource que invoca el método ProductsBLL de la clase GetProducts(). Los pasos detallados para realizar esto se omiten aquí para mayor brevedad, ya que los examinamos con detalle en los tutoriales anteriores.

Una vez que haya enlazado ObjectDataSource a DetailsView, dedique un momento a modificar la lista de campos. He optado por quitar los ProductID, SupplierID, CategoryID, UnitsInStock, UnitsOnOrder, ReorderLevel y Discontinued BoundFields y he cambiado el nombre y el formato de los BoundFields restantes. También he borrado las configuraciones Width y Height. Dado que DetailsView solo muestra un único registro, es necesario habilitar la paginación para permitir que el usuario final vea todos los productos. Para ello, active la casilla "Habilitar paginación" en la etiqueta inteligente de DetailsView.

Activa la casilla Habilitar paginación en la etiqueta inteligente de DetailsView.

Figura 1: Active la casilla Habilitar paginación en la etiqueta inteligente de DetailsView (haga clic para ver la imagen de tamaño completo)

Después de estos cambios, el marcado DetailsView será:

<asp:DetailsView ID="DetailsView1" runat="server" AllowPaging="True"
    AutoGenerateRows="False" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" EnableViewState="False">
    <Fields>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="SupplierName" HeaderText="Supplier"
          ReadOnly="True" SortExpression="SupplierName" />
        <asp:BoundField DataField="QuantityPerUnit"
          HeaderText="Qty/Unit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Fields>
</asp:DetailsView>

Dedique un momento a probar esta página en el explorador.

El control DetailsView muestra un producto a la vez

Figura 2: El control DetailsView muestra un producto a la vez (haga clic para ver la imagen de tamaño completo)

Paso 2: Determinar mediante programación el valor de los datos en el controlador de eventos DataBound

Para mostrar el precio en negrita, fuente cursiva para aquellos productos cuyo UnitPrice valor supere los 75,00 USD, primero es necesario poder determinar el UnitPrice valor mediante programación. Para DetailsView, esto se puede lograr en el controlador de DataBound eventos. Para crear el controlador de eventos, haga clic en DetailsView en el Diseñador y, a continuación, vaya a la ventana Propiedades. Presione F4 para abrirlo, si no está visible, o vaya al menú Ver y seleccione la opción de menú Ventana Propiedades. En la ventana Propiedades, haga clic en el icono de rayo para enumerar los eventos de DetailsView. A continuación, haga doble clic en el DataBound evento o escriba el nombre del controlador de eventos que desea crear.

Creación de un controlador de eventos para el evento DataBound

Figura 3: Crear un controlador de eventos para el DataBound evento

Al hacerlo, se creará automáticamente el controlador de eventos y se le llevará a la parte de código donde se ha agregado. En este momento verá lo siguiente:

protected void ExpensiveProductsPriceInBoldItalic_DataBound(object sender, EventArgs e)
{

}

Se puede acceder a los datos enlazados a DetailsView a través de la DataItem propiedad . Recuerde que estamos enlazando nuestros controles a una DataTable fuertemente tipada, que se compone de una colección de instancias de DataRow fuertemente tipadas. Cuando el DataTable está enlazado a DetailsView, la primera fila de datos en la tabla de datos se asigna a la propiedad DataItem de DetailsView. En concreto, a la DataItem propiedad se le asigna un DataRowView objeto . Podemos usar la propiedad DataRowView de Row para obtener acceso al objeto DataRow subyacente, que es realmente una instancia de ProductsRow. Una vez que tengamos esta ProductsRow instancia, podemos tomar nuestra decisión simplemente inspeccionando los valores de propiedad del objeto.

En el código siguiente se muestra cómo determinar si el UnitPrice valor enlazado al control DetailsView es mayor que $75.00:

protected void ExpensiveProductsPriceInBoldItalic_DataBound(object sender, EventArgs e)
{
    // Get the ProductsRow object from the DataItem property...
    Northwind.ProductsRow product = (Northwind.ProductsRow)
        ((DataRowView)ExpensiveProductsPriceInBoldItalic.DataItem).Row;
    if (!product.IsUnitPriceNull() && product.UnitPrice > 75m)
    {
        // TODO: Make the UnitPrice text bold and italic
    }
}

Nota:

Como UnitPrice puede tener NULL valor en la base de datos, primero verificamos que no estamos tratando con NULL valor antes de acceder a la ProductsRow propiedad de UnitPrice. Esta comprobación es importante porque si intentamos acceder a la UnitPrice propiedad cuando tiene un NULL valor, el ProductsRow objeto producirá una excepción StrongTypingException.

Paso 3: Aplicar formato al valor UnitPrice en DetailsView

En este punto podemos determinar si el UnitPrice valor enlazado a DetailsView tiene un valor que supera los 75,00 USD, pero todavía tenemos que ver cómo ajustar mediante programación el formato de DetailsView en consecuencia. Para modificar el formato de una fila completa en DetailsView, acceda a la fila mediante programación con DetailsViewID.Rows[index]; para modificar una celda determinada, acceda directamente utilizando DetailsViewID.Rows[index].Cells[index]. Una vez que tengamos una referencia a la fila o celda, podemos ajustar su apariencia estableciendo sus propiedades relacionadas con el estilo.

El acceso a una fila requiere mediante programación que conozca el índice de la fila, que comienza en 0. La UnitPrice fila es la quinta fila de DetailsView, lo que le proporciona un índice de 4 y hace que sea accesible mediante programación mediante ExpensiveProductsPriceInBoldItalic.Rows[4]. En este punto, podríamos tener el contenido de toda la fila mostrado en una fuente en negrita y cursiva mediante el código siguiente:

ExpensiveProductsPriceInBoldItalic.Rows[4].Font.Bold = true;
ExpensiveProductsPriceInBoldItalic.Rows[4].Font.Italic = true;

Sin embargo, esto hará que tanto la etiqueta (Precio) como el valor estén en negrita y cursiva. Si queremos hacer solo el valor en negrita y cursiva, es necesario aplicar este formato a la segunda celda de la fila, que se puede lograr con lo siguiente:

ExpensiveProductsPriceInBoldItalic.Rows[4].Cells[1].Font.Bold = true;
ExpensiveProductsPriceInBoldItalic.Rows[4].Cells[1].Font.Italic = true;

Dado que nuestros tutoriales hasta ahora han usado hojas de estilos para mantener una separación limpia entre el marcado representado y la información relacionada con el estilo, en lugar de establecer las propiedades de estilo específicas como se muestra anteriormente, vamos a usar en su lugar una clase CSS. Abra la hoja de Styles.css estilos y agregue una nueva clase CSS denominada ExpensivePriceEmphasis con la siguiente definición:

.ExpensivePriceEmphasis
{
    font-weight: bold;
    font-style: italic;
}

A continuación, en el controlador de eventos DataBound, establezca la propiedad CssClass de la celda en ExpensivePriceEmphasis. El código siguiente muestra el DataBound controlador de eventos en su totalidad:

protected void ExpensiveProductsPriceInBoldItalic_DataBound(object sender, EventArgs e)
{
    // Get the ProductsRow object from the DataItem property...
    Northwind.ProductsRow product = (Northwind.ProductsRow)
        ((DataRowView)ExpensiveProductsPriceInBoldItalic.DataItem).Row;
    if (!product.IsUnitPriceNull() && product.UnitPrice > 75m)
    {
        ExpensiveProductsPriceInBoldItalic.Rows[4].Cells[1].CssClass =
            "ExpensivePriceEmphasis";
    }
}

Al ver Chai, que cuesta menos de $75.00, el precio se muestra en una fuente normal (vea la figura 4). Sin embargo, al ver Mishi Kobe Niku, que tiene un precio de $97.00, el precio se muestra en una fuente negrita y cursiva (véase la figura 5).

Los precios inferiores a $75.00 se muestran en una fuente normal

Figura 4: Los precios inferiores a 75,00 USD se muestran en una fuente normal (haga clic para ver la imagen de tamaño completo)

Los precios de los productos caros se muestran en una fuente negrita y cursiva

Figura 5: Los precios de los productos caros se muestran en negrita, fuente cursiva (haga clic para ver la imagen de tamaño completo)

Uso del manejador de eventos delDataBoundcontrol FormView

Los pasos para determinar los datos subyacentes enlazados a un FormView son idénticos a los de un DetailsView: crear un controlador de eventos DataBound, convertir la propiedad DataItem al tipo de objeto adecuado enlazado al control y determinar cómo proceder. FormView y DetailsView difieren, sin embargo, en la forma en que se actualiza la apariencia de la interfaz de usuario.

FormView no contiene ningún BoundFields y, por tanto, carece de la Rows colección. En su lugar, formView se compone de plantillas, que pueden contener una combinación de html estático, controles web y sintaxis de enlace de datos. Ajustar el estilo de un FormView normalmente implica ajustar el estilo de uno o varios de los controles Web dentro de las plantillas de FormView.

Para ilustrar esto, vamos a usar un FormView para enumerar productos como en el ejemplo anterior, pero esta vez vamos a mostrar solo el nombre del producto y las unidades en stock con las unidades de stock mostradas en una fuente roja si es menor o igual que 10.

Paso 4: Mostrar la información del producto en un FormView

Agregue un FormView a la página debajo del componente CustomColors.aspx DetailsView y establezca su propiedad ID en LowStockedProductsInRed. Enlace formView al control ObjectDataSource creado a partir del paso anterior. Esto creará un ItemTemplate, EditItemTemplatey InsertItemTemplate para FormView. Elimine EditItemTemplate y InsertItemTemplate y simplifique ItemTemplate para incluir solo los valores ProductName y UnitsInStock, cada uno en sus propios controles Label apropiadamente nombrados. Al igual que con DetailsView del ejemplo anterior, active también la casilla Habilitar paginación en la etiqueta inteligente de FormView.

Después de estas modificaciones, el marcado de FormView debe ser similar al siguiente:

<asp:FormView ID="LowStockedProductsInRed" DataKeyNames="ProductID"
    DataSourceID="ObjectDataSource1" AllowPaging="True"
    EnableViewState="False" runat="server">
    <ItemTemplate>
        <b>Product:</b>
        <asp:Label ID="ProductNameLabel" runat="server"
         Text='<%# Bind("ProductName") %>'>
        </asp:Label><br />
        <b>Units In Stock:</b>
        <asp:Label ID="UnitsInStockLabel" runat="server"
          Text='<%# Bind("UnitsInStock") %>'>
        </asp:Label>
    </ItemTemplate>
</asp:FormView>

Tenga en cuenta que el ItemTemplate contiene:

  • HTML estático el texto "Product:" y "Units In Stock:" junto con los elementos <br /> y <b>.
  • Controles web de los dos controles ProductNameLabel Label y UnitsInStockLabel.
  • Sintaxis de enlace de datos y <%# Bind("ProductName") %><%# Bind("UnitsInStock") %> , que asigna los valores de estos campos a las propiedades de Text los controles Label.

Paso 5: Determinar mediante programación el valor de los datos en el controlador de eventos DataBound

Con el marcado de FormView completado, el siguiente paso consiste en determinar mediante programación si el UnitsInStock valor es menor o igual que 10. Esto se logra exactamente de la misma manera con FormView que con detailsView. Empiece por crear un controlador de eventos para el evento de DataBound FormView.

Creación del controlador de eventos DataBound

Figura 6: Crear el DataBound controlador de eventos

En el controlador de eventos, convierta la propiedad DataItem de FormView en una instancia de ProductsRow y determine si el valor de UnitsInPrice es tal que necesitamos mostrarlo con un color de fuente rojo.

protected void LowStockedProductsInRed_DataBound(object sender, EventArgs e)
{
    // Get the ProductsRow object from the DataItem property...
    Northwind.ProductsRow product = (Northwind.ProductsRow)
        ((DataRowView)LowStockedProductsInRed.DataItem).Row;
    if (!product.IsUnitsInStockNull() && product.UnitsInStock <= 10)
    {
        // TODO: Make the UnitsInStockLabel text red
    }
}

Paso 6: Aplicar formato al control UnitsInStockLabel Label en el ItemTemplate de el FormView

El último paso consiste en dar formato al valor mostrado UnitsInStock en una fuente roja si el valor es 10 o menos. Para ello, es necesario acceder mediante programación al UnitsInStockLabel control en ItemTemplate y establecer sus propiedades de estilo para que su texto se muestre en rojo. Para acceder a un control web en una plantilla, use el FindControl("controlID") método de la siguiente manera:

WebControlType someName = (WebControlType)FormViewID.FindControl("controlID");

En nuestro ejemplo queremos acceder a un control Label cuyo ID valor es UnitsInStockLabel, por lo que usaríamos:

Label unitsInStock =
    (Label)LowStockedProductsInRed.FindControl("UnitsInStockLabel");

Una vez que tengamos una referencia mediante programación al control Web, podemos modificar sus propiedades relacionadas con el estilo según sea necesario. Al igual que con el ejemplo anterior, he creado una clase CSS en Styles.css denominada LowUnitsInStockEmphasis. Para aplicar este estilo al control Web Label, establezca su CssClass propiedad en consecuencia.

protected void LowStockedProductsInRed_DataBound(object sender, EventArgs e)
{
    // Get the ProductsRow object from the DataItem property...
    Northwind.ProductsRow product = (Northwind.ProductsRow)
        ((DataRowView)LowStockedProductsInRed.DataItem).Row;
    if (!product.IsUnitsInStockNull() && product.UnitsInStock <= 10)
    {
        Label unitsInStock =
            (Label)LowStockedProductsInRed.FindControl("UnitsInStockLabel");

        if (unitsInStock != null)
        {
          unitsInStock.CssClass = "LowUnitsInStockEmphasis";
        }
    }
}

Nota:

La sintaxis para dar formato a una plantilla accediendo mediante programación al control Web mediante FindControl("controlID") y, a continuación, establecer sus propiedades relacionadas con el estilo también se puede usar al usar TemplateFields en los controles DetailsView o GridView. Examinaremos TemplateFields en el siguiente tutorial.

Las figuras 7 muestran formView al ver un producto cuyo UnitsInStock valor es mayor que 10, mientras que el producto de la figura 8 tiene su valor inferior a 10.

Para productos con unidades suficientemente grandes en stock, no se aplica ningún formato personalizado

Figura 7: Para productos con unidades suficientemente grandes en stock, no se aplica ningún formato personalizado (haga clic para ver la imagen de tamaño completo)

Las unidades del número de stock se muestran en rojo para esos productos con valores de 10 o menos

Figura 8: Las unidades del número de stock se muestran en rojo para esos productos con valores de 10 o menos (haga clic para ver la imagen de tamaño completo)

Formato con el evento del RowDataBoundGridView

Anteriormente hemos examinado la secuencia de pasos que siguen los controles DetailsView y FormView durante la vinculación de datos. Echemos un vistazo a estos pasos una vez más a modo de repaso.

  1. Se desencadena el evento del control web de DataBinding datos.
  2. Los datos se enlazan al control web de datos.
  3. Se desencadena el evento del control web de DataBound datos.

Estos tres pasos sencillos son suficientes para DetailsView y FormView porque solo muestran un único registro. Para GridView, que muestra todos los registros enlazados a él (no solo el primero), el paso 2 es un poco más implicado.

En el paso 2, GridView enumera el origen de datos y, para cada registro, crea una GridViewRow instancia y enlaza el registro actual a él. Para cada GridViewRow agregado a GridView, se generan dos eventos:

  • RowCreated se desencadena una vez GridViewRow ha sido creado
  • RowDataBound se desencadena después de que el registro actual se haya enlazado al GridViewRow.

Para GridView, el enlace de datos se describe con más precisión mediante la siguiente secuencia de pasos:

  1. El evento DataBinding de GridView se desencadena.

  2. Los datos se enlazan a GridView.

    Para cada registro del origen de datos

    1. Cree un objeto GridViewRow
    2. Lanzar el evento RowCreated
    3. Vincule el registro a GridViewRow
    4. Lanzar el evento RowDataBound
    5. Añade GridViewRow a la colección Rows

  3. El evento DataBound de GridView se desencadena.

Para personalizar el formato de los registros individuales de GridView, es necesario crear un controlador de eventos para el RowDataBound evento. Para ilustrar esto, vamos a agregar una GridView a la CustomColors.aspx página que muestra el nombre, la categoría y el precio de cada producto, resaltando esos productos cuyo precio es inferior a 10,00 USD con un color de fondo amarillo.

Paso 7: Mostrar información del producto en gridView

Agregue un control GridView debajo del FormView del ejemplo anterior y establezca la propiedad ID en HighlightCheapProducts. Puesto que ya tenemos un ObjectDataSource que devuelve todos los productos de la página, enlace el GridView a este. Por último, edite los BoundFields de GridView para incluir solo los nombres, categorías y precios de los productos. Después de editar el marcado de GridView debe ser similar al siguiente:

<asp:GridView ID="HighlightCheapProducts" AutoGenerateColumns="False"
    DataKeyNames="ProductID" DataSourceID="ObjectDataSource1"
    EnableViewState="False" runat="server">
    <Columns>
        <asp:BoundField DataField="ProductName" HeaderText="Product"
          SortExpression="ProductName" />
        <asp:BoundField DataField="CategoryName" HeaderText="Category"
          ReadOnly="True" SortExpression="CategoryName" />
        <asp:BoundField DataField="UnitPrice" DataFormatString="{0:c}"
          HeaderText="Price"
            HtmlEncode="False" SortExpression="UnitPrice" />
    </Columns>
</asp:GridView>

En la figura 9 se muestra nuestro progreso hasta este punto cuando se ve a través de un explorador.

GridView enumera el nombre, la categoría y el precio de cada producto.

Figura 9: GridView enumera el nombre, la categoría y el precio de cada producto (haga clic para ver la imagen de tamaño completo)

Paso 8: Determinar mediante programación el valor de los datos en el controlador de eventos RowDataBound

Cuando el ProductsDataTable está enlazado a GridView, sus ProductsRow instancias se enumeran y por cada ProductsRow, se crea un GridViewRow. La propiedad GridViewRow de DataItem se asigna al determinado ProductRow, después de lo cual se activa el controlador de eventos de RowDataBound de GridView. Para determinar el UnitPrice valor de cada producto enlazado a GridView, es necesario crear un controlador de eventos para el evento de RowDataBound GridView. En este controlador de eventos, podemos inspeccionar el UnitPrice valor del actual GridViewRow y tomar una decisión de formato para esa fila.

Este controlador de eventos se puede crear con la misma serie de pasos que con FormView y DetailsView.

Crear un controlador de eventos para el evento RowDataBound de GridView

Figura 10: Crear un controlador de eventos para el evento de RowDataBound GridView

La creación del controlador de eventos de esta manera hará que el código siguiente se agregue automáticamente a la parte de código de la página de ASP.NET:

protected void HighlightCheapProducts_RowDataBound(object sender, GridViewRowEventArgs e)
{

}

Cuando se desencadena el RowDataBound evento, el controlador de eventos se pasa como segundo parámetro un objeto de tipo GridViewRowEventArgs, que tiene una propiedad denominada Row. Esta propiedad devuelve una referencia al objeto que solo estaba enlazado a GridViewRow datos. Para acceder a la ProductsRow instancia enlazada a la GridViewRow, usamos la propiedad DataItem de la siguiente manera:

protected void HighlightCheapProducts_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Get the ProductsRow object from the DataItem property...
    Northwind.ProductsRow product = (Northwind.ProductsRow)
        ((System.Data.DataRowView)e.Row.DataItem).Row;
    if (!product.IsUnitPriceNull() && product.UnitPrice < 10m)
    {
        // TODO: Highlight the row yellow...
    }
}

Al trabajar con el RowDataBound controlador de eventos, es importante tener en cuenta que GridView se compone de diferentes tipos de filas y que este evento se desencadena para todos los tipos de fila. El GridViewRowtipo de un objeto se puede determinar mediante su RowType propiedad y puede tener uno de los valores posibles:

  • DataRow una fila enlazada a un registro de GridView DataSource
  • EmptyDataRow la fila que se muestra si DataSource GridView está vacío
  • Footer la fila de pie de página; se muestra si la propiedad de ShowFooter GridView está establecida en true
  • Header la fila de encabezado; se muestra si la propiedad ShowHeader de GridView está establecida en true (el valor predeterminado)
  • Pager para GridViews que implementan la paginación, la fila que muestra la interfaz de paginación
  • Separator no se usa para el GridView, pero las propiedades se utilizan en los controles de DataList y Repeater, que son dos controles web de datos que se analizarán en futuros tutoriales.

Dado que las EmptyDataRowfilas , Header, Footery Pager no están asociadas a un DataSource registro, siempre tendrán un null valor para su DataItem propiedad. Por este motivo, antes de intentar asegurarnos de trabajar con la propiedad actual GridViewRowDataItem, primero debemos asegurarnos de que estamos tratando con un DataRow. Esto se puede lograr comprobando la propiedad GridViewRow del RowType de la siguiente manera:

protected void HighlightCheapProducts_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Make sure we are working with a DataRow
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Get the ProductsRow object from the DataItem property...
        Northwind.ProductsRow product = (Northwind.ProductsRow)
            ((System.Data.DataRowView)e.Row.DataItem).Row;
        if (!product.IsUnitPriceNull() && product.UnitPrice < 10m)
        {
          // TODO: Highlight row yellow...
        }
    }
}

Paso 9: Resaltar la fila amarilla Cuando el valor unitPrice es menor que $10.00

El último paso consiste en resaltar de forma programática todo GridViewRow si el valor UnitPrice de esa fila es inferior a 10,00 $. La sintaxis para acceder a las filas o celdas de GridView es la misma que con DetailsView GridViewID.Rows[index] para acceder a toda la fila, GridViewID.Rows[index].Cells[index] para acceder a una celda determinada. Sin embargo, cuando el RowDataBound controlador de eventos se dispara, los datos enlazados GridViewRow aún no se han agregado a la colección de Rows GridView. Por lo tanto, no puede acceder a la instancia actual GridViewRow desde el RowDataBound controlador de eventos mediante la colección Rows.

En lugar de GridViewID.Rows[index], podemos hacer referencia a la instancia actual GridViewRow en el RowDataBound controlador de eventos mediante e.Row. Es decir, para resaltar la instancia actual GridViewRow del controlador de eventos RowDataBound, usaríamos:

e.Row.BackColor = System.Drawing.Color.Yellow;

En lugar de establecer la GridViewRowpropiedad de BackColor directamente, vamos a usar clases CSS. He creado una clase CSS denominada AffordablePriceEmphasis que establece el color de fondo en amarillo. El controlador de eventos completado RowDataBound sigue:

protected void HighlightCheapProducts_RowDataBound(object sender, GridViewRowEventArgs e)
{
    // Make sure we are working with a DataRow
    if (e.Row.RowType == DataControlRowType.DataRow)
    {
        // Get the ProductsRow object from the DataItem property...
        Northwind.ProductsRow product = (Northwind.ProductsRow)
            ((System.Data.DataRowView)e.Row.DataItem).Row;
        if (!product.IsUnitPriceNull() && product.UnitPrice < 10m)
        {
            e.Row.CssClass = "AffordablePriceEmphasis";
        }
    }
}

Los productos más asequibles están resaltados en amarillo

Figura 11: Los productos más asequibles están resaltados en amarillo (haga clic para ver la imagen de tamaño completo)

Resumen

En este tutorial hemos visto cómo dar formato a GridView, DetailsView y FormView en función de los datos enlazados al control. Para ello, creamos un controlador de eventos para los eventos DataBound o RowDataBound, donde se examinaron los datos subyacentes junto con un cambio de formato, si este era necesario. Para tener acceso a los datos enlazados a detailsView o FormView, usamos la DataItem propiedad en el DataBound controlador de eventos; para un GridView, la propiedad de GridViewRow cada DataItem instancia contiene los datos enlazados a esa fila, que está disponible en el RowDataBound controlador de eventos.

La sintaxis para ajustar mediante programación el formato del control web de datos depende del control web y de cómo se muestran los datos a los que se va a dar formato. Para los controles DetailsView y GridView, un índice ordinal puede acceder a las filas y celdas. Para FormView, que usa plantillas, el FindControl("controlID") método se usa normalmente para buscar un control web desde dentro de la plantilla.

En el siguiente tutorial veremos cómo usar plantillas con GridView y DetailsView. Además, veremos otra técnica para personalizar el formato en función de los datos subyacentes.

¡Feliz programación!

Acerca del autor

Scott Mitchell, autor de siete libros de ASP/ASP.NET y fundador de 4GuysFromRolla.com, ha estado trabajando con tecnologías web de Microsoft desde 1998. Scott trabaja como consultor independiente, entrenador y escritor. Su último libro es Sams Teach Yourself ASP.NET 2.0 en 24 horas. Se puede contactar con él en mitchell@4GuysFromRolla.com.

Agradecimientos especiales a

Esta serie de tutoriales contó con la revisión de muchos revisores que fueron de gran ayuda. Los revisores principales de este tutorial fueron E.R. Gilmore, Dennis Patterson y Dan Jagers. ¿Le interesa revisar mis próximos artículos de MSDN? Si es así, mándame un mensaje a mitchell@4GuysFromRolla.com.

Próximo