ASP .NET – Web API

Introdução

ASP.NET Web API é um framework para a construção de aplicações Web desenvolvida sobre a plataforma .NET. Mais informações acessem o site http://www.asp.net/web-api.

Neste tutorial, iremos usar o ASP.NET Web API para criar uma API que retorna uma listagem de produtos. A página web (front-end) usa o jQuery para exibir os resultados.

1- Criar Projeto Web API

Primeiro iremos criar um novo projeto, utilizaremos como desenvolvimento o Visual Studio 2012:

Criando novo projeto

Observando a imagem acima, nota-se que é necessário à utilização do framework 4.5, visto que o ASP. NET Web API está disponível somente na versão 4.5 do .NET Framework.

Selecione o projeto Web API:

Selecionando projeto Web API

2- Adicionando classe e o repositório

Após ter criado o projeto, iremos criar nossa classe de “Produto” e o repositório. Sendo que o repositório ficará responsável de criar instância e retornar os valores.

Classe:

namespace SampleWebApi.Models
{
    public class Produto
    {
        public int Id { get; set; }

        public string Nome { get; set; }

        public decimal Preco { get; set; }
    }
}

Repositório:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace SampleWebApi.Models
{
    public class ProdutosRepositorio
    {
        private static IList<Produto> _produtos;

        public ProdutosRepositorio()
        {
            if (_produtos == null)
            {
                _produtos = new List<Produto>();
                _produtos.Add(new Produto { Id = 1, Nome = "Camiseta", Preco = 19.90M });
                _produtos.Add(new Produto { Id = 2, Nome = "Sapato", Preco = 59.90M });
                _produtos.Add(new Produto { Id = 3, Nome = "Meia", Preco = 9.90M });
            }
        }

        public IList<Produto> ObterTodos()
        {
            return _produtos;
        }

        public Produto ObterPorId(int id)
        {
            return _produtos.FirstOrDefault(x => x.Id == id);
        }
    }
}

3- Adicionando o Controller

Criaremos o controller de Produtos, ficará responsável por atender as requisições HTTP e consequentemente retornando os valores que precisaremos. Note que ao criar o projeto existe por Default um controller de exemplo (ValuesController.cs), você pode deletá-lo se quiser.

Coloque o nome do controller de ProdutosController e selecione a opção API controller with empty read/write actions

Controller de Produtos

Abaixo segue a classe de ProdutosController que acabamos de criar e aproveitando também já fiz algumas codificações.

using System.Collections.Generic;
using System.Web.Http;
using SampleWebApi.Models;

namespace SampleWebApi.Controllers
{
    public class ProdutosController : ApiController
    {
        ProdutosRepositorio _repositorio;

        public ProdutosController()
        {
            _repositorio = new ProdutosRepositorio();            
        }

        public IEnumerable<Produto> Get()
        {
            return _repositorio.ObterTodos();            
        }

        public Produto Get(int id)
        {
            return _repositorio.ObterPorId(id);            
        }
    }
}

4- Chamando a API com JavaScript utilizando jQuery

Para apresentação dos valores iremos utilizar a biblioteca do jQuery. Na View (Index.cshtml) que se encontra dentro da pasta Home iremos fazer algumas modificações para apresentação dos valores. A figura abaixo está apresentando como irá ficar a implementação.

1:  <div>    
2:    <h1>Exemplo: ASP.NET Web API</h1>  
3:    <ul>  
4:      <li>  
5:        <h3>Produtos</h3>  
6:        <ol id="produtos"></ol>  
7:      </li>      
8:    </ul>    
9:    <p>  
10:      Id: <input type="text" placeholder="Busca produto" name="id" />   
11:        <input type="button" name="busca" value="Buscar" />  
12:    </p>  
13:    <p>  
14:      <pre class="retorno"></pre>    
15:    </p>    
16:  </div>  

Código JavaScript com auxílio do jQuery ajuda na apresentação dos valores, tanto para a listagem dos produtos quando para a busca de um único produto. Abaixo segue a codificação de como foi implementado:

Código JavaScript – Listagem e busca

1:   <script type="text/javascript">  
2:      var App = {  
3:        Init: function () {  
4:          try {  
5:            this.ObterProdutos();  
6:            this.ConfigBusca();  
7:          } catch (e) {  
8:            console.log("Contains error scripts");  
9:          }  
10:        },  
11:        ObterProdutos: function () {  
12:          // Send an AJAX request          
13:          $.get("api/produtos/",  
14:          function (data) {  
15:            // On success, 'data' contains a list of products.  
16:            $.each(data, function (key, val) {  
17:              // Add a list item for the product.  
18:              var html = JSON.stringify(val, null, 2);  
19:              $('<li>', { text: html }).appendTo($('#produtos'));  
20:            });            
21:          });  
22:        },  
23:        ConfigBusca: function () {          
24:          $('input[name="busca"]').click(function () {  
25:            // Select Id for search  
26:            var $id = $('input[name="id"]').val();            
27:            // On success, 'data' contains the product  
28:            $.get('/api/produtos', { id: $id }, function (data) {  
29:              var html = JSON.stringify(data, null, 2);  
30:              $('.retorno').html(html);  
31:            });  
32:          });  
33:        }  
34:      };  
35:      jQuery(function () {  
36:        App.Init();        
37:      });  
38:    </script>  

5- Apresentação dos valores

Após ter feito todo esse procedimento executaremos o projeto. A página inicial deverá estar apresentado os valores conforme a figura abaixo:

Apresentação dos valores

Observe que os valores apresentados foram feitas através da chamada $.get(“api/produtos/”…, sendo assim, a chamada irá resultar em uma lista de produtos. Com a ajuda do JSON.stringify conseguimos apresentar o objeto em formato JSON. Vale ressaltar que o retorno dos valores quando são executados via HTTP podem ter o retorno em vários formatos os mais utilizados são JSON e XML, isso irá depender da necessidade de cada aplicação que irá fazer o uso.

Para a busca de um único produto, temos que informar o Id no campo de busca e fazer o envio. A figura abaixo está apresentando o retorno da busca:

Retorno da busca

Conclusão

Como podemos observar requisições via HTTP não é apenas para servir páginas HTML é também uma poderosa plataforma para a construção de API’s expondo serviços e dados, ficando mais simples e flexível. Praticamente qualquer plataforma que atenda protocolos HTTP poderão fazer o uso dessa API. Podendo atingir uma ampla gama de clientes, incluindo navegadores, dispositivos móveis e aplicativos de desktop tradicionais.

Referência: Your First ASP.NET Web API (C#)

Bom pessoal é isso, obrigado…

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s