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. 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 Formate 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 eu 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 EnablePaging 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