Visual Studio.NET 2005
Olá pessoal, estarei aqui para mostrar como editar montando o método RowEditing e RowUpdating. De certa forma é bem simples e legal de usar. Em um projeto web que fiz para um banco, tive que guardar como controle os dados antes de ser mudados, ou seja, tive que pegar os dados anteriores e os dados atuais editados pelo usuário para gravar em uma tabela de controle e log.
Bom, essa é uma continuação da parte I, se ainda não leu, por favor, leia e entenda como foi feito anteriormente. Nessa parte anterior, mostrei como preencher o GridView, veja como ficou. (2.1 GridView Parte II)
Referência: 2.1 GridView Parte II
Explicação:
Entro com os dados e clico no botão “Salvar”, o GridView mostra os dados que foram gravados no banco de dados. Muito simples e fácil para desenvolver.
Editar
Quando for editar os campos do meu GridView, deve ser feito antes de tudo o html para saber quais os campos serão editados. No meu caso, defini todos os meus campos do Grid para serem editados.
|
<Columns>
<asp:TemplateField ShowHeader="false">
<ItemTemplate>
<asp:Label Visible="false" ID="lblIdCooperativa" runat="server">
<%# DataBinder.Eval(Container.DataItem, "IdCooperativa")%>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox Visible="false" ID="txtIdCooperativa" runat="server"
Text='<%# DataBinder.Eval(Container.DataItem, "IdCooperativa") %>'>
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="NR COOP">
<ItemTemplate>
<asp:Label ID="lblNumCooperativa" runat="server">
<%# DataBinder.Eval(Container.DataItem, "NumCooperativa")%>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtNumCooperativa" runat="server"
Text='<%# DataBinder.Eval(Container.DataItem, "NumCooperativa") %>'>
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="BANCO DE DADOS">
<ItemTemplate>
<asp:Label ID="lblInitialCatalog" runat="server">
<%# DataBinder.Eval(Container.DataItem, "InitialCatalog") %>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtInitialCatalog" runat="server"
Text='<%# DataBinder.Eval(Container.DataItem, "InitialCatalog") %>'>
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="true" HeaderText="SERVIDOR">
<ItemTemplate>
<asp:Label ID="lblDataSource" runat="server">
<%# DataBinder.Eval(Container.DataItem, "DATASOURCE") %>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtDataSource" runat="server"
Text='<%# DataBinder.Eval(Container.DataItem, "DATASOURCE") %>'>
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:TemplateField ShowHeader="true" HeaderText="AMBIENTE">
<ItemTemplate>
<asp:Label ID="lblIdAmbiente" runat="server">
<%# DataBinder.Eval(Container.DataItem, "IdAmbiente") %>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtIdAmbiente" runat="server"
Text='<%# DataBinder.Eval(Container.DataItem, "IdAmbiente") %>'>
</asp:TextBox>
</EditItemTemplate>
</asp:TemplateField>
<asp:CommandField ButtonType="Button" CancelText="C" DeleteText="D" EditText="E" HeaderText="AÇÃO"
InsertVisible="False" ShowDeleteButton="true" ShowEditButton="True" UpdateText="A" />
</Columns> |
Referência: 2.2 GridView Parte II
Dentro da tag <Columns> existem as tags <ItemTemplate> e <EditItemTemplate>. (Referência 2.3 GridView Parte II)
|
<asp:TemplateField ShowHeader="false">
<ItemTemplate>
<asp:Label Visible="false" ID="lblIdCooperativa" runat="server">
<%# DataBinder.Eval(Container.DataItem, "IdCooperativa")%>
</asp:Label>
</ItemTemplate>
<EditItemTemplate>
<asp:TextBox Visible="false" ID="txtIdCooperativa" runat="server"
Text='<%# DataBinder.Eval(Container.DataItem, "IdCooperativa") %>'>
</asp:TextBox>
</EditItemTemplate>
|
Referência: 2.3 GridView Parte II
Todo campo de dentro da Tag <EditItemTemplate> existe um textbox onde o mesmo pode ser alterado ou editado.Para não ter um campo editado, é só tirar a tag <EditItemTemplate> com todo o seu conteúdo.
Cliquei no mode design, selecionei o GridView, logo depois em propriedades e no campo Events. Esse componente mudou um pouco em relação ao antigo DataGrid. Agora o modo para fazer a edição, cliquei no método RowEditing onde é redirecionado automaticamente ao code behing.(2.4 GridView Parte II).
Referência: 2.4 GridView Parte II
Code Behing
Indo para o code behing digitei o código de referência 2.5 GridView Parte II.
|
/// <summary>
/// Método que transforma os dados em campos para serem editados
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void gdBancoServidor_RowEditing(object sender, GridViewEditEventArgs e)
{
this.gdBancoServidor.EditIndex = e.NewEditIndex;
PreencheGridView();
}
|
Referência: 2.5 GridView Parte II
Explicação:
Depois que coloquei o comando e.NewEditIndex, mandei preencher o grid novamente. Note que fiz um método específico para buscar os dados e preenchê-lo. O método chama PreencheGridView().
O que esse método faz é apenas abrir o banco de dados, fazer o select e retornar os dados do tipo DataSet.Usando o Edit os campos editáveis irão se tornar campos textBox onde o cliente ou usuário poderá mudar o valor.
Seguindo com a aplicação, agora utilizo da mesma forma, porém chamo outro método chamado RowUpdating. (Referência 2.4 GridView Parte II).
Cliquei no RowUpdating e digitei o código. (2.6 GridView Parte II)
|
/// <summary>
/// Método que atualiza os dados informados pelo cliente.
/// Os mesmos sao enviados para um camada de negocio
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void gdBancoServidor_RowUpdating(object sender, GridViewUpdateEventArgs e)
{
//capturando os valores
GridViewRow gvr = this.gdBancoServidor.Rows[e.RowIndex];
string txtIdCooperativa = ((TextBox)gvr.FindControl("txtIdCooperativa")).Text;
string txtNumCooperativa = ((TextBox)gvr.FindControl("txtNumCooperativa")).Text;
string txtInitialCatalog = ((TextBox)gvr.FindControl("txtInitialCatalog")).Text;
string txtDataSource = ((TextBox)gvr.FindControl("txtDataSource")).Text;
string txtIdAmbiente = ((TextBox)gvr.FindControl("txtIdAmbiente")).Text;
if (config.AtualizarCooperativaOffLine(Convert.ToInt32(txtIdCooperativa), txtNumCooperativa, txtInitialCatalog, txtDataSource, Convert.ToInt32(txtIdAmbiente)))
{
this.gdBancoServidor.EditIndex = -1;
PreencheGridView();
}
}
|
Referência: 2.6 GridView Parte II
Explicação:
O método está todo comentado.
O que sempre é difícil quando usa GridView é pegar os dados que foram editados. Atribui o valor a uma string declarada. (2.7 GridView Parte II)
|
string txtIdAmbiente = ((TextBox)gvr.FindControl("txtIdAmbiente")).Text;
|
Referência: 2.7 GridView Parte II
Uso o comando FindControl para pegar o id do campos e atribui a variável string.
Para atualizar os dados utilizo uma outra classe responsável para acessar o banco e atualizar os dados. O código 2.8 GridView Parte II passa os dados para a o método onde atualiza o código do GridView.
|
if (config.AtualizarCooperativaOffLine(Convert.ToInt32(txtIdCooperativa), txtNumCooperativa, txtInitialCatalog, txtDataSource, Convert.ToInt32(txtIdAmbiente)))
{
this.gdBancoServidor.EditIndex = -1;
PreencheGridView();
}
|
Referência: 2.8 GridView Parte II
Cancelar
Para cancelar o modo de edição, utilizei a referência 2.4 clicando no events RowCancelingEdit. É bem simples e fácil. (2.9 GridView Parte II)
|
/// <summary>
/// Método que cancela a edição e retorna para a forma correta
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void gdBancoServidor_RowCancelingEdit(object sender, GridViewCancelEditEventArgs e)
{
this.gdBancoServidor.EditIndex = -1;
PreencheGridView();
}
|
Referência: 2.9 GridView Parte II
Explicação:
O código que cancela a edição é apenas o EditIndex = -1 e depois mando preencher o grid novamente.
No código HTML do GridView basta colocar a linha. (Referência 3.0 GridView Parte II).
|
<asp:CommandField ButtonType="Button" CancelText="C" DeleteText="D" EditText="E" HeaderText="AÇÃO"
InsertVisible="False" ShowDeleteButton="true" ShowEditButton="True" UpdateText="A" />
|
Referência: 3.0 GridView Parte II
Código em funcionamento
Referência: 3.1 GridView Parte II
Cliquei no Editar.