ASP .NET 2.0

 

Utilizando o GridView e DetailsView

 

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 I

 

I

 

O VWD criará o arquivo Default.axp - II

 

II

 

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

 

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. IV.

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

 

IV

IV.

 

De 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. VI

 

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). VII

 

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. VIII

 

VIII

 

Clique em Configure Data Sourcepara abrir o assistente. IX

 

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 X em seguida clique em Advanced. Em Advanced SQL Generation Options marque GenerateINSERT, UPDATE, and DELETE statements XI , está 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. XIIpodemos 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.

 

X

 

XI

 

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. XIII

 

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. XIV

 

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 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.

 

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 XVI debaixo do GridView. XVII

 

 

XVI

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. 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. XIX

 

XVIII

 

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, XX em seguida OK.

 

XX

 

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

 

XXI

 

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. XXIII

 

XXIII

 

Pressione CTRL+F5 para rodar a aplicação. Selecione um registro e perceba que os dados serão exibidos no DetailsView 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.

 

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