Deleção no DataGrid com Client-Side JavaScript

Este é mais um daqueles pequenos mini-tutoriais que mostra como fazer algo em ASP.NET utilizando pouco código.

por Cristian Arrano Townsend

Este é mais um daqueles pequenos mini-tutoriais que mostra como fazer algo em ASP.NET utilizando pouco código.

Se trata de um grid, utilizando DataGrid, que terá uma coluna de Exclusão (Linkbutton). Quando pressionado, aparecerá uma confirmação em JavaScript. O "segredo" do artigo é a integração do JavaScript com o ASP.NET. Vamos ver alguns "truques" que irá (espero) matar a curiosidade de muitos.

Web Form

O exemplo irá utilizar o banco de dados Northwind e a tabela Products. As instruções SQL estarão encapsuladas em Stored Procedures. A continuação é mostrado o Web Form que iremos implementar.

No Page_Load do Web form, insira o seguinte código:

If Not Page.IsPostBack Then
BindData()
End If

O código do metodo BindData é mostrado abaixo:

Sub BindData()
        Dim ObjConnection As New System.Data.SqlClient.SqlConnection(strConn)
        Dim ObjCommand As New System.Data.SqlClient.SqlCommand("ListaCategorias", ObjConnection)
        ObjCommand.CommandType = CommandType.StoredProcedure
        Dim dr As System.Data.SqlClient.SqlDataReader = _ 
ObjCommand.ExecuteReader(CommandBehavior.CloseConnection)
        Me.DdListCategorias.DataSource = dr
        Me.DdListCategorias.DataTextField = "CategoryName"
        Me.DdListCategorias.DataValueField = "CategoryId"
        Me.DdListCategorias.DataBind()
End Sub

O resultado do código acima mostrará as categorias disponiveis dos produtos, como mostra a Figura 2:

Abaixo é mostrado o conteúdo da StoredProcedure ListaCategorias:

CREATE PROCEDURE ListaCategorias AS
SELECT * FROM Categories
GO

Agora vamos escrever o código que irá a mostrar no DataGrid os produtos de uma determinada categoria.

Primeiro, criamos uma Stored Procedure chamada ListaProdutosCategoria. O código do script será:

CREATE PROCEDURE ListaProdutosCategoria
@CategoryId INT
AS
SELECT * FROM Products Where CategoryId=@CategoryId
GO

Logo após, configuramos as colunas a serem exibidas no DataGrid. Para o exemplo, somente iremos mostrar as colunas ProductName e UnitPrice. E para todas as linhas do grid, haverá um Linkbutton que representará a opção de deleção do produto.

<asp:DataGrid id="DGridProdutos" runat="server" BorderColor="#CC9966" Border>

Agora que temos praticamente todo o codigo Server-side, é hora de criar o código que irá inserir para cada linha uma função Client-Side em JavaScript vinculado ao LinkButton.

Para isso, usaremos o evento ItemDataBound, que executa uma determinada ação para cada linha gerada em tempo de execução pelo controle.

Vejamos o código do evento.
Sub BoundLineGrid(ByVal sender As System.Object, ByVal e As DataGridItemEventArgs) _
  Handles DGridProdutos.ItemDataBound
        If e.Item.ItemType = ListItemType.Item Or e.Item.ItemType = ListItemType.AlternatingItem Then
            Dim LinkButtonDelete As LinkButton = e.Item.FindControl("LnkBtnDel")
            LinkButtonDelete.Attributes.Add("onClick", "return JsDelete()")
        End If
End Sub


Note que o evento recebe a classe DataGridItemEventArgs como parâmetro, que servirá para identificar qual item está sendo executado. No nosso exemplo, somente os templates Item e AlternatingItem serão utilizados. 

Depois disso, criamos um Linkbutton com ID=LinkButtonDelete que receberá os atributos, propriedades e eventos do Linkbutton do Datagrid. Em seguida, é inserido ao LinkButton a função JavaScript com a propriedade Attributes.Add.

A função em JavaScript deverá estar no Web Form, com o seguinte código:
<script language="javascript">
	function JsDelete()
	{
	if (confirm ("Tem certeza que deseja excluir o produto?"))
	{
	return true;
	}
	else
	{
	return false;
	}
	}
</script>


Bom pessoal, espero que o exemplo tenha bastante utilidade. 

Até a próxima.