Edio de dados no GridView - ASP.NET 2.0: Por Renato Haddad, Microsoft Most ...

Page 1 of 12

Developer Centers > ASP.NET

Edio de dados no GridView - 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 Nas aplicaes WEB, edio de dados via Browser sempre foi um desafio para os desenvolvedores. O fato que independente do tipo de controle, aplicao ou plataforma, alguns usurios necessitam alterar os dados diretamente na base de dados. At aqui nada de novidade, pois voc pode utilizar uma UI de acordo com o perfil e a necessidade dos usurios. No ASP.NET 1.1 temos o controle DataGrid, o qual foi uma implementao da Microsoft para expressar qualquer fonte de dados. Este controle, sem nenhuma dvida, um dos mais utilizados nas pginas, seja pela apresentao, facilidade de uso e implementao ou performance. No entanto, necessrio digitar cdigos para estas alteraes. No ASP.NET 2.0 o DataGrid deixou de existir e foi criado um novo controle chamado GridView, o qual prov mais funcionalidades e sua implementao extremamente simples e fcil. Abra o Visual Studio .NET 2005, selecione o menu File / New / Web Site e crie um novo projeto com as seguintes caractersticas:

Clique em OK para criar o projeto. Abra o Solution Explorer, clique com o boto direito sobre a soluo e selecione Add New Item do tipo Web Form chamado EdicaoDadosGridView.aspx.

http://www.microsoft.com/brasil/msdn/Tecnologias/aspnet/DadosGridViewASPNET....

1/2/2010

Edio de dados no GridView - ASP.NET 2.0: Por Renato Haddad, Microsoft Most ... Page 2 of 12

Digite um texto no corpo da pgina, exiba a Toolbox, a categoria Data e arraste o controle GridView.

exibida uma Smart Tag contendo as opes disponveis neste momento. Selecione Auto Format e aplique uma formatao para personalizar a exibio do GridView.

http://www.microsoft.com/brasil/msdn/Tecnologias/aspnet/DadosGridViewASPNET....

1/2/2010

Edio de dados no GridView - ASP.NET 2.0: Por Renato Haddad, Microsoft Most ... Page 3 of 12

O prximo passo definir uma fonte de dados. Em Choose Data Source, selecione <new data source>. So exibidas todas as possveis fontes de dados para o controle GridView, e como usaremos o banco de dados Northwind do SQL Server como exemplo, selecione Database. Note que voc usar qualquer provider existente para .NET. Clique em OK.

Para montar a conexo, voc duas opes: Caso j tenha definida alguma conexo que esteja armazenada no arquivo Web.Config, esta exibida

http://www.microsoft.com/brasil/msdn/Tecnologias/aspnet/DadosGridViewASPNET....

1/2/2010

Edio de dados no GridView - ASP.NET 2.0: Por Renato Haddad, Microsoft Most ... Page 4 of 12
1. na lista para que voc use-a. A enorme vantagem disto ocorre na manuteno de qualquer item da string de conexo. Neste caso, vou utilizar a conexo chamada myConnection que eu j criei em outro artigo.

2.

Clique no boto New Connection, informe os dados da conexo e teste para verificar o acesso.

http://www.microsoft.com/brasil/msdn/Tecnologias/aspnet/DadosGridViewASPNET....

1/2/2010

Edio de dados no GridView - ASP.NET 2.0: Por Renato Haddad, Microsoft Most ... Page 5 of 12

Clique em Next e selecione a tabela Products. Ateno: no selecione uma consulta, tem que ser uma tabela. Selecione os campos a serem exibidos para alterao.

http://www.microsoft.com/brasil/msdn/Tecnologias/aspnet/DadosGridViewASPNET....

1/2/2010

Edio de dados no GridView - ASP.NET 2.0: Por Renato Haddad, Microsoft Most ... Page 6 of 12

Ainda nesta tela, clique no boto Advanced e selecione os dois checkboxes para criar os mtodos do DataSet (Insert, Update e Delete). Clique em OK e em Next.

Clique no boto Test Query para visualizar os dados. Por fim, clique em Finish.

http://www.microsoft.com/brasil/msdn/Tecnologias/aspnet/DadosGridViewASPNET....

1/2/2010

Edio de dados no GridView - ASP.NET 2.0: Por Renato Haddad, Microsoft Most ... Page 7 of 12

Automaticamente exibida a Smart Tag com outras opes. Marque os seguintes checkboxes: Enable Paging (permite a paginao automtica sem nenhum cdigo), Enable Sorting (permite a classificao das colunas), Enable Editing (exibe o boto para editar os dados) e Enable Deleting (permite e excluso de dados).

Incio da pgina

http://www.microsoft.com/brasil/msdn/Tecnologias/aspnet/DadosGridViewASPNET....

1/2/2010

Edio de dados no GridView - ASP.NET 2.0: Por Renato Haddad, Microsoft Most ... Page 8 of 12
Customizao das colunas
Como voc pode observar, o layout das colunas no esto adequados ao contexto, e para isso vamos customizar. Na Smart Tag, selecione Edit Column. Como a primeira coluna do tipo Command Field, altere as propriedades DeleteText para Excluir, EditText para Editar, CancelText para Cancelar e UpdateText para Atualizar.

Altere o Header de cada uma das colunas sendo: Cod, Produto, Estoque e Preo. No caso da coluna Estoque e Preo, altere a propriedade DataFormatString para {0:n0} e {0:n2} respectivamente, sendo o formato numrico com zero e duas casas decimais. Alm disto, altere a propriedade ItemStyle/HorizontalAlign para Right para alinhar os itens direita.

http://www.microsoft.com/brasil/msdn/Tecnologias/aspnet/DadosGridViewASPNET....

1/2/2010

Edio de dados no GridView - ASP.NET 2.0: Por Renato Haddad, Microsoft Most ... Page 9 of 12

Veja o novo GridView formatado.

Salve o projeto e execute-o no browser (CTRL + F5).

http://www.microsoft.com/brasil/msdn/Tecnologias/aspnet/DadosGridViewASPNET....

1/2/2010

Edio de dados no GridView - ASP.NET 2.0: Por Renato Haddad, Microsoft Mo... Page 10 of 12

Selecione um produto a ser alterado e clique no Editar para alterar os dados.

http://www.microsoft.com/brasil/msdn/Tecnologias/aspnet/DadosGridViewASPNET....

1/2/2010

Edio de dados no GridView - ASP.NET 2.0: Por Renato Haddad, Microsoft Mo... Page 11 of 12

Para efetivar as alteraes, clique no Atualizar. Note que o campo ProductID (Cod) chave primria e, automaticamente no possvel alter-lo. Veja as alteraes efetivadas. Caso queira cancelar, basta clicar no boto Cancelar.

http://www.microsoft.com/brasil/msdn/Tecnologias/aspnet/DadosGridViewASPNET....

1/2/2010

Edio de dados no GridView - ASP.NET 2.0: Por Renato Haddad, Microsoft Mo... Page 12 of 12

Incio da pgina

Concluso
O uso do GridView proporciona alterar dados diretamente no Grid sem a necessidade de implementar nenhuma linha de cdigo. Lembre-se que o GridView pode ser customizado totalmente, permitindo incluir qualquer tipo de funcionalidade em pginas WEB. Bons estudos e lembre-se: No Stress, think GridView ASP.NET 2.0 Renato Haddad (rehaddad@msn.com) MVP, editor da revista MSDN Magazine Brasil, ministra treinamentos e palestras sobre .NETe autor de diversos livros e treinamentos em CD multimdia de ASP.NET, SQL Reporting Services, Visual Studio .NET 2003 e Aplicaes Mveis para celulares e Pocket PC, tanto no Brasil como em outros pases da Amrica Latina.

Incio da pgina

Fale Conosco 2010 Microsoft Corporation. Todos os direitos reservados. Entre em contato | Nota Legal | Marcas comerciais | Poltica de Privacidade

http://www.microsoft.com/brasil/msdn/Tecnologias/aspnet/DadosGridViewASPNET....

1/2/2010