ASP .NET 4.0 – Aplicando estilos com CSS em um GridView – iMasters

we are developers
.NET
Tem 594 artigos publicados com 35356165 visualizações desde 2011
é referência em Visual Basic no Brasil e autor dos livros "Aprenda Rápido: ASP" e "ASP, ADO e Banco de Dados na Internet". Mantenedor do site macoratti.net.
Para demonstrar como aplicar estilos a um Gridview, vamos criar um site simples, acessar um banco de dados e preencher um controle gridview com os dados. A seguir, teremos aplicar um estilo ao controle GridView usando um arquivo CSS (Cascading Style Sheet).
Abra o Microsoft Visual Studio Express 2012 For Web e no menu File clique em New WebSite. A seguir, selecione a linguagem Visual Basic, o template ASP .NET Empty Web Site e informe o nome GridView_CSS. Ao final, clique em OK.
aspn_gdvss1
Logo após, faça o seguinte:
Com isso incluímos o banco de dados Northwind.mdf em nosso site. Na janela Solution Explorer veremos a seguinte estrutura:
aspn_gdvss2
Vamos usar a tabela Products do banco de dados Northwind.mdf.
Agora vamos incluir um formulário web no projeto:
aspn_gdvss2
aspn_gdvss4
aspn_gdvss5
aspn_gdvss6
aspn_gdvss7
A seguir, defina o código abaixo no arquivo de estilo que iremos usar:
aspn_gdvss8
O controle GridView gera uma tabela na qual exibe seus dados. A fim de aplicar um estilo no gridview, devemos aplicar uma classe ao grid para que os efeitos das células da tabela que realmente afetar. Iniciamos com o cabeçalho da tabela e alteramos o tamanho da fonte, peso e cor na tag ‘th’. Adicionamos uma borda simples e alguns estofamentos. Em seguida, aplicamos o estilo na tag ‘td’ adicionando em algum estofamento e em uma borda simples.
Abra o arquivo Default.aspx no modo Source e, a seguir, selecione e arraste o arquivo de estilo StyleSheet.css no interior da tag head para referenciar o arquivo css:
aspn_gdvss9
Agora, defina a propriedade CssClass do controle GridView para gridview:
aspn_gdvssa
Pronto!
Executando o projeto iremos ver o estilo aplicado ao GridView conforme abaixo:
aspn_gdvssb
O exemplo aplica um estilo bem simples, mas fique a vontade para incrementá-lo!
Pegue o projeto completo aqui: GridView_CSS.zip
De 0 a 10, o quanto você recomendaria este artigo para um amigo?
é referência em Visual Basic no Brasil e autor dos livros "Aprenda Rápido: ASP" e "ASP, ADO e Banco de Dados na Internet". Mantenedor do site macoratti.net.
Fique em dia com as novidades do iMasters! Assine nossa newsletter e receba conteúdos especiais curados por nossa equipe

source

4tune

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *