ASP.NET MVC: como utilizar os templates editor e display

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (2)  (0)

Aprenda neste artigo a utilizar editor e display templates, recursos do ASP.NET MVC que simplificam e agilizam a construção e manutenção das views.

Motivação

O ASP.NET MVC tem sido utilizado pelos desenvolvedores web por diversos motivos. Um deles está relacionado à forma como o framework organiza os artefatos do projeto, facilitando o reuso de código. Nesse cenário, no que diz respeito às views (o “V” da sigla MVC), duas das principais ferramentas são os templates editor e display. Esses elementos são associados a um tipo (uma classe ou mesmo um tipo primitivo, como int e double) e servem para centralizar a forma como o Razor e o ASP.NET MVC renderizam os valores desse tipo para gerar campos de amostragem (display templates) e campos de entrada de dados (editor templates).

Qual a vantagem dos templateseditor e display?

Vamos imaginar a seguinte situação: você tem uma entidade (Produto, por exemplo) que é mostrada em diversas views:

  • View 1: página de detalhes do produto;
  • View 2: página de remoção do produto;
  • View 3: página de categorias contendo os produtos relacionados a ela;
  • View 4: página de detalhes da compra.

Caso consideremos que essas quatro views mostram os produtos, individualmente, da mesma forma, podemos centralizar tudo isso em um display template. Assim, se quisermos alterar a forma como eles são vistos, basta fazermos isso uma vez, no display template, e isso será replicado para todas views. Essa decisão possibilita um ganho de tempo em desenvolvimento muito grande, pois ao invés de repetir quatro vezes o processo, podemos realizá-lo apenas uma vez.

Display templates no ASP.NET MVC

Os display templates obedecem a uma estrutura rígida para que possam ser utilizados. Assim, há um diretório específico para que eles sejam guardados na solução, de forma que o MVC consiga encontrá-los quando necessário. Esse diretório está sempre em Views/Shared/DisplayTemplates, como podemos observar na Figura 1.

Diretório de display templates
Figura 1. Diretório de display templates

Algo muito importante a se ressaltar nessa imagem é o nome do template que acabamos de criar: Produto. Repare que é o mesmo nome da classe/entidade que temos na nossa aplicação.Isso é uma regra, uma convenção: para que o ASP.NET MVC entenda que o template deve ser utilizado para o tipo Produto, esse template precisa ter o mesmo nome do tipo. Dessa forma, para o tipo “string”, por exemplo, teríamos um arquivo nomeado como string.cshtml.

Na Listagem 1 é apresentado o código do template de Produto, Produto.cshtml. Como podemos observar, seu conteúdo é bastante simples: temos a amostragem das propriedades do Produto definidas de forma visualmente interessante, com algumas classes do Bootstrap.

saiba mais Saiba mais sobre Bootstrap

  01 @model ExemploDisplayEditor.Models.Produto
  02
  03 <h4>Produto</h4>
  04 <hr/>
  05 <dlclass="dl-horizontal">
  06    <dt>
  07        @Html.DisplayNameFor(model =>model.Descricao)
  08    </dt>
  09
  10    <dd>
  11        @Html.DisplayFor(model =>model.Descricao)
  12    </dd>
  13
  14    <dt>
  15        @Html.DisplayNameFor(model =>model.Nome)
  16    </dt>
  17
  18    <dd>
  19        @Html.DisplayFor(model =>model.Nome)
  20    </dd>
  21
  22    <dt>
  23        @Html.DisplayNameFor(model =>model.Preco)
  24    </dt>
  25
  26    <dd>
  27        @Html.DisplayFor(model =>model.Preco)
  28    </dd>
  29
  30 </dl>
Listagem 1. Display template para Produto

Linha 01: Definição do tipo para o template (Produto, neste caso);

Linhas 03 e 04: Cabeçalho do template, com uma indicação de que se trata de um Produto;

Linhas 06 a 08 e 10 a 12: Amostragem dos dados da propriedade Descricao. O método DisplayNameFor() mostrará o nome da propriedade (Descricao) e o método DisplayFor() mostrará o seu conteúdo;

Linhas 14 a 16, 18 a 20, 22 a 24 e 26 a 28: Mesma amostragem das linhas 06 a 08 e 10 a 12, mas agora para as propriedades Nome e Preco.

Para utilizar um template, existem alguns métodos disponíveis, como: Html.DisplayFor(), para uma propriedade específica; e Html.DisplayForModel(), para o model completo da view. São esses métodos que realizarão, primeiramente, a busca por um display template para o tipo de dado no diretório e, se não encontrarem, simplesmente optarão pelo padrão.Um exemplo de uso fica muito claro na Figura 2, que traz, lado a lado, as views Details e Delete, que adotam esse template de amostragem.

Note que tudo que há de comum entre essas views está estabelecido do display template, e esse é o grande ganho que ele traz para nós durante o desenvolvimento e manutenção de uma aplicação.

Details.cshtml e Delete.cshtml com o display template
Figura 2. Details.cshtml e Delete.cshtml com o display template

Editor templates no ASP.NET MVC

Os editor templates obedecem a uma lógica muito parecida. O diretório deles, entretanto, é outro: Views/Shared/EditorTemplates (vide Figura 3). É nesse local que o MVC irá procurar por esses templates no momento de renderizar uma view.

Diretório de editor templates
Figura 3. Diretório de editor templates

Aqui, devemos notar que o nome do arquivo para o editor template é o mesmo:Produto.cshtml. Isso ocorre porque as regras para os templates de edição são exatamente as mesmas, e devemos obedecê-las. O conteúdo, entretanto, é diferente, como apresenta a Listagem 2. Por se tratar de um template de edição, temos algumas diferenças, como a declaração de ValidationSummary, que serve para a validação dos valores inseridos nas propriedades.

  01 @model ExemploDisplayEditor.Models.Produto
  02
  03 <h4>Produto</h4>
  04 <hr/>
  05 @Html.ValidationSummary(true, "", new{ @class = "text-danger" })
  06 <divclass="form-group">
  07    @Html.LabelFor(model =>model.Descricao, htmlAttributes: new{ @class = "control-label col-md-2" })
  08    <divclass="col-md-10">
  09        @Html.EditorFor(model =>model.Descricao, new{ htmlAttributes = new { @class = "form-control" } })
  10        @Html.ValidationMessageFor(model =>model.Descricao, "", new{ @class = "text-danger" })
  11    </div>
  12 </div>
  13
  14 <divclass="form-group">
  15    @Html.LabelFor(model =>model.Nome, htmlAttributes: new{ @class = "control-label col-md-2" })
  16    <divclass="col-md-10">
  17        @Html.EditorFor(model =>model.Nome, new{ htmlAttributes = new { @class = "form-control" } })
  18        @Html.ValidationMessageFor(model =>model.Nome, "", new{ @class = "text-danger" })
  19    </div>
  20 </div>
  21
  22 <divclass="form-group">
  23    @Html.LabelFor(model =>model.Preco, htmlAttributes: new{ @class = "control-label col-md-2" })
  24    <divclass="col-md-10">
  25       @Html.EditorFor(model =>model.Preco, new{ htmlAttributes = new { @class = "form-control" } })
  26        @Html.ValidationMessageFor(model =>model.Preco, "", new{ @class = "text-danger" })
  27    </div>
  28 </div>
Listagem 2. Editor template para Produto

Linha 01: Definição do tipo para o template: Produto;

Linhas 03 e 04: Cabeçalho do template, com uma indicação de que se trata de um Produto;

Linha 05: Criação do “sumário de validação”, ou ValidationSummary(). Esse elemento é necessário para que possamos ver as mensagens de validação para cada propriedade, quando houver algum erro nesses valores;

Linhas 06 a 12: Elementos de edição e visualização para a propriedade Descricao. Na linha 07, temos o LabelFor(), que simplesmente mostra o nome da propriedade acima do campo. Já na linha 09, temos o editor propriamente dito. Esse helper irá renderizar um elemento do tipo <input> para o campo;

Linhas 14 a 20 e 22 a 28: Mesmos editores das linhas 06 a 12, mas agora para as propriedades Nome e Preco.

O uso dos templates de edição também é muito similar ao que vimos para os display templates. Nesse caso, entretanto, temos dois outros métodos: EditorFor() e EditorForModel(). Eles farão a busca, agora no diretório EditorTemplates, pelo nome do tipo da propriedade; Produto, nesse caso. Caso não seja encontrado, voltarão com os valores padrão.

A Figura 4 mostra como podemos declarar nosso editor template em duas views: Create e Edit.

Create.cshtml e Edit.cshtml com o editor template
Figura 4. Create.cshtml e Edit.cshtml com o editor template

NOTA: É possível declarar outros nomes para os templates, como “ProdutoDisplay” ou “ProdutoEditor”, mas precisaríamos especificar esse nome no momento de sua utilização. Tanto os métodos DisplayFor() e DisplayForModel(), quanto os métodos EditorFor() e EditorForModel() possuem sobrecargas que recebem o nome do template; para esses casos, algo como DisplayForModel(“ProdutoDisplay”).

Com isso, podemos constatar que o uso dos templates editor e display possibilitam uma redução de trabalho ao desenvolver e/ou manter uma aplicação. Se tivéssemos que adicionar uma nova propriedade a Produto, por exemplo, bastaria uma alteração nos templates para que as views refletissem as mudanças,e isso é uma grande vantagem, especialmente em aplicações com diversas entidades e views.

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Ficou com alguma dúvida?