Exportar (0) Imprimir
Expandir Tudo
Expandir Minimizar

Edição de dados no GridView com DropDownList - ASP.NET 2.0

Por Renato Haddad, Microsoft Most Valuable Professional .NET Mobile Devices. Editor da revista MSDN Magazine Brasil, autor de diversos livros e ministra palestras e treinamentos sobre a tecnologia .NET.

Tecnologias Utilizadas
- ASP.NET 2.0
- Visual Studio .NET 2005 beta 2 final

O uso do controle GridView em aplicações ASP.NET 2.0 deve se tornar um padrão de exibição de dados, justamente pela facilidade de criação, manuseio e apresentação. Para quem já programou em ASP.NET 1.1, editar dados em um DataGrid nunca foi uma tarefa simples de se implementar. Claro que isso depende do nível de programação e complexidade a ser usada, mas via de regra, você precisa implementar algum código.

Já no controle GridView, veremos neste artigo que não irei usar nenhuma linha de código, somente através de ferramentas visuais. O detalhe é que irei implementar um DropDownList dentro do GridView no momento da edição de dados.

Abra o Visual Studio .NET 2005, selecione o menu File / New / Web Site e crie um novo projeto com as seguintes características:

Cc580581.GridViewEditingDropDown_01(pt-br,MSDN.10).png

Clique em OK para criar o projeto. Abra o Solution Explorer, clique com o botão direito sobre a solução e selecione Add New Item do tipo Web Form chamado Produtos.aspx.

Cc580581.GridViewEditingDropDown_02(pt-br,MSDN.10).png

Exiba a Toolbox (menu View / Toolbox), abra a guia Data e arraste o controle GridView para o corpo do formulário.

Cc580581.GridViewEditingDropDown_03(pt-br,MSDN.10).png

Todas as funcionalidades do controle são expostas através de uma Smart Tag. Como ainda não há uma fonte de dados, então as opções disponíveis estão descritas na seguinte figura. Selecione a opção Auto Format e aplique um formato que lhe convir.

Cc580581.GridViewEditingDropDown_04(pt-br,MSDN.10).png

O próximo passo é definir a fonte de dados. Neste caso, na Smart Tag, selecione Choose Data Source / < New data source>.

Cc580581.GridViewEditingDropDown_05(pt-br,MSDN.10).png

Será aberta uma janela onde você deverá selecionar qual é a origem dos dados, sendo: Access Database, Database (pode ser qualquer banco de dados), Object (pode ser a camada de acesso a dados), Site Map (contendo toda a estrutura do site em XML) e XML File. Selecione Database e observe que já é sugerido o ID Data Source chamado SqlDataSource1. Este nome você pode mudar sem nenhum problema, mas vou mantê-lo. Clique em OK.

Cc580581.GridViewEditingDropDown_06(pt-br,MSDN.10).png

Agora é preciso definir a string de conexão, pois usaremos o SQL Server e o banco de dados Northwind. Portanto, atribua todas os parâmetros necessários a string de conexão do seu servidor. Veja um exemplo na figura a seguir e clique em OK.

Cc580581.GridViewEditingDropDown_07(pt-br,MSDN.10).png

Veja a string completa definida.

Cc580581.GridViewEditingDropDown_08(pt-br,MSDN.10).png

Clique em Next e deixe o checkbox selecionado para que a string fique armazenada no arquivo Web.Config. Assim, quando você precisar da mesma string de conexão, a mesma já estará disponível no Web.Config. Clique em Next.

Cc580581.GridViewEditingDropDown_09(pt-br,MSDN.10).png

Esta janela é muito importante, pois será preciso informar qual é a tabela a ser usada como fonte de dados. Neste caso, selecione Products e os campos listados na figura abaixo. Observe que inclui o campo CategoryID.

Cc580581.GridViewEditingDropDown_10(pt-br,MSDN.10).png

Como iremos alterar dados é preciso definir um DataAdapter que irá gerar as instruções de Insert, Update e Delete. Apesar de precisarmos apenas da Update, o DataAdapter gera todas. Selecione os dois checkboxes e clique em OK.

Cc580581.GridViewEditingDropDown_11(pt-br,MSDN.10).png

Clique em Next e Finish para encerrar o assistente. Note que o GridView já será exposto com todos os campos selecionados na fonte. Observe ainda, que é criado um objeto do tipo SqlDataSource chamado SqlDataSource1.

Cc580581.GridViewEditingDropDown_12(pt-br,MSDN.10).png

Clique no GridView e exiba a Smart Tag. Selecione os checkboxes Enable Paging para habilitar a paginação e o Enable Editing para habilitar a edição de dados. Não se preocupe com o link de edição escrito em inglês porque isto é só uma questão de formatação que pode ser resolvida nas propriedades das colunas. Leia o meu artigo "Edição de dados no GridView - ASP.NET 2.0" no site www.msdnbrasil.com.br onde explico detalhadamente esta customização.

Cc580581.GridViewEditingDropDown_13(pt-br,MSDN.10).png

Vamos implementar o DropDownList no GridView. Na Smart Tag, selecione Edit Columns. Na lista de campos, selecione o CategoryID e clique no link "Convert this field into a TemplateField". Isto irá transformar esta coluna em um template.

Cc580581.GridViewEditingDropDown_14(pt-br,MSDN.10).png

Note como que o CategoryID ficou com um formato diferente. Clique em OK.

Cc580581.GridViewEditingDropDown_15(pt-br,MSDN.10).png

Na Smart Tag clique em Edit Templates para customizar este controle.

Cc580581.GridViewEditingDropDown_16(pt-br,MSDN.10).png

Quando o GridView for exibido, o código da categoria será exibido. O que determina isto é o tipo de controle Label que está no template ItemTemplate.

Cc580581.GridViewEditingDropDown_17(pt-br,MSDN.10).png

Como precisamos implementar um DropDownList na edição de dados, selecione o template EditItemTemplate.

Cc580581.GridViewEditingDropDown_18(pt-br,MSDN.10).png

Note que o default é um controle TextBox, no entanto exclua-o e adicione um DropDownList.

Cc580581.GridViewEditingDropDown_19(pt-br,MSDN.10).png

Para definir a fonte de dados, clique em Choose Data Source.

Cc580581.GridViewEditingDropDown_20(pt-br,MSDN.10).png

Selecione Database, pois os dados virão de uma tabela do SQL Server.

Cc580581.GridViewEditingDropDown_21(pt-br,MSDN.10).png

Como a string de conexão com o banco de dados Northwind já está armazenada no arquivo Web.Config, basta você selecioná-la na lista. Clique em Next.

Cc580581.GridViewEditingDropDown_22(pt-br,MSDN.10).png

Selecione a tabela Categories e os respectivos campos. Clique em Next e Finish.

Cc580581.GridViewEditingDropDown_23(pt-br,MSDN.10).png

Informe qual é o campo que será exibido e qual será armazenado.

Cc580581.GridViewEditingDropDown_24(pt-br,MSDN.10).png

Até aqui o controle irá exibir todas as categorias.

Cc580581.GridViewEditingDropDown_25(pt-br,MSDN.10).png

Porém há uma importante questão a ser revolvida. Quando você editar um registro, a categoria a ser exibida deverá corresponder a categoria respectivamente daquele produto. Para isso, clique em Edit DataBindings e configure a propriedade SelectedValue onde o "Bound to" será o campo CategoryID. Clique em OK.

Cc580581.GridViewEditingDropDown_26(pt-br,MSDN.10).png

Salve o projeto e execute-o no browser.

Cc580581.GridViewEditingDropDown_27(pt-br,MSDN.10).png

Clique em Edit e note que o DropDownList é exibido com a categoria atual do respectivo produto. Você pode alterar qualquer campo disponível e escolher outra categoria na lista. Ao final, clique em Update para salvar efetivamente a alteração.

Cc580581.GridViewEditingDropDown_28(pt-br,MSDN.10).png

Conclusão
O controle GridView é sem dúvida nenhuma uma evolução fantástica do DataGrid e o nível de recursos e customizações é bem maior que qualquer outro controle no ASP.NET. Você deve ter notado que eu não digitei nenhuma linha de código para montar um GridView com edição de dados, e isso chama-se produtividade que só uma ferramenta como o Visual Studio .NET 2005 oferece.

Bons estudos e lembre-se: No Stress, think GridView ASP.NET 2.0

Renato Haddad ( rehaddad@msn.com ) é MVP, fanático pelo VS.NET, editor da revista MSDN Magazine Brasil, ministra treinamentos e palestras sobre .NETe autor de diversos livros e treinamentos em CD multimídia de ASP.NET, SQL Reporting Services, Visual Studio .NET 2003 e Aplicações Móveis para celulares e Pocket PC, tanto no Brasil como em outros países da América Latina. É professor do curso de Pós-Graduação em Desenvolvimento de Aplicações .NET na Universidade UVV (Vila Velha/ES).

Mostrar:
© 2014 Microsoft