Olá Leitor(a), hoje eu vou dar continuidade à série de artigo falando sobre a tecnologia Web API. Lembro a você da necessidade de leitura dos outros artigos anteriores citados abaixo, para um melhor entendimento e aprendizagem. Vou continuar com o mesmo seguimento, explicando e mostrando o código fonte desenvolvido.
Parte 1 - http://www.ecode10.com/artigo/1725/criando-e-consumindo-web-api-parte-1
Parte 2 - http://www.ecode10.com/artigo/1737/criando-e-consumindo-web-api-parte-2
Segue as ferramentas utilizadas:
Visual Studio 2012
Linguagem C#
Tecnologia: MVC e Web API
Neste artigo eu vou abordar a parte de delete de dados usando Web API. Na parte 2 do artigo eu mostrei como pegar os dados com o GET e preencher um GridView, dessa vez eu vou pegar os dados do GridView e vou apagá-los usando o DELETE do Web API criado na parte 1. Não é muito difícil ou trabalhoso, só vamos ter que criar dois métodos, um para o GridView e outro para fazer o delete depois do clique do usuário.
O primeiro método que pega os dados do Grid para apagar é necessário fazer um ajuste junto ao GridView, dentro da parte em HTML. O GridView deve disponibilizar além das informações, dois links específicos para excluir e atualizar, veja na figura 1.
Figura 1. GridView com lista e links
Puxar os dados e colocar os links é fácil de fazer. O código da listagem 1 mostra tudo na parte HTML do Visual Studio. Lembro que esses passos são básicos de acordo com a nossa proposta de artigos falando sobre Web API. Segue o código para o GridView, listagem 1.
Listagem 1 - Código do GridView
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false"
DataKeyNames="Id" OnRowCommand="GridView1_RowCommand">
<Columns>
<asp:BoundField DataField="Id" HeaderText="Id" />
<asp:BoundField DataField="Nome" HeaderText="Nome" />
<asp:ButtonField ButtonType="Link" CommandName="Excluir" Text="Excluir" HeaderText="Excluir" />
<asp:ButtonField ButtonType="Link" CommandName="Atualizar" Text="Atualizar" HeaderText="Atualizar" />
</Columns>
</asp:GridView>
A listagem 1 mostra o GridView chamado de GridView1, com as colunas BoundField e ButtonField para excluir e atualizar. Note também a existência do DataKeyNames, um atributo essencial para pegar a chave do banco de dados. Dentro desse atributo existe o valor Id que é o mesmo nome do campo na tabela do banco de dados criada na parte 1 da série de artigos. Acrescentando estas colunas e o DataKeyName, preciso te mostrar como gerar o atributo RowCommand responsável por pegar os valores da linha selecionada com o clique do mouse.
Não posso deixar de falar sobre o CommandName, essa propriedade define qual o nome vai verificar dentro da linguagem C#. Qualquer nome pode ser colocado, lembre-se de não usar palavras com acento ou caracter especial. Nesse caso, coloquei o nome Excluir em um CommandName e no outro Atualizar.
O primeiro passo é acessar dentro da ferramenta na parte de Design, depois basta selecionar o GridView e clicar duas vezes no evento do objeto. A figura 2 mostra a parte de Design dentro da ferramenta.
Figura 2 - Parte de Design dentro da ferramenta
Ao selecionar o GridView, clique na aba de Properties e depois em Events. Veja a figura 3 mostrando o passo a passo.
Figura 3 - Acessando propriedade do objeto
Note que na figura 3, o botão que parece um raio, chama-se Events. Selecionando essa opção, a ação RowCommand está pronta para ser acionada. Para gerar um método específico de RowCommand clicando duas vezes em cima do campo a frente do comando. Automaticamente a ferramenta gera para você um método na linguagem C#.
A listagem 2 mostra o método criado após o duplo clique.
Listagem 2 - Criando método RowCommand
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
}
Note na listagem 2 que o nome do método é composto do nome do objeto mais o nome do comando RowCommand. Dentro do método é necessário verificar qual o nome do comando para excluir ou atualizar de acordo com a seleção do usuário. O que precisamos pegar neste caso é a chave coloca no DataKeyName. Para isso, vou acrescentar alguns códigos dentro do método, e pegando o valor passadao para outro método que vou criar posteriormente afim de apagar o dado no banco de dados pelo Web API.
A listagem 3 mostra como ficou o método para excluir o valor.
Listagem 3 - Método RowCommand, pegando a chave
if (e.CommandName == "Excluir")
int _index = int.Parse((String)e.CommandArgument);
string _chave = GridView1.DataKeys[_index]["Id"].ToString();
Note que na listagem 3 a primeira verificação foi a igualdade do ComandName. Se o CommandName for igual a Excluir então ele entra na próxima linha para executar os dados. O próximo passo é pegar o index da linha selecionada com o clique do mouse. Esse valor foi armazenado na variável index do tipo Int. A segunda linha é responsável por pegar a chave daquele registro, por isso passo o index e o nome do campo no banco de dados. GridView1.DataKeys[_index][“Id”].ToString().
O valor é armazenado na variável do tipo String chamada chave. Essa chave precisa ser passada para outro método e esse método precisa chamar o Web API de DELETE passando parâmetros. O método que vou criar chama delete(int Id) e espera como parâmetro o tipo Int.
Antes de criar o método, lembre-se que o client deve ser definido no construtor da classe. A listagem 4 mostra essa informação necessária.
Listagem 4 - Método construtor da classe
public partial class WebForm1 : System.Web.UI.Page
HttpClient client;
Uri usuariosUri;
public WebForm1()
if (client == null)
client = new HttpClient();
client.BaseAddress = new Uri(endereco_do_site);
client.DefaultRequestHeaders.Accept.Add(new System.Net.Http.Headers.MediaTypeWithQualityHeaderValue("application/json"));
...
A listagem 4 já foi explicada no artigo parte 2 publicado anteriormente.
Passando para a criação do método delete, basta escrever algumas linhas específicas para executar o delete via Web API. A criação do método é mostrado na listagem 5.
Listagem 5 - Criando o método delete.
private void delete(int Id)
System.Net.Http.HttpResponseMessage response = client.GetAsync("api/usuario/" + Id).Result;
response = client.DeleteAsync("api/usuario/" + Id).Result;
if (response.IsSuccessStatusCode)
usuariosUri = response.Headers.Location;
else
Response.Write(response.StatusCode.ToString() + " - " + response.ReasonPhrase.ToString());
//chamar o método que pega todos os dados novamente, mostrado na parte 2.
A listagem 5 mostra o método privado e não retorna valor algum, só espera que seja passado um valor do tipo Int informado anteriormente. A primeira linha é o response que passa o endereço do Web API com o valor passado. Depois disso, é necessário chamar o método DeleteAsync passando os parâmetros e se for executado com sucesso, o dado é apagado. Por isso que na próxima linha é verificado o status do código executado, se não for executado corretamente, o código passa para o else que mostra o erro ao usuário pelo StatusCode. No final de tudo, é necessário chamar outro método que pega todos os valores automaticamente consultando o Web API.
Com o método delete pronto, basta chamar indicar o nome passando parâmetro dentro do RowCommand. Ai ficou simples para fazer. A listagem 6 mostra essa chamada dentro do método.
Listagem 6 - Chamando o método delete
delete(int.Parse(_chave));
A listagem 6 mostra na última linha que o método delete é chamado passando como parâmetro a chave convertida para o tipo Int. Para mostrar todo esse caminho percorrido, vou debugar via passo a passo e vai entender todo o método.
Ao clicar F5 na ferramenta e marcar a linha desejada posso acompanhar passo a passo e os valores das variáveis naquele momento. A figura 4 mostra a lista toda de dados no meu banco de dados.
Figura 4 - Mostrando todos os dados do banco de dados
Marquei a primeira linha do RowCommand e selecionei a primeira linha do meu grid. Note que o valor da primeira coluna é 133. Esse é o valor que precisa ser pego dentro do método. A figura 5 mostra que o método parou esperando ser debugado.
Figura 5 - Debugando o método RowCommand.
A figura 6 mostra que o valor da chave pego foi o 133, o mesmo selecionado pelo clique do usuário.
Figura 6 - Mostrando o valor seleiconado
Note que na figura 6, o debug está parado no comando delete. Para entrar dentro do método delete, basta clicar F11; se for F10 ele não entra no método mas executa o que tem dentro dele. Resolvi entrar dentro do método clicando F11. A figura 7 mostra o método delete.
Figura 7 - Debugando o método delete para apagar o dado.
A figura 8 mostra que o valor foi apagado com sucesso.
Figura 8 - Dado apagado com sucesso.
Depois de deletar o dado, eu pego novamente todos os dados e mostro na tela pelo GridView. A figura 9 mostra que o dado 133 não existe mais no banco de dados buscado pelo Web API.
Figura 9 - Mostrando o dado apagado.
Todos os passos acontecem de forma rápida e simples usando Web API, o trâmite é feito rapidamente e pode ser chamado por qualquer aplicativo incluindo aplicativo móvel.
Bom, espero que tenha gostado e fico por aqui mais uma vez. Qualquer dúvida, pode entrar em contato pelo site www.mauriciojunior.org. Fique atendo, em breve publico mais um artigo.
This article was originally written by: Maurício Júnior MCP, MCAD, MVP Microsoft www.mauriciojunior.org blog.mauriciojunior.org
Naomi N edited Original. Comment: Added language tag to title and language tag