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

Services & WebAPI

Neste post final da série vamos implementar as funções do nosso CRUD utilizando JSONP e CORS para consumir nosso serviço em um domínio diferente. Como já criamos todos os subsídios nos posts anteriores, bem como já exploramos os motivos para esta abordagem, neste post vamos focar no velho e bom “mão na massa”.

capa

De posse do nosso site, vamos implementar as funções Ajax para consumir nosso serviço. O primeiro ponto é colocar nosso serviço para rodar. Acesse a aplicação CloudHostingMunicipios que criamos no primeiro post da série.

Nosso próximo passo é iniciar site Web API CORS Client, que é um simples site HTML que foi disponibilizado no post anterior da série.

 

Implementando JSONP

Com nosso recurso em mãos vamos partir para a mão na massa: Acesse o arquivo index.html onde iremos utilizar o JSONP para realizar nossa listagem de municípios. Insira o seguinte código dentro da tag <script>:

figura00

É importante lembrar de substituir a porta do serviço caso esteja rodando em uma diferente da minha. Sendo assim, até este momento, meu serviço está rodando em http://localhost:56601 e meu cliente está em http://localhost:6135. Agora, se dermos um refresh em nosso cliente vamos obter o seguinte resultado:

figura01

Como vimos em nosso código, caso o retorno da nossa função seja um erro ele exibe a mensagem acima. Vamos olhar mais a fundo o problema:

figura02

figura03

Como vimos no post anterior, já preparamos nossa aplicação para retornar um JSONP ao invés de um JSON. O erro que temos aqui é um problema de formatação. Para que os valores sejam exibidos corretamente, precisamos definir em nossa aplicação (lado do servidor), uma maneira para que o servidor reconheça que o pedido partiu de uma solicitação JSONP a fim de responder adequadamente.

Para isso, temos a possibilidade de escrever em nossa aplicação o nosso próprio Media Type Formatter. Para facilitar nossa vida, vamos utilizar o NuGet para obter nosso formatter. Clique com o botão direito em References e Manage NuGet Packeges… e instale o pacote online WebApiContrib.Formatting.Jsonp.

figura04

Agora precisamos criar nossa classe de configuração para conseguirmos registrar nosso formatter. Clique com o botão direito na pasta App_Start e adicione uma nova classe chamada FormatterConfig e insira o código abaixo:

figura05

Agora acesse seu arquivo Global.asax.cs e insira a seguinte linha de código:

  • FormatterConfig.RegisterFormatters(GlobalConfiguration.Configuration.Formatters);

Seu Application_Start() deve ficar como na imagem abaixo:

figura06

Agora se dermos um refresh na página é possível perceber em que nosso retorno tem algo como um  jQuery17208638584909494966_1345764737438&_=1345764737668([{ jsondata }]), que é reconhecido pela nossa função calback. Agora temos o seguinte resultado:

figura07

Note que agora ele não está devolvendo apenas o JSON. Agora temos a chamada da nossa função JSONP.

Agora acesse o arquivo getbyuf.html e insira o seguinte código na tag <script>:

figura09

Substitua a linha do botão pelo código abaixo:

  • <input name="submit" type="submit" id="submit" value="Buscar" onclick="getByUF(); return false;" />

Agora, ao pesquisar um determinada UF teremos todos os municípios cadastrados:

figura08Vamos repetir este processo para o getbycodigo.html. Incluía o seguinte código na tag <script> :

figura11

Substitua a linha do botão pelo código abaixo:

  • <input name="submit" type="submit" id="submit" value="Buscar" onclick="getByCodigo(); return false;" />

O resultado será como se segue:

figura10

Neste momento já cobrimos nossa solução com as funções e chamadas JONSP. Agora para os verbos seguintes, vamos precisar trabalhar com CORS.

 

Implementando CORS

Algo importante a ser levado em consideração é que para se implantar CORS é necessário haver do lado do servidor um mecanismo para dar permissão ao  domínio que realiza a requisição caso atenda aos requisitos necessários. O servidor deve ser capaz de reconhecer estes requisitos necessários a fim de permitir a ação.

Sendo assim precisamos criar um manipulador para analisar o cabeçalho da requisição de entrada e permitir o acesso. Clique com o botão direito sobre a pasta App_Start e inclua uma nova classe chamada CorsHandler. Agora altere o código como o descrito abaixo:

figura12

Com nosso manipulado pronto, precisamos registra-lo no Application_Start do arquivo Global.asax.cs:

figura13

Com todas as alterações do lado do servidor implementadas, vamos alterar nosso cliente para testar os resultados. Inclua o seguinte código na tag <script> do arquivo post.html:

figura14

Substitua a linha do botão pelo código abaixo:

  • <input name="submit" type="submit" id="submit" tabindex="5" value="Enviar" onclick="AddMunicipio(); return false;" />

Agora é possível cadastrar um novo município:

figura15

figura16

Para que o post não fique ainda maior, não vou publicar as outras funções, até porque agora não tem mais nada de diferente, apenas a mesma linha de atuação para a alteração e deleção do municípios. Não se preocupe, pois na aplicação de exemplo você vai ter todos os exemplos implementados e funcionais. O exemplo do código pode ser baixado CLICANDO AQUI!

No próximo post vou estar publicando esta aplicação na nuvem utilizando IaaS e PaaS para hospedar e consumir nosso serviço.

 

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