Como usar de forma fácil uma ViewModel em um projeto .Net MVC e AutoMapper

Marcio Nizzola
3 min readJun 8, 2021

Certo dia numa aula na Etec surgiu uma dúvida de um aluno sobre como fazer algo muito simples, mas achei bastante positiva a abordagem.

A situação era a seguinte:

Meus alunos haviam desenvolvido um projeto .NET Core 3.1 MVC, onde haviam 2 entidades: Cliente e ClienteEndereço, e eles queriam ter uma tela onde ao cadastrar um cliente novo, já fosse dado o input de um endereço (um cliente suporta vários endereços nesse cenário).

Sendo assim, estas eram as classes de cliente e endereço:

classe clienteModel

Sendo assim, através da criação das Controllers + Views através do método “Scaffold”, tínhamos telas separadas para cada entidade, pois trata-se de um modelo “Mestre-Detalhe” onde o registro mestre é o Cliente, e o endereço são os detalhes que fazem parte de uma lista dentro do cliente já que são classes relacionadas.

Usar uma ViewModel !

Seguindo esta idéia, teríamos várias formas de se fazer, uma delas era a criação de uma “ViewModel” (que nada mais é do que uma classe criada para expor para a View uma lógica de apresentação).

Para isto, criamos uma Classe nova, chamada de “ClienteFullViewModel” onde colocamos as propriedades das duas classes, de forma que possamos levá-las até a View e recebermos de volta o que foi postado.

Sendo assim, cabe à nós, criarmos agora uma tela, onde possam ser agregados todos os dados e dentro da “controller” e criarmos os métodos GET e POST para tratamento destas informações.

Para criar a tela, podemos criar uma View em branco.

Depois podemos copiar o html da View “Create” do Cliente para servir de base para a nova View, e copiar os campos da View de endereços, montando uma tela com o layout que quisermos.

O ponto mais importante, é que no topo da View, temos a referência da classe que esta recebe, sendo assim, iremos alterar para a classe “ClienteFullViewModel” e o destino do form quando postado para um novo método que criaremos na Controller, que se chamará “CreateFull”.

Então a View Criada ficará com esta aparência.

Agora temos que criar os métodos na Controller, para fazer funcionar.

Criamos o método “Get” que não fará nada, pois apenas será carregada a tela vazia.

Já no método Post, teremos a tratativa para salvar primeiro um cliente, e depois salvar um endereço, já que o endereço precisa da chave primária do cliente para ser gravado.

Fizemos o uso do Automapper (não sabe o que é automapper? veja lá no final) para facilitar a conversão dos dados da ViewModel para a classe “Cliente”, assim como “ClienteEndereço”.

Pronto, agora a lógica do salvamento vai permitir gravar um cliente e depois o endereço atrelado à ele.

Simples demais, mas para quem está começando fica a dica aqui como forma de ajudar no desenvolvimento.

Automapper

Para que não sabe o que é Automapper, fiz um comparativo com código comentado mostrando tudo que o Automapper substituiu ! (para implementar vide artigo)

Para quem nunca usou, como fazemos para implementar ? veja este Post !

--

--

Marcio Nizzola

Microsoft MVP | Software Architect na CI&T | Prof. da Etec Itu | Membro Fundador da Comunidade Itu Developers.