Model Binding (ASP .NET MVC) – Parte 1

Olá pessoal!

Neste post, iremos dar início a uma série sobre o mecanismo do ASP.NET MVC conhecido por Model Binding, iremos apresentar seus recursos e principais características.

Nesta primeira parte iremos entender o que é o model binding, suas funcionalidades no MVC, a facilidade de se utilizar e como nos ajuda em nossos projetos.

O QUE É MODEL BINDING?

É o processo de criar objetos a partir de dados enviados pelo browser. Mesmo sem saber, utilizamos Model Binding a todo momento. Isso acontece quando implementamos actions que recebem parâmetros com valores primitivos ou até mesmo objetos complexos.
Nesse caso o framework .NET MVC precisa tratar as requisições de forma que possa passar valores apropriados nos parâmetros.

Nesse primeiro exemplo iremos implementar uma action bem simples, que irá ser responsável por recuperar no seu parâmetro valor do tipo inteiro.

1- Vamos ao exemplo:
Primeiro: Iremos criar um novo projeto do tipo ASP .NET MVC 3 ou 4 Web Application, pode ser do tipo Empty.

Segundo: Adicionaremos um Controlador chamando-o de HomeController com duas actions: Index e ExemploBinder. Na action de ExemploBinder irá ter uma variável como parâmetro do tipo inteiro com o nome de valor.

public class HomeController : Controller
{        
    public ActionResult Index()
    {
        return View();
    }

    public ActionResult ExemploBinder(int valor)
    {
        return RedirectToAction("Index");            
    }
}

Terceiro: Adicionaremos uma View chamando-a de Index e criaremos um formulário com dois inputs: <input type=”text” name=”valor” /> e <input type=”submit” value=”Enviar” />.

1:  <h2>Model Binding (ASP .NET MVC) - Parte 1</h2>  
2:  <form action="@Url.Action("ExemploBinder")" method="post">    
3:    <table>  
4:      <tr>  
5:        <td>Valor:</td>  
6:        <td>  
7:          <input type="text" name="valor" />  
8:        </td>  
9:      </tr>      
10:      <tr>  
11:        <td colspan="2" style="text-align: right">  
12:          <input type="submit" value="Enviar" />  
13:        </td>  
14:      </tr>  
15:    </table>  
16:  </form>   

2- Envio dos valores:

Após termos implementado e configurado actions, controller e formulário, vamos ao envio dos valores. Digite qualquer valor do tipo inteiro campo e clique em enviar.

action

Como podemos observar na imagem acima, colocamos  um break point na action para podermos visualizar o valor que está sendo enviado. Nesse caso o valor foi 43 e no envio para a action por de trás o MVC fez o binder para a variável no momento que foi invocado a action.

3- Alguns conceitos:

Todo model binder implementa a interface de IModelBinder, o framework MVC já possui seu próprio model binder default (DefaultModelBinder). O mesmo é utilizado para recuperar os valores que são enviados nas requisições e bindar aos objetos ou tipos de valores que são enviados, e claro também faz a sua implementação do IModelBinder. O DefaultModelBinder segue uma sequência para bindar os valores que são enviados, a sequência segue abaixo:

1- Request.Form
2- RouteData.Values
3- Resquest.QueryString
4- Request.Files

Pela sequência podemos ter uma noção clara e objetiva de como o MVC faz seu mecanismo, quando o envio é realizado o DefaultModelBinder irá bindar a um objeto que atenda com as seguintes assinaturas, conforme apresentado abaixo:

1- Request.Form[“valor”],
2- RouteData.Values[“valor”],
3- Request.QueryString[“valor”],
4- Request.Files[“valor”].

No exemplo que implementamos o binder foi feito apartir do Request.Form, nesse caso foi o primeiro que atendeu as necessidades do framework. A imagem abaixo segue de como ficou o enviou:

request_form

Como podemos notar o tipo de valor que está sendo enviado é do tipo “string”, mas na action que apresentamos, ficou responsável por recuperar valor do tipo inteiro e a responsabilidade é do framework de invocar o seu método BindeModel, isso é feito para recuperar os valores que necessitamos (nesse caso valor do tipo inteiro).

Bom pessoal, por enquanto ficamos por aqui. É um exemplo simples, mas o conceito que é empregado por trás dessa plataforma é incrível. Em breve iremos dar continuidade a mais recursos que são empregados, criaremos mais exemplos e também implementaremos nosso próprio IModelBinder customizado.

Abraços, até o próximo post.

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…