segunda-feira, 21 de janeiro de 2013

Usando EditorTemplates e DisplayTemplates - parte I

Uma das coisas mais repetidas hoje em dia no mundo da programação, desculpem a redundância, é o conceito de não repita seu código. Em inglês DRY (don't repeat yourself).

O ASP.NET MVC leva esse conceito muito a sério e tem no seu núcleo as ferramentas necessárias para você reutilizar código de forma eficiente e simples.

Nesta série vamos aprender a utilizar os DisplayTemplates e EditorTemplates para reutilizar código nas nossas views e também uniformizar elementos HTML.

Outra vantagem desta técnica é usar o código HTML gerado pelos templates para aplicar widgets em javascript e melhorar sensivelmente a usabilidade das nossas aplicações web.

Estando claro o objetivo do post vamos por a mão na massa

Vou deixar de lado a parte de criar o projeto MVC, Visual Studio, etc. Se você está aqui é porque já sabe fazer isso, se não sabe consulte o post de boas vindas. Lembrando que a versão do MVC utilizada nesta série é a versão 3 com a viewengine razor.

Primeiro vamos criar um modelo para usarmos como teste, crie um arquivo com o nome "SampleModel.cs" dentro da pasta Models:

Crie dentro da pasta \Views\Shared do seu projeto as seguintes pastas: DisplayTemplates e EditorTemplates.


Dentro da pasta EditorTemplates crie dois arquivos DateTime.cshtml e Decimal.cshtml. Um deles será o template para as datas e outro para os tipos com casas decimais.



Fig. 1: estrutura do projeto após a criação dos arquivos






Agora vamos ao código dos arquivos criados:


Beleza, a estrutra básica está pronta, agora podemos usar os templates nas views. Para isto basta usar o @Html.EditorFor:

O HTML gerado:


No próximo post desta série vamos adicionar javascript para criar um calendário para o usuário escolher a data e aplicar uma máscara no campo de preço.

Baixe o código fonte deste tutorial




2 comentários: