Gerando views para ASP NET MVC

Essa semana nos deparamos com um pequeno problema no desenvolvimento de um projeto ASP NET MVC, estavamos tendo muito trabalho e com consequência perdendo tempo para criar as views (Create, Details, Edit, etc…) já que tinhamos que reescrever o HTML gerado para o padrão do projeto. Foi aí que surgiu a idéia de customizar o gerador de HTML do ASP NET MVC para gerar as telas no nosso padrão, dessa forma agilizando o desenvolvimento.

Fazendo uma rápida pesquisa no google não consegui encontrar muita coisa, também postei uma thread no fórum MSDN mas também não tive nenhuma resposta (até a data de hoje), mandei um email para o Vinicius Quaiato e ele me informou que o VS usava uma ferramenta de templates chamado T4, aí as coisas começaram a evoluir.

O que é T4?

Text Template Transformation Toolkit é um framework para gerar qualquer tipo de templates por exemplo C#, HTML, XML. Os arquivos de origem T4 são usualmente representada pela extensão do arquivo “.tt”.

O T4 é usado dentro do Visual Studio para gerar as views e controllers do ASP NET MVC e também no ADO.NET Entity Framework para a geração das entidades.

Esses templates do T4 ficam no diretório:

[DIR_VS]\Common7\IDE\ItemTemplates\CSharp\Web\MVC 2\CodeTemplates onde a pasta AddView possui os templates para gerar as views e a pasta AddController possui o template para gerar os controllers

Vamos criar um pequeno exemplo de como alterar os templates do T4.

1) Primeiro vamos criar um novo projeto ASP NET MVC 2

2) Copie a pasta CodeTemplates citado acima para a raiz do nosso projeto

3) Vamos incluir a pasta CodeTemplates na nossa Solution

4) Ao incluir a pasta na Solution uma mensagem será exibida, clique em cancelar

5) Agora para cada arquivo “.tt” clique em propriedades e na opção Custom Tool delete o que tiver escrito (TextTemplatingFileGenerator)

6) Faça uma cópia do arquivo Create.tt e altere seu nome para CreateCustom.tt

7) Editar o arquivo CreateCustom.tt

  • Em vez de gerar as tags “div” vamos gerar a tag “p”
  • Adicionar uma classe css no botão
  • Adicionar uma classe css no fieldset
  • Alterar o texto do ActionLink para Voltar

8) Adicione um novo controller com o nome PessoaController e marque a opção para criar os métodos

9) Adicione um novo model com o nome PessoaModel

[sourcecode language=”csharp”]
namespace TesteTemplatesT4.Models
{
public class PessoaModel
{
public int Id { get; set; }
public string Nome { get; set; }
public DateTime DataNascimento { get; set; }
public string Endereco { get; set; }
}
}
[/sourcecode]

10) No action Create selecione a opção Add View

  • Selecione a opção Create a strongly-typed view
  • Em View data class selecione nosso model PessoaModel
  • Em View Content selecione CreateCustom que é a nossa view customizada

11) Veja a diferença ente o gerador padrão e o gerador que customizamos

Padrão Create MVC

Padrão Create Custom

Agora estamos ganhando um bom tempo no desenvolvimento das Views.

Qualquer dúvida, opinião, reclamação mande seu comentário!

Um Abraço!

Essa semana nos deparamos com um pequeno problema no desenvolvimento de um projeto ASP NET MVC, estavamos tendo muito trabalho e com consequencia perdendo tempo
para criar as views (Create, Details, Edit, etc…) já que tinhamos que reescrever o HTML gerado para o padrão do projeto. Foi aí que surgiu a idéia de
customizar o gerador de HTML do ASP NET MVC para gerar as telas no nosso padrão, dessa forma agilizando o desenvolvimento.Fazendo uma rápida pesquisa no google não consegui encontrar muita coisa, também postei uma thread no fórum MSDN mas também não tive nenhuma resposta
(até a data de hoje), mandei um email para o Vinicius Quaiato e ele me informou que o VS usava uma ferramenta de templates chamado T4,
aí as coisas começaram a evoluir.O que é T4?
Text Template Transformation Toolkit é um framework para gerar qualquer tipo de templates por exemplo C#, HTML, XML. Os arquivos de origem T4 são
usualmente representada pela extensão do arquivo “.tt”.
O T4 é usado dentro do Visual Studio para gerar as views e controllers do ASP NET MVC e também no ADO.NET Entity Framework para a geração das entidades.

Esses templates do T4 ficam no diretório:
C:\Program Files (x86)\Microsoft Visual Studio 10.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC 2\CodeTemplates onde a pasta AddView possui os templates
para gerar as views e a pasta AddController possui o template para gerar os controllers

Vamos criar um pequeno exemplo de como alterar os templates do T4.

1) Primeiro vamos criar um novo projeto ASP NET MVC 2

2) Copie a pasta CodeTemplates para a raiz do nosso projeto

3) Vamos incluir a pasta CodeTemplates na nossa Solution

4) Ao incluir a pasta na Solution uma mensagem será exibida, clique em cancelar

5) Agora para cada arquivo “.tt” clique em propriedades e na opção Custom Tool delete o que tiver escrito (TextTemplatingFileGenerator)

6) Faça uma cópia do arquivo Create.tt e altere seu nome para CreateCustom.tt

7) Editar o arquivo CreateCustom.tt
Em vez de gerar as tags “div” vamos gerar a tag “p”
Adicionar uma classe css no botão
Adicionar uma classe css no fieldset
Alterar o texto do ActionLink para Voltar

8) Adicione um novo controller com o nome PessoaController

9) Adicione um novo model com o nome PessoaModel

10) No action Create selecione a opção Add View
Selecione a opção Create a strongly-typed view
Em View data class selecione nosso model PessoaModel
Em View Content selecione CreateCustom que é a nossa view customizada

11) Veja a diferença ente o gerador padrão e o gerador que customizamos

A cada dia que uso o ASP NET MVC cada vez mais percebo que a Microsoft acertou!

Sobre Leandro Prado

Leandro Silveira Prado é Premier Field Engineer na Microsoft especializado em Application Lifecycle Management.