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