Esta página foi útil?
Seus comentários sobre este conteúdo são importantes. Queremos saber sua opinião.
Comentários adicionais?
1500 caracteres restantes
Exportar (0) Imprimir
Expandir Tudo
Web
Expandir Minimizar

Criando e Consumindo Web API – Parte 3

Mauricio Junior

Dn466407.060DE5057573180CEC6D227C6D3E2207(pt-br,MSDN.10).png

Setembro 2013

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://msdn.microsoft.com/pt-br/library/dn450975.aspx

Parte 2 - http://msdn.microsoft.com/pt-br/library/dn450977.aspx

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.

Dn466407.48E6F4885E3051512C72367E8F1EDECF(pt-br,MSDN.10).png

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.

Dn466407.18D73992E409271B8AB4121864C57817(pt-br,MSDN.10).png

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.

Dn466407.2526842F596323342FDF304C08DFC27C(pt-br,MSDN.10).png

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.

Dn466407.BCB2A3286492DCC5C36C8131E0E39E2F(pt-br,MSDN.10).png

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.

Dn466407.2F482486EA8AE3205731569E4A07009A(pt-br,MSDN.10).png

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.

Dn466407.F5880FF64809DD520D6DE51BDB85A8E4(pt-br,MSDN.10).png

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.

Dn466407.E1A61C126A00973055DE5176AFD28A17(pt-br,MSDN.10).png

Figura 7 - Debugando o método delete para apagar o dado.

A figura 8 mostra que o valor foi apagado com sucesso.

Dn466407.D5C3316B645E2873873B012711C79A34(pt-br,MSDN.10).png

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.

Dn466407.3A1D15AF0E9049786CD88645F00E7149(pt-br,MSDN.10).png

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 público mais um artigo.

Mostrar:
© 2015 Microsoft