ASP .NET - Usando arquivos de estilo com GridView


Eu quero usar um estilo CSS no meu GridView ao invés de efetuar as configurações de estilo para as propriedades itemstyle,header.... Como eu posso fazer isso ?

Elementar meu caro...

Vamos usar o Visual Web Developer 2008 Express Edition , é grátis e não temos que torrar um centavo.

Crie um novo web site chamado gdvCss e no formulário padrão Default.aspx inclua um controle GridView;

No evento Load da página do arquivo Default.aspx.vb inclua o código para fornecer dados para serem exibidos no GridView:

  Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load

        Dim dados As New List(Of Conta)()

        dados.Add(New Conta("Macoratti", 12002, "C"))
        dados.Add(New Conta("Miriam", 8900, "C"))
        dados.Add(New Conta("Jessica", 15558, "C"))
        dados.Add(New Conta("Jefferson", 1100, "D"))
        dados.Add(New Conta("Janice", 60, "C"))
        dados.Add(New Conta("Mario", 1450, "C"))
        dados.Add(New Conta("Marcia", 8900, "C"))
        dados.Add(New Conta("Yuri", 158, "C"))
        dados.Add(New Conta("Ygor", 100, "D"))
        dados.Add(New Conta("Bianca", 160, "C"))


        gridView.DataSource = dados
        GridView.DataBind()
    End Sub

No menu Web Site , opção Add New Item , selecione o template Class e informe o nome Conta.vb.

Esta classe será usada para preencher com dados a lista dados. A seguir inclua o seguinte código nesta classe:

Imports Microsoft.VisualBasic

Public Class Conta

    Private m_nome As String
    Private m_valor As Decimal
    Private m_flag As String

    Public Sub New(ByVal nome As String, ByVal valor As Decimal, ByVal flag As String)
        Me.m_nome = nome
        Me.m_valor = valor
        Me.m_flag = flag
    End Sub

    Public Property Valor() As Decimal
        Get
            Return m_valor
        End Get
        Set(ByVal value As Decimal)
            m_valor = value
        End Set
    End Property

    Public Property Nome() As String
        Get
            Return m_nome
        End Get
        Set(ByVal value As String)
            m_nome = value
        End Set
    End Property
    Public Property Flag() As String
        Get
            Return m_flag
        End Get
        Set(ByVal value As String)
            m_flag = value
        End Set
    End Property
End Class

A classe Conta é muito simples; ela possui 3 membros e 3 propriedades : Nome, Valor e Flag.

Até aqui só preparei o ambiente para exibir os dados no gridview agora é que vamos realmente atacar o problema criando um arquivo de estilo chamado tabulardata.

No arquivo de estilo vamos criar um class com o nome tabulardata e em seguida definir o class para a propriedade CssClass do controle GridView:

O arquivo de estilo pode ser criado in-line ou você pode também criar o arquivo na pasta especial do projeto ASP.NET.

Vou mostrar as duas maneiras de obter o mesmo resultado:

Nota: Para detalhes sobre como usar Themes e Skins veja os meus artigos:

1- ) Aplicando um estilo usando temas (Theme):

Clique com o botão direito do mouse sobre o nome do projeto e selecione Add ASP .NET Folder ->Theme;

Em seguida altere o nome da pasta para Tema;

A seguir clique com o botão direito sobre a pasta Tema e selecione Add New Item ;

Na janela a seguir selecione o template Style Sheet e informe o nome estilo.css;

Selecionando o arquivo estilo.css o VWD lhe mostra o editor de estilos com recursos que você pode usar para definir estilos;

Crie o arquivo de estilo conforme abaixo ou , se preferir, defina o seu próprio estilo;

Para ativar o estilo abra o arquivo web.config e na tag <pages> inclua  theme="Tema" indicando o nome da pasta onde esta o arquivo criado;

Para aplicar o tema a apenas uma página você pode definir o atributo Theme indicando o nome do tema criado:

<%@ Page Language="VB" Theme="Tema" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %>

Pronto ! se executar o projeto verá o estilo aplicado ao gridview;

2-) Aplicando um estilo diretamente na páginas .aspx

Esta forma é mais direta mas inclui o estilo diretamente na sua página .aspx o que pode dificultar a manutenção. Imagine se você usar esta técnica para 100 páginas e depois tiver que realizar uma alteração ???

No arquivo Default.aspx vamos criar o Class chamado tabulardata e definir o estilo para o GridView definindo valores para TD, TR TD e a cor de fundo:

<head runat="server">
    <title>Usando um CSS com GridView</title>
    <style type="text/css">
        TABLE.tabulardata {
	        background-color: #6699FF;
        }
        TABLE.tabulardata TR {
	        background-color: Aqua;
        }
        TABLE.tabulardata TH {
	        	background: #7492D2;
              	color: #FFFFFF;
	            padding:4px;
        }
        TABLE.tabulardata TD 
        {
	           padding: 4px;
        }
    </style>
</head>

Finalmente na tag <body> defina as propriedades do GridView conforme abaixo:

<body>
    <form id="form1" runat="server">
    <div style="height: 250px; overflow: auto;"> 
       <asp:GridView runat="server" ID="gridView"  CSSClass="tabulardata" CellSpacing="1" GridLines="None"/>
    </div>
    </form>
</body>

Com isso você viu duas formas de aplicar estilos ao GridView sem usar o assistente de formatação.

Até o próximo artigo ASP .NET...


José Carlos Macoratti