Categorias

Utilizando o GridView e DetailsView

Utilizando o GridView e 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.

O VWD criará o arquivo Default.axp

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

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.

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

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.

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

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.

Clique em Configure Data Sourcepara abrir o assistente.

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

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.

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.

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 imagem abaixo , 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.

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

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

Como na primeira conexão, vamos utilizar a tabela Funcionários. Marque novamente as coluna. Novamente clique em Advanced e marque Generate INSERT, UPDATE, and DELETE statements 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, em seguida OK.

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

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.

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