Configuração do Banco e Criação do Projeto

Neste artigo veremos como formatar os dados no GridView, para exibamos dados mais intuitivos ao usuário. O projeto será feito em ASP.NET, usando a linguagem C# e o banco de dados SQL Server. Acompanhem:

Introdução

A ideia deste artigo é a de, a partir do retorno dos dados de uma consulta em uma tabela no GridView, formatar estes dados para que tenham um visual mais intuitivo ao usuário, de forma agradável.

Dito isto, usaremos o banco de dados de exemplo da Microsoft Northwind. Se você não o tem instalado em seu SQL Server, baixe por aqui. Depois de baixado e instalado, você deve anexar o Northwind à sua instância local do SQL Server. Para isso, abra seu SQL, clique com o botão direito em Databases e clique em Attach...;agora clique em Add e vá na pasta C:\SQL Server 2000 Sample Databases, escolha o arquivo NORTHWND.MDF, clique em OK duas vezes e aguarde. Note na Figura 01 que o banco foi criado:

Database Northwind
Figura 01 – Database Northwind.

Aproveite para “fuçar” o banco, visualizando suas Tabelas, Procedures e Views. Esse banco é muito útil, assim como o AdventureWorks, também de exemplo da Microsoft.

Antes de criar o projeto, devemos criar a conexão entre o Visual Studio e o Northwind. Para quem usa Windows 7 (como é o meu caso) o Visual Studio deve ser executado como administrador. Ainda sem projeto criado, abra a janela Server Explorer, clique com o botão direito em Data Connections e clique em Add Connection. Na nova tela, selecione seu servidor SQL, escolha o database Northwind e clique em OK.

Agora sim, crie o projeto do tipo ASP.NET Web Site, dando o nome FormatandoDadosGridView. Na página que é exibida adicione um controle do tipo GridView. Para não perdermos tempo, vamos adicionar a fonte de dados via design. Para isso, abra a SmartTag do GridView e clique em Choose Data Source e escolha a opção New data source.

Escolha o tipo Database, dê um nome qualquer, clique em OK. Agora escolha a string de conexão referente ao Northwind(se não tiver só adiciona-lo pelo botão New Connection). Finalizando, salve a string de conexão, clique em Next e, na próxima tela, escolha as colunas da tabela Products. A Figura 02 ilustra as colunas escolhidas:

Colunas da Tabela Products
Figura 02 – Colunas da Tabela Products.

Se quiser clique em Test Query e veja o resultado. Clique em Finish para que nossa configuração tenha efeito no GridView.

Aperte F5 e veja os dados no GridView. Irá aparecer uma mensagem do web.config(para modifica-lo permitindo assim o debug), só clicar em OK e aguardar alguns segundos. O resultado será exibido na Figura 03:

  com os dados da tabela Products
Figura 03 – GridView com os dados da tabela Products.

Continuando de onde paramos vamos formatar nosso GridView para exibirmos as colunas e os registros de uma forma mais amigável ao usuário. Para isso vá ao modo Source da aspx e no controle adicione a chamada ao evento OnRowDataBound, como vemos abaixo, na Listagem 01:

Listagem 01 – Chamada na aspx ao evento RowDataBound.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"

            BackColor="White" BorderColor="#999999" BorderStyle="None" BorderWidth="1px"

            CellPadding="3" DataSourceID="SqlDataSource1"

            GridLines="Vertical" OnRowDataBound="GridView1_RowDataBound"> 

Fizemos a chamada na aspx, agora devemos fazer no code-behind. Para isso, aperte F7 para irmos a página de códigos, entre no método Page_Load e faça a chamada ao evento, como mostra a Figura 01:

Chamada no code-behind ao evento RowDataBound
Figura 01 – Chamada no code-behind ao evento RowDataBound.

Obs: Esta forma de chamar eventos é conhecida como delegate.

Dica: após digitar += aperte a tecla Tab duas vezes seguidas para que o evento seja criado automaticamente. Não se esqueça de adicionar o modificador protected no início da chamada ao evento.

Agora vamos codificar o evento. O código abaixo mostra como alterar o nome das colunas e formatar os dados dos registros exibidos. Confira na Listagem 02:

Listagem 02 – Codificação no evento RowDataBound para formatar os dados do Grid.

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        if (e.Row.RowType == DataControlRowType.DataRow)
        {
            //Altero o nome das colunas
            GridView1.Columns[0].HeaderText = "Código";
            GridView1.Columns[1].HeaderText = "Nome do Produto";
            GridView1.Columns[2].HeaderText = "Preço Unitário";
            GridView1.Columns[3].HeaderText = "Unidades em Estoque";

            //Registros das colunas Código, Preço Unitário e Unidades em Estoque centralizados
            GridView1.Columns[0].ItemStyle.HorizontalAlign = HorizontalAlign.Center;
            GridView1.Columns[2].ItemStyle.HorizontalAlign = HorizontalAlign.Center;
            GridView1.Columns[3].ItemStyle.HorizontalAlign = HorizontalAlign.Center;

            //Todos registros em negrito
            GridView1.Style.Add("font-weight", "bold");

            //Registros da coluna Preço Unitário em cor vermelha
            GridView1.Columns[2].ItemStyle.ForeColor = Color.Red;
        }
    }

Agora mande executar o projeto e veja o resultado. A Figura 02 nos mostra o GridView com a formatação aplicada:

GridView com formatação aplicada
Figura 02 – GridView com formatação aplicada.

Note que é bem simples manipularmos o GridView, podendo assim aplicar praticamente qualquer tipo de formatação que desejarmos!