ASP.NET Web API - Criando um CRUD e consumindo em um domínio diferente. CORS, AJAX e JSONP [Parte 1]

Services & WebAPI

capa01Se você também está utilizando WebAPI ou pretende utilizar em breve, e bem possível que você queira utilizar o mesmo em outras plataformas fora do .NET. Isso faz todo sentido, uma vez que o WebAPI expõe os métodos via HTTP e logo tem como maior benefício a possibilidade de ser consumido por um número maior de clientes. Neste post, vamos explorar este ponto criando uma solução WebAPI e como cliente um site HTML com JQuery.

Cabe salientar alguns pontos:

    • Esta aplicação será utilizada nos próximos posts da série;
    • Vou utilizar o Visual Studio 2013RC, mas estou testando também no VS2012;
    • Este post será dividido em três partes a fim de facilitar o passo a passo.

Basicamente, vamos criar uma solução ASP.NET Web API expondo nosso serviço. Em outro projeto iremos criar uma solução cliente utilizando apenas HTML e JQuery para simular um cenário mais real possível. Com esta aplicação cliente, iremos fazer um CRUD completo, especializando algumas buscas. Todo o código fonte do post está disponível para download. Ai vai uma prévia do nosso cliente:

000000

 

Criando o serviço

O primeiro passo é criar nosso serviço. Vamos criar como exemplo um serviço para manter a lista de municípios brasileiros com código, uf e nome. Este exemplo também será utilizado nos próximos posts, então mãos a obra.

Abra o Visual Studio e selecione a opção New Project… ASP.NET Web Application e nomeie o seu projeto para CloudHostingMunicipios e clique em OK.

001

Na próxima tela selecione o template Web API e em Create Project. Agora vamos criar nosso modelo. Clique com o botão direito na pasta Models, Add e Class… Nomeie sua classe como Municipio.cs.

003

Agora insira o seguinte código a sua classe:

002

Nosso próximo passo é criar nosso repositório. Inicialmente eu planejei este post utilizando o Azure Table Storage para armazenar os dados, mas acabei decidindo por uma solução mais simples e independente para os testes. Sendo assim vamos trabalhar nossa fonte de dados em um arquivo txt. Para isso, vou disponibilizar o arquivo contendo todos os 5565 municípios brasileiros. Para prosseguir no post, você pode fazer o download do arquivo CLICANDO AQUI. Após isso, adicione o arquivo na pasta Models para ser utilizado como nossa fonte de dados.

Agora, clique com o botão direito na pasta Models e insira uma classe chamada IMunicipiosRepository.cs. Esta classe deverá conter o seguinte código:

004

Estamos determinando em nosso “contrato” os métodos que serão trabalhados no repositório. Basicamente vamos implementar um CRUD, onde o vamos ter um método especializado que busca apenas um município dado o seu código e um método que busca todos os municípios de uma determinada UF. Fora isso vamos realizar apenas um CRUD.

Com nosso contrato especificado, clique com o botão direito na pasta Models e crie uma nova classe intitulada MunicipiosRepository.cs. Assim que a classe for gerada, faça ela herdar de IMunicipiosRepository. Como vamos trabalhar com um arquivo físico hospedado em nosso site, insira o uma variável caminho para informar o caminho do arquivo dentro do servidor. Seu código deve ficar assim:

005

Agora vamos aos métodos:

ListAllMunicipios()

006

O método acima apenas lê todas a linhas do arquivo txt e devolve como uma lista de Munícipio. Antes do retorno estou aproveitando para ordenar por UF já que a lista não usa este critério.

GetAll, GetByCodigo e GetByUF

007

Nos métodos acima, estamos apenas realizando buscas sobre nossa coleção de municípios.

AddMunicipio()

008

UpdateMunicipio()

009

DeleteMunicipio()

010

Com nossa classe de repositório já implementada, vamos criar nossa Controller. Clique com o botão direito na pasta Controllers, Add… e Web API Controller Class (v1). Na tela que se segue nomeie o seu controller como MunicipioController.

03

Substitua o código da controller pelo trecho de código abaixo:

011

Observe que:

  • Para as solicitações de POST, PUT e DELETE estamos retornando um StatusCode NotFound em caso de erro;
  • Para as solicitações PUT e DELETE estamos retornando um StatusCode OK em caso de sucesso;
  • Para a solicitação POST retornamos um StatusCode Created para sinalizar o sucesso da operação;
  • Os demais métodos retornam os objetos selecionados.

 

Neste momento já temos o nosso serviço funcional. É só executar a aplicação para testar.

012

 

No próximo post vamos criar nossa aplicação cliente apenas utilizando HTML e JQUERY para o consumo do serviço criado neste post. Também veremos algumas particularidades para do consumo de serviços entre domínios diferentes.

O código fonte do serviço pode ser baixado CLICANDO AQUI!

 

Até mais e bom estudo a todos!

Me Azul

Twitter: @vitormeriat

vitormeriat@gmail.com

vitor.pereira@studentpartner.com


Author's profile picture

Vitor is a computer scientist who is passionate about creating software that will positively change the world we live in.

MVP Azure - Cloud Architect - Data science enthusiast


5 minutes to read