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.
Sign up to our newsletter
Receive our latest updates about programming languages, software, database, books, ebooks, classes, jobs and more.
