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

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.

This article was originally written by:

Maurício Júnior
MCP, MCAD, MVP Microsoft
www.mauriciojunior.org
blog.mauriciojunior.org