Visual Web Developer 2005 Express Edition Beta 2 ASP.NET 2.0 - Conhecendo o GridView

Na versão do Visual Studio .NET 2003 um dos componentes mais utilizados é o DataGrid, no Visual Studio .NET 2005 ele foi aprimorado e recebeu um novo nome GridView.

por Fabio Galante Mans

Na versão do Visual Studio .NET 2003 um dos componentes mais utilizados é o DataGrid, no Visual Studio .NET 2005 ele foi aprimorado e recebeu um novo nome GridView. Este componente permite através de Wizards exibir dados, criar paginação e ordenação sem você precisar digitar nenhuma linha de código.

Objetivo - Através deste artigo explicarei passo a passo como utilizar o GridView.

Requisitos - Visual Studio .NET 2005 Beta 2 ou Visual Web Developer 2005 Express Edition Beta 2 ASP.NET 2.0.

Banco de dados - Irei utilizar o arquivo Northwind.mdb ao invés do SQL Server, pois muitos não instalado em sua máquina.

Criando o projeto - Estou utilizando o VWD 2005 Beta 2, clique em File New Web Site, em seguida no Location mantenha File System, como linguagem estou utilizando Visual C# e o nome do meu projeto é GridView, conforme Figura I.

Figura I

O VWD criará o arquivo Default.axp - Figura II

Figura II

Na Toolbox / Data o VWD possuí os componentes que trabalham com dados, veja estes componentes - Figura III.

Figura III

Figura IV

Arraste o controle GridView sobre o arquivo Default.aspx, repare que na parte superior do GridView possui uma pequena seta, clicando você terá acesso ao Smart Tags, onde facilmente você poderá formatar a GridView.

Clique em Auto Format e selecione um scheme, em seguida OK, isto formatará o GridView. Formatamos o GridView agora iremos trabalhar com o Data Source. No Smart Tags clique na seta em Choose Data Source e em seguida New Data Source - Figura V.

Figura V

Figura VI

O próximo passo será de onde nós iremos recuperar os dados, neste exemplo estou utilizando o arquivo NorthWind.mdb. clique em Access Database, você pode manter o nome do ID da conexão em Specify na ID for the data source, ou digitar outro. Veja o exemplo na Figura VI. Clicando em OK, a próxima tela será como na Figura VII.

Figura VII

Nosso próximo passo será localizar o arquivo Northwind.mdb, na meu caso eu encontrei em C:\Arquivos de programas\Microsoft Office\OFFICE11\SAMPLES, copie este arquivo para dentro da pasta App_Data do seu projeto, caso não saiba onde está salvo seu projeto utilize um novo recurso do VWD chamado Open Containing Folder conforme Figura VIII. Clique com o botão direito do mouse em cima da aba do arquivo Default.aspx e em seguida Open Containing Folder, será aberto a pasta do seu projeto.

Figura VIII

De volta a Figura VII clique em Browse... em seguida localize o arquivo Northwind dentro da pasta App_Data e clique em OK. Figura IX (Eu precisei fechar o VWD e abrir novamente para aparecer o arquivo mdb).

Figura IX Em seguida clique clique em Next, Figura X, na próxima tela será exibido as tabelas do arquivo mdb. - Figura XI.

Figura X

Figura XI

Selecione em Specify columns from a table or view a tabela Produtos e as seguintes colunas - CódigoDoProduto, NomeDoProduto, QuantidadePorUnidade e UnidadesEmEstoque, clique em Next em seguida Test Query. Figura XII. Em seguida Finish

Figura XII

Figura XIII

Na figura XIII podemos perceber que o GridView preencheu os cabeçalho com o nome das colunas. Clique em F5 para salvar/compilar e executar a aplicação. O VWD informará se você deseja incluir o arquivo Web.config ao projeto, selecione Add a new Web.config em clique em OK, Figura XIV

Figura XIV

Figura XV

Na Figura XV, podemos visualizar os dados sendo exibidos no GridView.

Trocando os nomes do cabeçalho, criando paginação e ordenação.

Figura XVI

Clique em Source para visualizar o código HTML localize HeaderText e escolha o nome de sua preferência. Figura XVI.

Figura XVII

Na Figura XVII, podemos visualizar a coluna modificada.

Para criar a paginação e ordenação abra a Smart Tag e habilite Enable Paging e Enable Sorting, Figura XVIII

Figura XVIII

Utilize a tecla F5 para rodar aplicação e veja na Figura XIX os dados sendo exibidos, também podemos visualizar que existe a ordenação e a paginação.

Figura XIX

Na Figura XX podemos visualizar o que temos que fazer utilizando o VS 2003.

Figura XX

Abraços e até o próximo artigo.

Fábio Galante Mans