Editando itens no GridView com ModalPopUpExtender

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Neste artigo eu mostro passo a passo de como desenvolver um recurso de edição de itens a partir do controle GridView usando um ModalPopUp Extender do AjaxControlToolKit. Aqui, vamos fazer algumas interferências no código cliente (javascript) par

Introdução

Neste artigo eu mostro passo a passo de como desenvolver um recurso de edição de itens a partir do controle GridView usando um ModalPopUp Extender do AjaxControlToolKit. Aqui, vamos fazer algumas interferências no código cliente (javascript) para possibilitar a edição dos registros em questão. Vamos usar a base de dados AdventureWorks, disponibilizada gratuitamente no site na Microsoft. Também é necessário baixar e instalar a DLL do AjaxControlToolKit. Foi usado o Visual Studio 2008, SP 1, Framework 3.5 e o banco de Dados MS SQL Server 2005. 




Nível de conhecimento
  



É necessário ter conhecimentos de nível intermediário para avançado para realizar as implementações do recurso mostrado neste artigo nas seguintes tecnologias:  





  • Linguaguem client-side JavaScript.

  • WebServices

  • Ajax

  • Instruções SQL   



Cenário




Basicamente, o que vamos fazer é recuperar dados de uma tabela do banco AdventureWorks (pode ser qualquer outra tabela e outra base de dados) do banco de dados SQL Server, popular um controle GridView com estes registros no evento Page_Load da página Default.aspx, e edita-los num PopUp Modal que irá sobrepor a tela Default.aspx.
  


Para baixar o AjaxControlToolKit e Ajax Extensios, acesse o link: http://www.asp.net/ajax/ 



Baixe o arquivo e crie uma nova Aba no painel de Ferramentas do Visual Studio, assim sua IDE deverá ter a seguinte aparência:  





Para baixar o DataBase de exemplo AdventureWorks, que a Microsoft disponibiliza gratuitamente, acesse o link: http://www.codeplex.com/MSFTDBProdSamples/Release/ProjectReleases.aspx?ReleaseId=4004
  



Depois de baixar o arquivo “.msi”, devemos abrir o SQL Management Studio Express e anexar o mesmo, clicando com o botão direito sobre DataBases e Attach, então basta adicionar o novo Banco de Dados, como na figura abaixo: 



 


A query SQL que iremos usar para popular o GridView:











  



SELECT TOP 10 [ContactID],[FirstName],[LastName],[EmailAddress] FROM [AdventureWorks].[Person].[Contact]



  



  
Obs: Estou usando o Top 10 apenas para melhorar a performace de recuperação dos registros (apenas demostrativo), sendo assim irá retornar apenas os 10 primeiros registros.



  
Construindo GridView e seus métodos



  
Vamos acrescentar uma coluna TemplateField no GridView com um controle Hyperlink para Edição do registro em questão, veja abaixo o aspecto final do controle GridView, já com os BoundColumns setados corretamente:











  



                <asp:GridView ID="gvRegistros" runat="server" AutoGenerateColumns="False" OnRowDataBound="gvRegistros_RowDataBound"



            Width="100%" AllowPaging="False" CellPadding="4" BorderColor="#CC9966" BackColor="White" BorderStyle="None"



            BorderWidth="1px" DataKeyNames="ContactID">



            <FooterStyle BackColor="#FFFFCC" ForeColor="#330099" />



            <RowStyle BackColor="White" ForeColor="#330099" />



            <Columns>



                <asp:BoundField HeaderStyle-Width="25%" DataField="FirstName" HeaderText="FirstName">



                    <HeaderStyle Width="25%">HeaderStyle>



                asp:BoundField>



                <asp:BoundField HeaderStyle-Width="25%" DataField="LastName" HeaderText="LastName">



                    <HeaderStyle Width="25%">HeaderStyle>



                asp:BoundField>



                <asp:BoundField HeaderStyle-Width="25%" DataField="EmailAddress" HeaderText="EmailAddress">



                    <HeaderStyle Width="25%">HeaderStyle>



                asp:BoundField>



                <asp:TemplateField HeaderStyle-Width="40px" HeaderStyle-HorizontalAlign="Center"



                    ItemStyle-HorizontalAlign="Center" HeaderText="Alterar">



                    <ItemTemplate>



                        "

A exibição deste artigo foi interrompida :(
Este post está disponível para assinantes MVP

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?