Criando e Consumindo Web API . Parte 3

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.


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
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
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
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName == "Excluir")
       {
        int _index = int.Parse((String)e.CommandArgument);
              string _chave = GridView1.DataKeys[_index]["Id"].ToString();

              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.




Autor: Mauricio Junior
Udocs.me