ASP .NET 2.0 - Utilizando o GridView e DetailsView

Neste artigo nosso objetivo será popular o GridView com o banco de dados Northwind.mdb (no artigo anterior mostrei como localizar o arquivo Northwind.mdb) e listar a tabela Funcionários, ao selecionar uma linha no GridView poderemos alterar os dados deste registro através deste outro novo componente, o DetailsView.

por Fabio Galante Mans

No artigo anterior aprendemos a popular o novo componente GridView, vimos que facilmente podemos exibir os dados, realizar ordenação e paginação sem escrever nenhuma linha de código. Neste artigo nosso objetivo será popular o GridView com o banco de dados Northwind.mdb (no artigo anterior mostrei como localizar o arquivo Northwind.mdb) e listar a tabela Funcionários, ao selecionar uma linha no GridView poderemos alterar os dados deste registro através deste outro novo componente, o DetailsView.

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

Banco de dados - Irei utilizar o arquivo Northwind.mdb ao invés do SQL Server, pois muitos não tem 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 a opção File System, como linguagem estou utilizando Visual C# e o nome do meu projeto é Grid_DetailsView, conforme figura I.

Figura I

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

Figura II

Localize o arquivo Northwind.mdb e copie para a pasta App_Data do projeto que acabamos de criar. Figura III.

Figura III

Nosso próximo passo será adicionar o arquivo Access em nosso projeto, para isso pressione CTRL+ALT+L para acessar o Solution Explorer. Clique com o botão direito do mouse em cima da pasta App_Data e selecione Add Existing Item. Figura IV.

Selecione o arquivo Northwind.mdb. e clique em Add. Realizando estes procedimentos o banco de dados fará parte do nosso projeto. Figura V.

Figura IV

Figura V

Dê um clique duplo no arquivo Northiwnd.mdb que se encontra no Solution Explorer, isso fará com que o Database Explorer carregue todas as tabelas do arquivo. Figura VI.

Figura VI Arraste a tabela Funcionários sobre o arquivo Default.aspx (página de nosso projeto) e perceba que automaticamente o GridView é preenchido com a tabela selecionada. Perceba que a conexão também fui criada (AccessDataSource). Figura VII.

Figura VII

Neste exemplo não iremos trabalhar com todas as colunas da tabela Funcionários, para modificar precisamos configurar o AccessDataSource. Clique na seta no canto direito superior e abra o Task Manager. Figura VIII.

Figura VIII

Clique em Configure Data Source para abrir o assistente. Figura IX.

Figura IX

Podemos perceber que a primeira tela do assistente nos mostra o caminho onde está nosso arquivo Northwind.mdb. Clique em Next para termos acesso a todas as tabelas do banco. Clique em Specify columns from a table or view e em Name selecione a tabela Funcionários.

Não iremos trabalhar com todas as colunas, selecione somente CódigoDoFuncionário, Nome, Sobrenome, Cargo e DataDeContratação (Figura X) em seguida clique em Advanced. Em Advanced SQL Generation Options marque Generate INSERT, UPDATE, and DELETE statements (Figura XI), esta opção faz com que todos os commandos SQL sejam criados pelo assistente, em seguida clique em OK e em Next, na próxima tela iremos testar a Query clicando em Text Query. Na figura XII podemos ver o resultado do comando Select. Clique em Finish e em seguida você será questionado se deseja atualizar o GridView, clique em sim para concluir.

Figura X

Figura XI

Figura XII Nosso próximo passo será formatar o GridView, habilitar a paginação, ordenação e seleção. Formate com o scheme que lhe agrade, clicando em Auto Format. Agora habilite Enable Paging, Enable Sorting e Enable Selection. Figura XIII.

Figura XIII

Neste momento podemos fazer o primeiro teste em nosso aplicativo. Pressione CTRL+F5 para rodar a aplicação e em seguida teremos o browser exibindo o GridView com os dados da tabela Funcionários. Figura XIV.

Figura XIV

Caso deseje você pode alterar o cabeçalho das colunas, formatar a coluna Data e modificar outras opções através da tela Fields, para isso abra o Task Manager e clique em Edit Columns. Na figura XV, por exemplo, alterei a o cabeçalho da coluna DataDeContratação para Contratação e formatei para exibir a data no formato DD/MM/YYY.

Figura XV

Complementando nosso projeto, iremos incluir o componente DetailsView com isto a selecionarmos uma linha no GridView teremos a possibilidade de alterar os dados do registro.

Pressione CTRL+ALT+X para acessar o Toolbox e arraste o componente DetailsView (Figura XVI) debaixo do GridView. Figura XVII.

Fiura XVI

Figura XVII

O próximo passo será criar um novo Data Source, no Task Manager do DetailsView clique em New data source, em seguida teremos que configurar a nova configuração através do assistente. Selecione Access Database e clique em Ok. Figura XVIII.

Com isso na próxima tela teremos que localizar o arquivo Northwind.mdb em Choose a Database. Clique em Browse, em App_Data selecione o banco e clique em Ok. Figura XIX.

Figura XVIII

Figura XIX Como na primeira conexão, vamos utilizar a tabela Funcionários. Marque novamente as colunas como na X. Novamente clique em Advanced e marque Generate INSERT, UPDATE, and DELETE statements XI e clique em OK.

Até agora nossa nova conexão não tem nada de diferente da primeira, mas para que possamos exibir os dados da linha selecionada no GridView precisamos configurar a clausula WHERE, de um clique no botão WHERE, teremos acesso a tela Add WHERE Clause, em Column selecione a chave primária da tabela Funcionários que (CódigoDoFuncionário), Operator (=) e em Source (Control), em Control ID: (GridView1), clique em Add, (Figura XX) em seguida OK.

Figura XX

Vamos testar a Query, clique em Test Query, em Parameter Values Editor (Figura XXI), no campo Value digite o número 2 e em seguida Ok. Perceba na figura XXII o resultado. Clique em Finish.

Figura XXI

Figura XXII

Iremos concluir a formatação do DetailsView, abra o Task Manager em Format escolha o scheme que lhe agrade, habilite a opção Editing, com isso poderemos alterar o registro. Figura XXIII.

Figura XXIII

Pressione CTRL+F5 para rodar a aplicação. Selecione um registro e perceba que os dados serão exibidos no DetailsView (Figura XXIV). Caso necessite você pode clicar em Edit e alterar o registro. Outra opção que você também pode selecionar é habilitar a opção de Inserir e Excluir através do Task Manager.

Figura XXIV

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

Fábio Galante Mans
MSN - fgamans@hotmail.com
Blog: http://br.thespoke.net/MyBlog/Galante/MyBlog.aspx