Para criar o controller e as view correspondente a um determinado ViewModel faça:
ViewModel
namespace WebApplication1.Models
{
public class ExampleViewModel
{
public Produto Produto { get; set; }
public Cliente Cliente { get; set; }
}
public class Produto
{
public int Id { get; set; }
public string Descricao { get; set; }
}
public class Cliente
{
public int Id { get; set; }
public string Nome { get; set; }
}
}
Nessa ViewModel (ExampleViewModel
) eu tenho duas agregações das classes Produto
e Cliente
e com elas vou criar as view Principal (Create
) e suas respectivas views para cada agregação existente.
Como seria?
public class ExamplesController : Controller
{
[HttpGet()]
public ActionResult Create()
{
return View();
}
[HttpPost()]
public ActionResult Create(ExampleViewModel exampleViewModel)
{
//ROTINAS DE GRAVAÇÃO
return View();
}
}
No controller
é simples crie um Create com o verb GET
e outro com o verb POST
com um parametro do seu ViewModel
(ExampleViewModel
).
Crie a sua view nesse formato:
View Produto: (_Produto.cshtml)
@model WebApplication1.Models.ExampleViewModel
<div class="form-horizontal">
<h4>Produto</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.Produto.Id, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Produto.Id, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Produto.Id, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Produto.Descricao, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Produto.Descricao, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Produto.Descricao, "", new { @class = "text-danger" })
</div>
</div>
</div>
View Cliente: (_Cliente.cshtml)
@model WebApplication1.Models.ExampleViewModel
<div class="form-horizontal">
<h4>Cliente</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
@Html.LabelFor(model => model.Cliente.Id, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Cliente.Id, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Cliente.Id, "", new { @class = "text-danger" })
</div>
</div>
<div class="form-group">
@Html.LabelFor(model => model.Cliente.Nome, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10">
@Html.EditorFor(model => model.Cliente.Nome, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Cliente.Nome, "", new { @class = "text-danger" })
</div>
</div>
</div>
Observe que essas duas views que são complemento de suas view Principal tem um fator interessante que eu coloque o seu tipo no @model
a sua ViewModel ExampleViewModel
, porque?
Para que o binding
(as informações passadas nos campos seja carregados em sua classe de maneira simples e transparente) funcione corretamente, ou seja, para que ao mandar as informações para Create
(do verb POST
) ele carregue a classe corretamente. Olha a nomenclatura de um item:
@Html.EditorFor(model => model.Cliente.Id, new { htmlAttributes = new { @class = "form-control" } })
Ele foi montado em cima de sua agregação demonstrado ai em model.Cliente.Id
, para que ele dê o binding
corretamente das informações.
View Principal: (Create.cshtml)
@model WebApplication1.Models.ExampleViewModel
@{ Layout = null; }
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>Create</title>
</head>
<body>
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryval")
@using (Html.BeginForm())
{
@Html.AntiForgeryToken()
@Html.Partial("_Cliente", Model)
<hr />
@Html.Partial("_Produto", Model)
<div class="form-horizontal">
<h4>ExampleViewModel</h4>
<hr />
@Html.ValidationSummary(true, "", new { @class = "text-danger" })
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
}
</body>
</html>
Html gerada
<form action="/Examples/Create" method="post"><input name="__RequestVerificationToken" type="hidden" value="Mr207UcvrXamhyWWVqGbKBVZ8wY9ccJoBqcGVCjwg3G_tjHWIymMjfzE5o1XkXaJ8Q0WsL5XWMhq3biQfh7rKmuerIMuMPCgPFEOzA7baNc1" /><div class="form-horizontal">
<h4>Cliente</h4>
<hr />
<div class="form-group">
<label class="control-label col-md-2" for="Cliente_Id">Id</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Id must be a number." data-val-required="O campo Id é obrigatório." id="Cliente_Id" name="Cliente.Id" type="number" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Cliente.Id" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Cliente_Nome">Nome</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Cliente_Nome" name="Cliente.Nome" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Cliente.Nome" data-valmsg-replace="true"></span>
</div>
</div>
</div> <hr />
<div class="form-horizontal">
<h4>Produto</h4>
<hr />
<div class="form-group">
<label class="control-label col-md-2" for="Produto_Id">Id</label>
<div class="col-md-10">
<input class="form-control text-box single-line" data-val="true" data-val-number="The field Id must be a number." data-val-required="O campo Id é obrigatório." id="Produto_Id" name="Produto.Id" type="number" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Produto.Id" data-valmsg-replace="true"></span>
</div>
</div>
<div class="form-group">
<label class="control-label col-md-2" for="Produto_Descricao">Descricao</label>
<div class="col-md-10">
<input class="form-control text-box single-line" id="Produto_Descricao" name="Produto.Descricao" type="text" value="" />
<span class="field-validation-valid text-danger" data-valmsg-for="Produto.Descricao" data-valmsg-replace="true"></span>
</div>
</div>
</div> <div class="form-horizontal">
<h4>ExampleViewModel</h4>
<hr />
<div class="form-group">
<div class="col-md-offset-2 col-md-10">
<input type="submit" value="Create" class="btn btn-default" />
</div>
</div>
</div>
</form>
Nessa geração é fácil ver porque as agregações da classe ExampleViewModel
são carregadas, os campos por exemplo nome do cliente em sua tag input
do tipo text
tem o nome Cliente.Nome
. Cliente é a classe
e o Nome sua propriedade, é assim que o MVC consegue definir as informações e carregar nas classes correspondente.
Se você montar diferente não vai funcionar !!!
ViewModel
somente quando o seuModel
não atende a todas as necessidades.ViewModel
é a melhor opção.