Publicado em 7 de dez.

Excluindo uma linha no GridView com confirmação em Javascript

Neste artigo veremos como excluir registros ou linhas do ASP.Net GridView com uma caixa de confirmação usando o evento CommandField e RowDeleting.

A classe CommandField é um campo especial usado por controles ligados a dados (como GridView e DetailsView ) para exibir botões de comando que executam excluir, editar, inserir, ou operações de seleção. Os botões de comando para executar essas operações podem ser mostrados ou ocultos usando as propriedades mostradas na tabela a seguir. Ela representa um campo especial que exibe botões de comando para executar selecionar, editar, inserir ou excluir operações em um controle ligado a dados.

O evento RowDeleting é gerado quando o botão Delete de uma linha é clicado, mas antes que o controle GridView exclui a linha. Isso nos permite fornecer um método de manipulação de eventos que executa uma rotina personalizada, como cancelar a operação de exclusão, sempre que esse evento ocorre.

Um objeto GridViewDeleteEventArgs é passado para o método de manipulação de eventos, que permite que você para determine o índice da linha atual e para indicar que a operação de exclusão deve ser cancelada. Para cancelar a operação de exclusão, defina a propriedade Cancel do objeto GridViewDeleteEventArgs como true. Você também pode manipular as chaves e coleções de valores, se necessário, antes dos valores serem passados para a fonte de dados.

O exemplo a seguir demonstra como usar o evento RowDeleting para cancelar a operação de exclusão. A página contém um controle GridView que exibe uma lista de nomes e endereços de clientes do banco de dados AdventureWorksLT. Quando o usuário clica no link Delete, o manipulador para o evento RowDeleting verifica o último nome da pessoa exibida na linha de que o usuário está tentando excluir. Se o último nome é " Xanburzum ", a operação de exclusão é cancelada, e uma mensagem de erro é exibida. Para qualquer outro nome a operação de exclusão é executada e a linha é excluída.

O manipulador de eventos usa a propriedade do objeto RowIndex GridViewDeleteEventArgs para encontrar a linha que o usuário está tentando eliminar. O exemplo examina o conteúdo da coleção Rows. Para quem não sabe trabalhar com esta coleção, abaixo um exemplo de como usar a coleção Rows para acessar a linha que está sendo editada em um controle GridView. Depois que a linha é atualizada, é exibida uma mensagem para indicar que a atualização foi bem sucedida.

<%@ Page language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

 Sub CustomersGridView_RowCommand(ByVal sender As Object, ByVal e As GridViewCommandEventArgs)

 ' Limpar a label da mensagem quando o usuário entra no modo de edição.

 If e.CommandName = "Edit" Then

 Message.Text = ""

 End If

 End Sub

 Sub CustomersGridView_RowUpdated(ByVal sender As Object, ByVal e As GridViewUpdatedEventArgs)

 ' A operação de atualização foi bem sucedida. Recupere a linha que está sendo editada.

 Dim index As Integer = CustomersGridView.EditIndex

 Dim row As GridViewRow = CustomersGridView.Rows(index)

 ' Notifica o usuário de que a atualização foi bem sucedida.

 Message.Text = "Registro atualizado " & row.Cells(1).Text + "."

 End Sub

 Sub CustomersGridView_RowCancelingEdit(ByVal sender As Object, ByVal e As GridViewCancelEditEventArgs)

 ' A operação de atualização foi cancelada. Mostrar a mensagem apropriada.

 Message.Text = " Operação de Atualização cancelada."

 End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml" >

 <head runat="server">

 <title> Exemplo GridView Rows </title>

</head>

<body>

 <form id="form1" runat="server">

 <h3> Exemplo GridView Rows </h3>

 <asp:label id="Message"

 forecolor="Red"

 runat="server"/>

 <br/>

 <!-- O controle GridView ajusta automaticamente as colunas -->

 <!-- especificada na propriedade DataKeyNames como somente leitura. -->

 <!-- Sem controles de entrada, é processada por estas colunas no modo edit -->

 <asp:gridview id="CustomersGridView"

 allowpaging="true"

 datasourceid="CustomersSqlDataSource"

 autogeneratecolumns="true"

 autogenerateeditbutton="true"

 datakeynames="CustomerID"

 onrowcommand="CustomersGridView_RowCommand"

 onrowupdated="CustomersGridView_RowUpdated"

 onrowcancelingedit="CustomersGridView_RowCancelingEdit"

 runat="server">

 </asp:gridview>

 <!-- Este exemplo usa o Microsoft SQL Server e conecta -->

 <!— com o banco Northwind. Use uma Expressão para recuperar -->

 <!-- o valor seqüência de conexão do arquivo Web.config -->

 <asp:sqldatasource id="CustomersSqlDataSource"

 selectcommand="Select [CustomerID], [CompanyName], [Address], [City], [PostalCode], [Country] From [Customers]"

 updatecommand="Update Customers SET CompanyName=@CompanyName, Address=@Address, City=@City, PostalCode=@PostalCode, Country=@Country WHERE (CustomerID = @CustomerID)"

 deletecommand="Delete from Customers where CustomerID = @CustomerID"

 connectionstring="<%$ ConnectionStrings:NorthWindConnectionString%>"

 runat="server">

 </asp:sqldatasource>

 </form>

 </body>

</html>

Bom, visto como acessar a coleção Rows na linha que está sendo editada, atualizada e exibida uma mensagem para indicar que a atualização foi bem sucedida. Se o valor que você deseja comparar é um key value, você pode examinar a coleção DataKeys.

Voltando para nosso evento RowDeleting, as linhas são excluídas da tabela CustomerAddress em vez da tabela de clientes, a fim de manter o exemplo simples. O controle GridView mostra o resultado da reunião de três tabelas: Customer, Address e CustomerAddress. Quando uma linha CustomerAddress é excluída, a linha GridView correspondente desaparece. Restrições de integridade referencial faria o código para um exemplo que na verdade exclui linhas da tabela Customer mais complexa.

<%@ Page Language="VB" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

 Private Sub CustomersGridView_RowDeleting _

 (ByVal sender As [Object], _

 ByVal e As GridViewDeleteEventArgs)

 Dim cell As TableCell

 cell = CustomersGridView.Rows(e.RowIndex).Cells(2)

 If cell.Text = "Xanburzum" Then

 e.Cancel = True

 Message.Text = "Você não pode excluir o cliente Xanburzum."

 Else

 Message.Text = ""

 End If

 End Sub

</script>

<html xmlns="http://www.w3.org/1999/xhtml">

<head id="Head1" runat="server">

 <title>Exemplo de RowDeleting</title>

</head>

<body>

 <form id="form1" runat="server">

 <h3>

 Exemplo de RowDeleting

 </h3>

 <asp:Label ID="Message" ForeColor="Red" runat="server" />

 <br />

 <asp:GridView ID="CustomersGridView" runat="server"

 DataSourceID="CustomersSqlDataSource"

 AutoGenerateColumns="False"

 AutoGenerateDeleteButton="True"

 OnRowDeleting="CustomersGridView_RowDeleting"

 DataKeyNames="CustomerID,AddressID">

 <Columns>

 <asp:BoundField DataField="FirstName"

 HeaderText="FirstName" SortExpression="FirstName" />

 <asp:BoundField DataField="LastName" HeaderText="LastName"

 SortExpression="LastName" />

 <asp:BoundField DataField="City" HeaderText="City"

 SortExpression="City" />

 <asp:BoundField DataField="StateProvince" HeaderText="State"

 SortExpression="StateProvince" />

 </Columns>

 </asp:GridView>

 <asp:SqlDataSource ID="CustomersSqlDataSource" runat="server"

 SelectCommand="SELECT SalesLT.CustomerAddress.CustomerID,

 SalesLT.CustomerAddress.AddressID,

 SalesLT.Customer.FirstName,

 SalesLT.Customer.LastName,

 SalesLT.Address.City,

 SalesLT.Address.StateProvince

 FROM SalesLT.Customer

 INNER JOIN SalesLT.CustomerAddress

 ON SalesLT.Customer.CustomerID =

 SalesLT.CustomerAddress.CustomerID

 INNER JOIN SalesLT.Address ON SalesLT.CustomerAddress.AddressID =

 SalesLT.Address.AddressID"

 DeleteCommand="Delete from SalesLT.CustomerAddress where CustomerID =

 @CustomerID and AddressID = @AddressID"

 ConnectionString="<%$ ConnectionStrings:AdventureWorksLTConnectionString %>">

 <DeleteParameters>

 <asp:Parameter Name="AddressID" />

 <asp:Parameter Name="CustomerID" />

 </DeleteParameters>

 </asp:SqlDataSource>

 </form>

</body>

</html>

Depois desta boa explicação, vamos ao que interessa. Abaixo está o HTML do GridView. Estamos fazendo uso do evento CommandField e OnRowDeleting para excluir a linha no GridView. Em seguida vamos aplicar a caixa de confirmação JavaScript para o Botão CommandFieldDelete.

Código HTML

<asp:GridView ID="GridView1" CssClass = "Grid" runat="server" OnRowDeleting="OnRowDeleting" AutoGenerateColumns = "false" OnRowDataBound = "OnRowDataBound">

 <Columns>

 <asp:BoundField DataField="Item" HeaderText="Item" />

 <asp:BoundField DataField="Price" HeaderText="Price" />

 <asp:CommandField ShowDeleteButton="True" ButtonType="Button" />

 </Columns>

</asp:GridView>

Vinculando o GridView

Neste exemplo, eu estou vinculando o GridView com dados fictícios usando DataTable.

protected void Page_Load(object sender, EventArgs e)

{

 if (!Page.IsPostBack)

 {

 DataTable dt = new DataTable();

 dt.Columns.AddRange(new DataColumn[2] { new DataColumn("Item"), new DataColumn("Price") });

 dt.Rows.Add("Camisa", 450);

 dt.Rows.Add("Jeans", 3200);

 dt.Rows.Add("Calça", 1900);

 dt.Rows.Add("Meia", 185);

 dt.Rows.Add("Chapéu", 100);

 dt.Rows.Add("Blusa", 120);

 dt.Rows.Add("Shorts", 290);

 dt.Rows.Add("Cinto", 150);

 ViewState["dt"] = dt;

 BindGrid();

 }

}

protected void BindGrid()

{

 GridView1.DataSource = ViewState["dt"] as DataTable;

 GridView1.DataBind();

}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

If Not Page.IsPostBack Then

Dim dt As New DataTable()

dt.Columns.AddRange(New DataColumn(1) {New DataColumn("Item"), New DataColumn("Price")})

dt.Rows.Add("Camisa", 450)

dt.Rows.Add("Jeans", 3200)

dt.Rows.Add("Calça", 1900)

dt.Rows.Add("Meia", 185)

dt.Rows.Add("Chapéu", 100)

dt.Rows.Add("Blusa", 120)

dt.Rows.Add("Shorts", 290)

dt.Rows.Add("Cinto", 150)

ViewState("dt") = dt

BindGrid()

End If

End Sub

Protected Sub BindGrid()

GridView1.DataSource = TryCast(ViewState("dt"), DataTable)

GridView1.DataBind()

End Sub

Agora vamos, aplicar acaixa de confirmação em JavaScript para o botão Excluir do CommandField GridView. Para aplicar a caixa de confirmação JavaScript, vamor procurar o botão nos controles do GridView Cell Index 2, uma vez que tem o CommandField.

protected void OnRowDataBound(object sender, GridViewRowEventArgs e)

{

 if (e.Row.RowType == DataControlRowType.DataRow)

 {

 string item = e.Row.Cells[0].Text;

 foreach (Button button in e.Row.Cells[2].Controls.OfType<Button>())

 {

 if (button.CommandName == "Delete")

 {

 button.Attributes["onclick"] = "if(!confirm('Você quer excluir " + item + "?')){ return false; };";

 }

 }

 }

}

VB.Net

Protected Sub OnRowDataBound(sender As Object, e As GridViewRowEventArgs)

If e.Row.RowType = DataControlRowType.DataRow Then

Dim item As String = e.Row.Cells(0).Text

For Each button As Button In e.Row.Cells(2).Controls.OfType(Of Button)()

If button.CommandName = "Delete" Then

 button.Attributes("onclick") = "if(!confirm('Você quer excluir " + item + "?')){ return false; };"

 End If

 Next

 End If

End Sub

Estamos quase lá, e vamos excluir o ASP.Net GridView Row usando o evento CommandField e OnRowDeleting, abaixo está o código para excluir o ASP.Net GridView Row usando o evento OnRowDeleting.

protected void OnRowDeleting(object sender, GridViewDeleteEventArgs e)

{

 int index = Convert.ToInt32(e.RowIndex);

 DataTable dt = ViewState["dt"] as DataTable;

 dt.Rows[index].Delete();

 ViewState["dt"] = dt;

 BindGrid();

}

VB.Net

Protected Sub OnRowDeleting(sender As Object, e As GridViewDeleteEventArgs)

Dim index As Integer = Convert.ToInt32(e.RowIndex)

Dim dt As DataTable = TryCast(ViewState("dt"), DataTable)

dt.Rows(index).Delete()

ViewState("dt") = dt

BindGrid()

End Sub

E o resultado no browser é:

/applications/core/interface/imageproxy/imageproxy.php?img=http://sintchospir.com.br/gridview_exclus%25C3%25A3obox1.jpg&key=fd908d522fb22f05ba9ffb0c794a54d5f6eb5cfb4f9d1308e509ae4fc323eb8b" alt="gridview_exclus%C3%A3obox1.jpg" />

Clicando no botão excluir, você receberá a seguinte mensagem:

/applications/core/interface/imageproxy/imageproxy.php?img=http://sintchospir.com.br/gridview_exclus%25C3%25A3obox2.jpg&key=e0ffa4b4b8fad243a47a99918a0a32e7dfb2ff1301619bd5ac78a54fd7cf1fd8" alt="gridview_exclus%C3%A3obox2.jpg" />

E aqui com o item excluído:

/applications/core/interface/imageproxy/imageproxy.php?img=http://sintchospir.com.br/gridview_exclus%25C3%25A3obox3.jpg&key=c4fcb88b16758a7d0fc5072775f8cca152370e2879d7a98f452120e3a7a20285" alt="gridview_exclus%C3%A3obox3.jpg" />

Você pode fazer o download dos arquivos usados neste artigo clicando no link abaixo:

Download

Até mais e boa programação.

Discussão (1)

Entre ou cadastre-se para participar da discussão

Entrar Criar conta

Carregando comentários...