O mais legal dessa abordagem de sobreposição de templates ("override" em inglês) é que nos seus sistemas todos os tipos DateTime e Decimal terão seu HTML renderizado de acordo com os templates acima não importa em qual view ou de que objeto veio a propriedade. Basta usar @Html.EditorFor(m => m.TipoDateTime).
Você pode também fazer templates para tipos complexos mas isto vai ser assunto para um outro post desta série.
Ok, feita a introdução técnica voltemos ao assunto deste post, agora vamos aplicar alguma "perfumaria" no nosso formulário para fazê-lo mais agradável para o usuário.
Para isso vamos usar o jQuery e o jQuery UI. Essas bibliotecas javascript já são adicionadas em seu projeto por padrão no ASP.NET MVC e vou partir do pressuposto que você já sabe alguma coisa em jQuery, se não sabe recomendo enfaticamente que você aprenda a usá-lo. É um recurso imprescindível nas aplicações web modernas.
Adicione as referências para o css e o jquery/jquery-ui na view \Views\Shared\_Layout.cshtml.
Para aplicar o widget DatePicker do jQueryUI nos campos criados pelos templates basta fazer uma chamada no jquery:
Veja o resultado:
Ôpa, mas este blog é em português! Como faz pra traduzir os termos do calendário e formatar a data para o pt-BR?
Adicione o script de inicialização do datepicker abaixo (de preferência em algum local ou escopo onde possa ser visto por toda sua aplicação):
Simples e rápido hem? Agora toda propriedade que você usar do tipo DateTime nas views da sua aplicação já virão embutidas com um calendário bacana - usabilidade para as massas oh yeah!!!
Falta agora fazer a máscara para o tipo Decimal. Um brasileiro, o Fabio M. Costa criou um jQuery plugin excelente para criar máscaras para campos, inclusive os padrões da biblioteca são no formato pt-BR o que facilita bastante.
Para mais detalhes e download confira a página original do meioMask plugin.
Como o post está ficando grande vamos direto ao código para usar o plugin citado acima e aplicar a máscara na nossa propriedade do tipo Decimal:
Adicione a referência ao arquivo meioMask plugin na view:
Agora basta chamar a função setMask do plugin na inicialização do jQuery:
Não tem como mostrar estaticamente aqui o funcionamento da máscara, baixe o projeto desta série de posts e confira o resultado rodando a aplicação.
Clique aqui para fazer o download do projeto!
No próximo e último post desta série vamos criar um template para um tipo complexo e explicar o funcionamento dos DisplayTemplates.
- Parte I
- Parte II
Nenhum comentário:
Postar um comentário