Formatação personalizada com base em dados (C#)

por Scott Mitchell

Descarregar PDF

O ajuste do formato do GridView, DetailsView ou FormView com base nos dados vinculados a ele pode ser feito de várias maneiras. Neste tutorial, veremos como realizar a formatação vinculada a dados por meio do uso dos manipuladores de eventos DataBound e RowDataBound.

Introdução

A aparência dos controles GridView, DetailsView e FormView pode ser personalizada por meio de uma infinidade de propriedades relacionadas ao estilo. Propriedades como CssClass, Font, , BorderWidth, BorderStyleBorderColor, Width, e Height, entre outras, ditam a aparência geral do controle renderizado. As propriedades, incluindo HeaderStyle, RowStyle, AlternatingRowStyle, e outras, permitem que essas mesmas configurações de estilo sejam aplicadas a seções específicas. Da mesma forma, essas configurações de estilo podem ser aplicadas no nível do campo.

Em muitos cenários, porém, os requisitos de formatação dependem do valor dos dados exibidos. Por exemplo, para chamar a atenção para produtos fora de estoque, um relatório listando informações de produtos pode definir a cor de plano de fundo como amarelo para os produtos cujos UnitsInStock campos e UnitsOnOrder são iguais a 0. Para destacar os produtos mais caros, podemos querer exibir os preços desses produtos que custam mais de US $ 75,00 em uma fonte em negrito.

O ajuste do formato do GridView, DetailsView ou FormView com base nos dados vinculados a ele pode ser feito de várias maneiras. Neste tutorial, veremos como realizar a formatação vinculada a dados por meio do uso dos manipuladores de DataBound eventos e RowDataBound . No próximo tutorial, exploraremos uma abordagem alternativa.

Usando o manipulador de eventosDataBounddo controle DetailsView

Quando os dados são vinculados a um DetailsView, seja a partir de um controle de origem de dados ou através da atribuição programática de dados à propriedade DataSource do controle e a chamada do seu método DataBind(), a seguinte sequência de passos ocorre:

1. O evento DataBinding do controlo de dados da Web é acionado.
2. Os dados estão vinculados ao controle Web de dados.
3. O evento DataBound do controlo de dados da Web é acionado.

A lógica personalizada pode ser injetada imediatamente após as etapas 1 e 3 por meio de um manipulador de eventos. Ao criar um manipulador de eventos para o DataBound evento, podemos determinar programaticamente os dados que foram vinculados ao controle da Web de dados e ajustar a formatação conforme necessário. Para ilustrar isso, vamos criar um DetailsView que listará informações gerais sobre um produto, mas irá exibir o valor em negrito e itálico se exceder US$ 75,00.

Etapa 1: Exibindo as informações do produto em um DetailsView

Abra a página CustomColors.aspx na pasta CustomFormatting, arraste um controle DetailsView da Caixa de Ferramentas para o Designer, defina o seu valor de propriedade ID como ExpensiveProductsPriceInBoldItalic, e associe-o a um novo controle ObjectDataSource que invoca o método ProductsBLL da classe GetProducts(). As etapas detalhadas para realizar isso são omitidas aqui por brevidade, uma vez que as examinamos em detalhes em tutoriais anteriores.

Depois de vincular o ObjectDataSource ao DetailsView, reserve um momento para modificar a lista de campos. Optei por remover o ProductID, SupplierID, CategoryID, UnitsInStock, UnitsOnOrder, ReorderLevele Discontinued BoundFields e renomeei e reformatei os BoundFields restantes. Eu também limpei as configurações de Width e Height. Como o DetailsView exibe apenas um único registro, precisamos habilitar a paginação para permitir que o usuário final visualize todos os produtos. Para isso, marque a caixa de seleção Ativar paginação na marca inteligente do DetailsView.

Figura 1: Marque a caixa de seleção Ativar paginação na marca inteligente do DetailsView (Clique para visualizar a imagem em tamanho real)

Após essas alterações, a marcação 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>

Reserve um momento para testar esta página no seu navegador.

Figura 2: O controle DetailsView exibe um produto de cada vez (Clique para visualizar a imagem em tamanho real)

Etapa 2: Determinando programaticamente o valor dos dados no manipulador de eventos DataBound

Para exibir o preço em negrito e itálico para aqueles produtos cujo UnitPrice valor excede US $ 75,00, precisamos primeiro ser capazes de determinar programaticamente o UnitPrice valor. Para o DetailsView, isso pode ser feito no manipulador de DataBound eventos. Para criar o manipulador de eventos, clique em DetailsView no Designer e navegue até a janela Propriedades. Pressione F4 para exibi-lo, se não estiver visível, ou vá para o menu Exibir e selecione a opção de menu Janela de propriedades. Na janela Propriedades, clique no ícone de raio para listar os eventos do DetailsView. Em seguida, clique duas vezes no DataBound evento ou digite o nome do manipulador de eventos que você deseja criar.

Figura 3: Criar um manipulador de eventos para o DataBound evento

Isso criará automaticamente o manipulador de eventos e levará você para a parte do código onde ele foi adicionado. Neste ponto, você verá:

protected void ExpensiveProductsPriceInBoldItalic_DataBound(object sender, EventArgs e)
{

}

Os dados vinculados ao DetailsView podem ser acessados através da DataItem propriedade. Lembre-se de que estamos vinculando nossos controles a um DataTable fortemente tipado, que é composto por uma coleção de instâncias DataRow fortemente tipadas. Quando o DataTable é associado ao DetailsView, a primeira DataRow do DataTable é atribuída à propriedade DataItem do DetailsView. Especificamente, a DataItem propriedade recebe um DataRowView objeto. Podemos usar a propriedade DataRowView's Row para obter acesso ao objeto subjacente DataRow, que na verdade é uma instância ProductsRow. Uma vez que tenhamos essa ProductsRow instância, podemos tomar nossa decisão simplesmente inspecionando os valores de propriedade do objeto.

O código a seguir ilustra como determinar se o UnitPrice valor vinculado ao controle DetailsView é maior 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
    }
}

Observação

Como UnitPrice pode ter um valor NULL no banco de dados, primeiro verificamos se não estamos lidando com um valor NULL antes de acessar a propriedade ProductsRow de UnitPrice. Essa verificação é importante porque, se tentarmos acessar a UnitPrice propriedade quando ela tiver um NULL valor, o ProductsRow objeto lançará uma exceção StrongTypingException.

Etapa 3: Formatar o valor de UnitPrice no DetailsView

Neste ponto, podemos determinar se o UnitPrice valor vinculado ao DetailsView tem um valor que excede $75,00, mas ainda não vimos como ajustar programaticamente a formatação do DetailsView de acordo. Para modificar a formatação de uma linha inteira no DetailsView, acesse programaticamente a linha usando DetailsViewID.Rows[index]; para modificar uma célula específica, use o acesso DetailsViewID.Rows[index].Cells[index]. Uma vez que tenhamos uma referência à linha ou célula, podemos ajustar sua aparência definindo suas propriedades relacionadas ao estilo.

Acessar uma linha programaticamente requer que você conheça o índice da linha, que começa em 0. A UnitPrice linha é a quinta linha no DetailsView, dando-lhe um índice de 4 e tornando-o programaticamente acessível usando ExpensiveProductsPriceInBoldItalic.Rows[4]. Neste ponto, podemos ter todo o conteúdo da linha exibido em negrito e itálico usando o seguinte código:

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

No entanto, isso fará com que tanto o rótulo (Preço) quanto o valor fiquem em negrito e itálico. Se quisermos tornar apenas o valor em negrito e itálico, precisamos aplicar essa formatação na segunda célula da linha, o que pode ser obtido usando o seguinte:

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

Como nossos tutoriais até agora usaram folhas de estilo para manter uma separação clara entre a marcação renderizada e as informações relacionadas ao estilo, em vez de definir as propriedades de estilo específicas, como mostrado acima, vamos usar uma classe CSS. Abra a Styles.css folha de estilo e adicione uma nova classe CSS nomeada ExpensivePriceEmphasis com a seguinte definição:

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

Em seguida, no manipulador de DataBound eventos, defina a propriedade da CssClass célula como ExpensivePriceEmphasis. O código a seguir mostra o manipulador de DataBound eventos em sua totalidade:

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";
    }
}

Ao visualizar o Chai, que custa menos de US$ 75,00, o preço é exibido em uma fonte normal (veja a Figura 4). No entanto, ao visualizar Mishi Kobe Niku, que tem um preço de US $ 97,00, o preço é exibido em uma fonte em negrito e itálico (veja a Figura 5).

Figura 4: Preços inferiores a US$ 75,00 são exibidos em uma fonte normal (Clique para visualizar a imagem em tamanho real)

Figura 5: Os preços dos produtos caros são exibidos em negrito e itálico (Clique para visualizar a imagem em tamanho real)

Usando o manipulador de eventosDataBounddo controle FormView

As etapas para determinar os dados subjacentes vinculados a um FormView são idênticas às de um DetailsView, criar um manipulador de DataBound eventos, converter a DataItem propriedade para o tipo de objeto apropriado vinculado ao controle e determinar como proceder. O FormView e o DetailsView diferem, no entanto, em como a aparência da interface do usuário é atualizada.

O FormView não contém nenhum BoundFields e, portanto, não tem a Rows coleção. Em vez disso, um FormView é composto de modelos, que podem conter uma mistura de HTML estático, controles da Web e sintaxe de vinculação de dados. Ajustar o estilo de um FormView normalmente envolve ajustar o estilo de um ou mais dos controles da Web dentro dos modelos do FormView.

Para ilustrar isso, vamos usar um FormView para listar produtos como no exemplo anterior, mas desta vez vamos exibir apenas o nome do produto e as unidades em estoque com as unidades em estoque exibidas em uma fonte vermelha se for menor ou igual a 10.

Etapa 4: Exibindo as informações do produto em um FormView

Adicione um FormView à CustomColors.aspx página abaixo de DetailsView e defina sua ID propriedade como LowStockedProductsInRed. Associe o FormView ao controle ObjectDataSource criado na etapa anterior. Isso criará um ItemTemplate, EditItemTemplatee InsertItemTemplate para o FormView. Remova o EditItemTemplate e InsertItemTemplate e simplifique o ItemTemplate para incluir apenas os valores ProductName e UnitsInStock, cada um nos seus próprios controlos de etiquetas com o nome apropriado. Como acontece com o DetailsView do exemplo anterior, também marque a caixa de seleção Ativar Paginação nas opções inteligentes do FormView.

Após essas edições, a marcação do FormView deve ser semelhante à seguinte:

<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>

Note-se que o ItemTemplate contém:

• HTML estático o texto "Product:" e "Units In Stock:" juntamente com os elementos <br /> e <b>.
• Controles Web os dois controles Label, ProductNameLabel e UnitsInStockLabel.
• Sintaxe de vinculação de dados: a sintaxe <%# Bind("ProductName") %> e <%# Bind("UnitsInStock") %>, que atribui os valores desses campos às propriedades dos controlos Text Labels.

Etapa 5: Determinando programaticamente o valor dos dados no manipulador de eventos DataBound

Com a marcação do FormView concluída, a próxima etapa é determinar programaticamente se o UnitsInStock valor é menor ou igual a 10. Isso é feito exatamente da mesma maneira com o FormView como era com o DetailsView. Comece criando um manipulador de eventos para o evento do DataBound FormView.

Figura 6: Criar o DataBound manipulador de eventos

No manipulador de eventos, DataItem converta a propriedade do FormView numa instância de ProductsRow e determine se o valor de UnitsInPrice é tal que precisamos exibi-lo com uma fonte vermelha.

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
    }
}

Etapa 6: Formatando o controle de rótulo UnitsInStockLabel no ItemTemplate do FormView

A etapa final é formatar o valor exibido UnitsInStock em uma fonte vermelha se o valor for 10 ou menos. Para fazer isso, precisamos acessar programaticamente o controle UnitsInStockLabel no ItemTemplate e definir suas propriedades de estilo para que seu texto seja exibido em vermelho. Para aceder a um controlo Web num modelo, utilize o método FindControl("controlID") desta forma:

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

Para o nosso exemplo, queremos acessar um controle Label cujo ID valor é UnitsInStockLabel, então usaríamos:

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

Depois de termos uma referência programática ao controle Web, podemos modificar suas propriedades relacionadas ao estilo conforme necessário. Como no exemplo anterior, criei uma classe CSS em Styles.css chamada LowUnitsInStockEmphasis. Para aplicar esse estilo ao controle Label Web, defina sua CssClass propriedade de acordo.

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";
        }
    }
}

Observação

A sintaxe para formatar um modelo acessando programaticamente o controle da Web usando FindControl("controlID") e definindo suas propriedades relacionadas ao estilo também pode ser usada ao usar TemplateFields nos controles DetailsView ou GridView. Examinaremos TemplateFields em nosso próximo tutorial.

A Figura 7 mostra o FormView ao visualizar um produto cujo UnitsInStock valor é maior que 10, enquanto o produto na Figura 8 tem seu valor menor que 10.

Figura 7: Para produtos com unidades suficientemente grandes em estoque, nenhuma formatação personalizada é aplicada (Clique para visualizar a imagem em tamanho real)

Figura 8: O número de unidades em estoque é mostrado em vermelho para os produtos com valores de 10 ou menos (Clique para ver a imagem em tamanho real)

Formatação com o evento doRowDataBoundGridView

Anteriormente, examinamos a sequência de etapas pelas quais os controles DetailsView e FormView avançam durante a vinculação de dados. Vamos revisar estes passos mais uma vez como uma recapitulação.

1. O evento DataBinding do controlo de dados da Web é acionado.
2. Os dados estão vinculados ao controle Web de dados.
3. O evento DataBound do controlo de dados da Web é acionado.

Essas três etapas simples são suficientes para DetailsView e FormView porque exibem apenas um único registro. Para o GridView, que exibe todos os registros vinculados a ele (não apenas o primeiro), a etapa 2 é um pouco mais envolvida.

Na etapa 2, o GridView enumera a fonte de dados e, para cada registro, cria uma GridViewRow instância e vincula o registro atual a ela. Para cada GridViewRow adicionado ao GridView, dois eventos são gerados:

• RowCreatedincêndios após a criação do GridViewRow
• RowDataBound dispara após o registro atual ter sido vinculado ao GridViewRow.

Para o GridView, então, a vinculação de dados é descrita com mais precisão pela seguinte sequência de etapas:

1. O evento DataBinding do GridView é acionado.

2. Os dados são vinculados ao GridView.

   Para cada registo na fonte de dados

   1. Criar um GridViewRow objeto
   2. Disparar o RowCreated evento
   3. Vincular o registro ao GridViewRow
   4. Disparar o RowDataBound evento
   5. Adicionar GridViewRow à coleção Rows

3. O evento DataBound do GridView é acionado.

Para personalizar o formato dos registros individuais do GridView, precisamos criar um manipulador de eventos para o RowDataBound evento. Para ilustrar isso, vamos adicionar um GridView à CustomColors.aspx página que lista o nome, a categoria e o preço de cada produto, destacando os produtos cujo preço é inferior a US$ 10,00 com uma cor de fundo amarela.

Etapa 7: Exibindo informações do produto em um GridView

Adicione um GridView abaixo do FormView do exemplo anterior e defina sua ID propriedade como HighlightCheapProducts. Como já temos um ObjectDataSource que retorna todos os produtos na página, vincule o GridView a isso. Por fim, edite os BoundFields do GridView para incluir apenas os nomes, categorias e preços dos produtos. Após essas edições, a marcação do GridView deve ter a seguinte aparência:

<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>

A Figura 9 mostra nosso progresso até este ponto quando visualizada através de um navegador.

Figura 9: O GridView lista o nome, a categoria e o preço de cada produto (Clique para visualizar a imagem em tamanho real)

Etapa 8: Determinando programaticamente o valor dos dados no manipulador de eventos RowDataBound

Quando o ProductsDataTable é vinculado ao GridView, suas instâncias ProductsRow são enumeradas e, para cada ProductsRow, um GridViewRow é criado. A propriedade GridViewRow de DataItem é atribuída ao objeto específico ProductRow, após o que o manipulador de eventos do GridView RowDataBound é acionado. Para determinar o UnitPrice valor de cada produto vinculado ao GridView, então, precisamos criar um manipulador de eventos para o evento do RowDataBound GridView. Neste manipulador de eventos, podemos inspecionar o valor de UnitPrice do GridViewRow atual e decidir a formatação dessa linha.

Esse manipulador de eventos pode ser criado usando a mesma série de etapas que com o FormView e DetailsView.

Figura 10: Criar um manipulador de eventos para o evento do RowDataBound GridView

Criar o manipulador de eventos dessa maneira fará com que o código a seguir seja adicionado automaticamente à parte de código da página ASP.NET:

protected void HighlightCheapProducts_RowDataBound(object sender, GridViewRowEventArgs e)
{

}

Quando o RowDataBound evento é acionado, o manipulador de eventos passa como seu segundo parâmetro um objeto do tipo GridViewRowEventArgs, que tem uma propriedade chamada Row. Esta propriedade retorna uma referência ao GridViewRow que acabou de ser associado aos dados. Para acessar a ProductsRow instância vinculada ao GridViewRow usamos a DataItem propriedade assim:

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...
    }
}

Ao trabalhar com o RowDataBound manipulador de eventos, é importante ter em mente que o GridView é composto por diferentes tipos de linhas e que esse evento é acionado para todos os tipos de linha. O tipo de A GridViewRowpode ser determinado por sua RowType propriedade e pode ter um dos valores possíveis:

• DataRow uma linha que está vinculada a um registro do GridView DataSource
• EmptyDataRow a linha que é exibida se o DataSource do GridView estiver vazio
• Footer a linha de rodapé; mostrada se a propriedade do ShowFooter GridView estiver definida como true
• Header a linha de cabeçalho; mostrado se a propriedade ShowHeader do GridView estiver definida como true (o padrão)
• Pager para as GridViews que estão implementando paginação, a linha que exibe a interface de paginação
• Separator não usado para o GridView, mas usado pelas propriedades dos controles DataList e Repeater, dois controles Web de dados sobre os quais discutiremos em tutoriais futuros

Como as EmptyDataRowlinhas , Header, Footer, e Pager não estão associadas a um DataSource registro, elas sempre terão um null valor para sua DataItem propriedade. Por esta razão, antes de tentar trabalhar com a propriedade do GridViewRowDataItem atual, primeiro devemos certificar-nos de que estamos a lidar com um DataRow. Isso pode ser feito verificando a propriedade do GridViewRow como esta:

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...
        }
    }
}

Etapa 9: Realçando a linha amarela quando o valor de preço unitário é inferior a $10.00

A última etapa é destacar programaticamente todo o GridViewRow se o valor UnitPrice dessa linha for inferior a 10,00 $. A sintaxe para acessar as linhas ou células de um GridView é a mesma que com o DetailsView GridViewID.Rows[index] para acessar a linha inteira, GridViewID.Rows[index].Cells[index] para acessar uma célula específica. No entanto, quando o manipulador de eventos RowDataBound é acionado, os dados vinculados GridViewRow ainda não foram adicionados à coleção Rows do GridView. Portanto, não é possível acessar a instância atual GridViewRow do RowDataBound manipulador de eventos utilizando a coleção de linhas.

Em vez de GridViewID.Rows[index], podemos fazer referência à instância atual de GridViewRow no manipulador de RowDataBound eventos usando e.Row. Ou seja, para destacar a instância atual GridViewRow do RowDataBound manipulador de eventos, usaríamos:

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

Em vez de definir a GridViewRowpropriedade do BackColor diretamente, vamos nos ater ao uso de classes CSS. Criei uma classe CSS chamada AffordablePriceEmphasis que define a cor do plano de fundo como amarelo. O manipulador de eventos concluído RowDataBound segue:

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";
        }
    }
}

Figura 11: Os produtos mais acessíveis estão destacados em amarelo (Clique para visualizar a imagem em tamanho real)

Resumo

Neste tutorial, vimos como formatar o GridView, DetailsView e FormView com base nos dados vinculados ao controle. Para fazer isso, criamos um manipulador de eventos para os eventos DataBound ou RowDataBound, onde se examinaram os dados subjacentes juntamente com uma mudança de formatação, se necessário. Para aceder aos dados associados a um DetailsView ou FormView, usamos a propriedade DataItem no manipulador de eventos DataBound; para um GridView, a propriedade de cada instância GridViewRowDataItem contém os dados associados a essa linha, que estão disponíveis no evento RowDataBound.

A sintaxe para ajustar programaticamente a formatação do controle Web de dados depende do controle Web e de como os dados a serem formatados são exibidos. Para os controles DetailsView e GridView, as linhas e células podem ser acessadas por um índice ordinal. Para o FormView, que usa modelos, o FindControl("controlID") método é comumente usado para localizar um controle da Web de dentro do modelo.

No próximo tutorial, veremos como usar modelos com o GridView e o DetailsView. Além disso, veremos outra técnica para personalizar a formatação com base nos dados subjacentes.

Feliz Programação!

Sobre o Autor

Scott Mitchell, autor de sete livros sobre ASP/ASP.NET e fundador da 4GuysFromRolla.com, trabalha com tecnologias Web da Microsoft desde 1998. Scott trabalha como consultor, formador e escritor independente. Seu último livro é Sams Teach Yourself ASP.NET 2.0 in 24 Hours. Ele pode ser contatado em mitchell@4GuysFromRolla.com.

Um agradecimento especial a

Esta série de tutoriais foi revisada por muitos revisores úteis. Os principais revisores deste tutorial foram E.R. Gilmore, Dennis Patterson e Dan Jagers. Interessado em rever meus próximos artigos do MSDN? Se for o caso, envie-me uma mensagem para mitchell@4GuysFromRolla.com.

Próximo