Tutorial ASP.NET MVC 4 - Parte 4 - Models

Então pessoal, na Parte 3 do nosso tutorial, vimos que é possível obter parâmetros enviados pelo formulário via POST, basta colocar o nome do parâmetro na Action do Controller com o mesmo do nome da propriedade name do input no formulário. Só que, e nos casos em que temos muito mais que dois campos formulário, se você tiver sei lá... 7 campos no seu formulário, você criaria uma Action com 7 parâmetros? Se fosse mais?
Nós também percebemos que alguns campos podem pertencer a uma mesma estrutura de dados, por exemplo Cliente com Nome e CPF. Ai que entra na história o Model. Ele nada mais é que uma classe comum. Aqui no nosso tutorial vamos criar a classe Cliente na pasta Models do nosso projeto.
  1. Botão direito na pasta Models -> Add -> Class
  2. Troque Class1 por Cliente
Depois que criar sua classe Cliente escreva duas propriedades como no exemplo abaixo:

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

namespace TutorialMVC.Models
{
    public class Cliente
    {
        public String Nome { get; set; }
        public String CPF { get; set; }
    }
}

Note que criamos as propriedades com o mesmo nome do input do formulário. Agora precisamos altera o Controller Cliente que criamos antes. Dele deve ficar dessa forma:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using TutorialMVC.Models;

namespace TutorialMVC.Controllers
{
    public class ClienteController : Controller
    {
        public ActionResult Cadastrar()
        {
            return View();
        }

        [HttpPost]
        public ActionResult Cadastrar(Cliente cliente)
        {
            return View();
        }
    }
}

Coloque um breakpoint no "return View();" da Action Cadastrar que acabamos de alterar, execute a aplicação, acesse http://localhost:4537/Cliente/Cadastrar, preencha os dados do formulário, submeta o formulários e o seu resultado deve ser esse aqui:


Legal né? Não preciso criar um parâmetro para cada input do formulário. Quem fez essa "mágica", de criar um objeto da classe Cliente foi o Model Binder, ele é o recurso do ASP.NET MVC responsável por identificar que sua Action recebe um objeto Cliente como parâmetro e se no Request existem campos com o mesmo nome das propriedade da classe Cliente. O Model Binder então instancia sua classe e seta os valores nas propriedades corretas pelo nome. Isso é uma mão na roda, até quando nossa classe tem uma coleção. Hum, coleção? É, vamos dizer que nosso Cliente tem vários telefones, você representa isso na classe criando uma coleção nela. Vamos alterar nossa classe Cliente dessa forma:

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

namespace TutorialMVC.Models
{
    public class Cliente
    {
        public String Nome { get; set; }
        public String CPF { get; set; }
        public List<String> Telefones { get; set; }
    }
}

Agora eu tenho uma lista de Strings na minha classe Cliente, só precisamos fazer uma alteração no nosso formulário desse jeito:

@{
    ViewBag.Title = "Cadastrar";
}

<h2>@ViewBag.Title</h2>
<form action="/Cliente/Cadastrar" method="post">
<label>Nome:</label>
    <input name="Nome" type="text" />

    <label>CPF:</label>
    <input name="CPF" type="text" />

    
<br />
    <label>Telefones:</label>
    <input name="Telefones" type="text" />
    <input name="Telefones" type="text" />

    <button>Enviar</button>

</form>

Depois que você executar o preencher o formulário olha o resultado do submit do formulário:

O Model Binder é uma mão na roda!
Para entender melhor o quanto o Model Binder pode facilitar nossa vida vamos criar mais uma classe. Crie uma classe chamada Telefone nas mesma pasta Models onde criamos a classe Cliente dessa forma:

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

namespace TutorialMVC.Models
{
    public class Telefone
    {
        public int DDD { get; set; }
        public String Numero { get; set; }
    }
}

Além disso altere a classe Cliente desse jeito:

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

namespace TutorialMVC.Models
{
    public class Cliente
    {
        public String Nome { get; set; }
        public String CPF { get; set; }
        public List<Telefone> Telefones { get; set; }
    }
}

Agora o negócio ficou interessante, afinal telefone também tem um ddd se um conceito (estrutura de dados/ classe/ estrutura/ entidade) tem mais de uma propriedade ela fatalmente é uma classe nova. Ou seja, ddd é uma informação de Telefone, não do Cliente. Cada classe com as informações (propriedades) que lhe diz respeito.
Certo, já que fizemos isso, precisamos agora alterar nosso formulário de novo para que o Model Binder saiba mapear corretamente as propriedades das classes Cliente e Telefone.

@{
    ViewBag.Title = "Cadastrar";
}

<h2>@ViewBag.Title</h2>
<form action="/Cliente/Cadastrar" method="post">
<label>Nome:</label>
    <input name="Nome" type="text" />

    <label>CPF:</label>
    <input name="CPF" type="text" />

    
<br />
    <label>Telefones:</label>
    <input type="text" name="Telefones[0].DDD" /><input type="text" name="Telefones[0].Numero" />
    <br />
    <input type="text" name="Telefones[1].DDD" /><input type="text" name="Telefones[1].Numero" />

    <button>Enviar</button>

</form>

Note que continuamos referenciando a lista de telefones pelo nome da propriedade Telefones da classe Cliente. Além disso, agora precisamos informar também as propriedades da classe Telefone. E perceba que foi usado a notação de acesso de array para informar que termos dois telefones na lista de telefones do nosso cliente. Execute a aplicação e veja o Model Binder entrando em ação novamente.

Model Binder ataca novamente!
Dessa vez vamos ficar por aqui e com isso consegui apresentar os conceitos básicos do ASP.NET MVC para você, o entendimento desses conceitos é muito importante para que você entenda o que planejei em seguida. Como sempre um resumo do que vimos dessa vez:

  • Utilização de Models.
  • Vimos que um Model é uma simples classe C#.
  • O super trunfo do MVC é o Model Binder.
  • O Model Binder associa os inputs dos formulários as propriedades das classes pelos nomes delas.
  • Para mapear as propriedades de uma classe que esteja em uma coleção precisamos usar a notação de acesso a um array.

A partir de agora farei um novo clico de tutoriais indo pouco mais além, com validações com Data Annotation e jQuery Validation, Partial Views, utilização de Helpers e acesso a dados com Entity Framework sempre seguindo esse estilo prático. 
Se você ficou com alguma dúvida pode me enviar um email ou deixar um cometário, terei prazer em te ajudar.

Comentários

Postagens mais visitadas