Gridview: Confirmação de exclusão via Javascript

A gridview é um componente que nos proporciona uma grande quantidade de recursos, fazendo com que em muitos casos possamos usá-la sem escrever uma linha sequer de código.

Mas existem ocasiões em que precisamos de funcionalidades que a gridview não nos proporciona diretamente. Um desses casos é quando adicionamos um link de exclusão na gridview, mas queremos que o usuário confirme de fato a exclusão. Felizmente, a gridview é bastante customizável, e com pouco trabalho conseguimos o efeito desejado.

Para esse exemplo estou usando o Visual Studio 2008, mas com poucas modificações é possível obter o mesmo resultado em versões anteriores.

Primeiramente, Crie um novo website. Agora, clique na aba “Server Explorer”, conforme a figura abaixo:

Clique com o botão direito em “Data Connections” e em seguida em “Add Connection”:

Em nosso exemplo usaremos o banco de dados de exemplo Northwind. Caso não o tenha instalado, pode baixá-lo (juntamente com o banco Pubs) aqui. Crie a Data Connection e renomeie-a para Northwind:

Após criar a connection, vá no menu Website/Add New Item. Marque o item “LINQ to SQL Classes” e em Name coloque “Northwind.dbml”:

Caso apareca uma caixa perguntando se deseja adicionar o arquivo na pasta App_Code, confirme.

Repare que apareceu a janela de designer do dbml:

Voltando ao Server Explorer, expanda a connection Northwind, e logo após, expanda o item Tables. Arraste a tabela “Customers” para o designer, conforme mostrado acima.

Abra agora a página padrão (Default.aspx, que no caso renomeei par grid.aspx) do website, e adicione nela (pela Toolbox) uma LinqDataSource. Clique na seta que aparece na datasource criada e marque “Enable Delete”. Agora, clique em “Configure datasource”:

Como só temos um DataContext criado, ele estará selecionado automaticamente. Clique em next:

Semelhantemente ao ocorrido no passo anterior, a única tabela (Customers) que adicionamos ao dbml estará selecionada. Clique em “Finish”.

Agora, adicione uma gridview à página. Semelhantemente ao que fizemos com a linqdatasource, selecione a gridview e clique na seta (tasks), e em “Choose Data Source” selecione a Linqdatasource que acabamos de criar. Marque também a caixa “Enable Deleting”. Com isso, será criada uma coluna com o link “Delete” para cada registro:

Repare que as colunas foram adicionadas automaticamente à gridview.

Vamos então à programação. Para que possamos acrescentar o javascript a cada linha da gridview, usaremos o evento RowDataBound. Acrescente o código ao evento:

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
{

LinkButton lkbDelete;
if
(e.Row.RowType == DataControlRowType.DataRow)
{

lkbDelete = (LinkButton)e.Row.Cells[0].Controls[0]; //fazemos uma referência ao botão delete criado automaticamente
string cliente = e.Row.Cells[1].Text;
string prompt = “javascript:return confirm(‘Deseja realmente excluir o cliente ” + cliente + “?’)”;

lkbDelete.Attributes.Add(“onClick”, prompt);

}

}

Após acrescentar o código, execute o projeto. Clique em algum link “delete” na gridview e veja que, caso clique em cancelar, nada acontece. Se clicar em Ok, o registro será removido:

Atenção: Como estamos usando o exemplo Northwind, ao confirmar uma exclusão é provável que ocorra um erro, pois os índices das tabelas ligadas à tabela Customers não estão configurados para propagação da exclusão. Caso queira evitar esse erro, altere os índices através do gerenciador do SQL Server ou de outra ferramenta.

Fácil, não? Em breve espero postar mais artigos sobre a gridview.

Anonymous disse:
0

Valeu tava precisando disso..
resolveu meu problema.