Como utilizar JQuery Mask no ASP.NET

INSTALAÇÃO:

• Acesse o link do plug-in (http://igorescobar.github.io/jQuery-Mask-Plugin/) e faça download do arquivo zip.

Adicionar texto alternativo

• Descompacte o arquivo com 7ZIP, Winrar ou outro programa de sua preferência:

Adicionar texto alternativo

• Abra a pasta descompactada. Vá na pasta dist e copie o arquivo de nome jquery.mask.min.js

Adicionar texto alternativo

• Agora abra a pasta do seu projeto ASP.NET e siga esse caminho: wwwroot -> js. Cole o arquivo copiado na pasta js:

Adicionar texto alternativo

UTILIZAÇÃO:

• No seu arquivo _Layout.cshtml adicione a tag com o caminho do arquivo (LEMBRE-SE: É NECESSÁRIO TER O JQUERY INSTALADO! QUANDO CRIEI O PROJETO ELE JÁ VENHO INSTALADO ENTÃO NÃO TIVE PREOCUPAÇÕES QUANTO A ISSO):

Adicionar texto alternativo

OBS: Daqui em diante eu crio as máscaras em uma arquivo JavaScript separado e o referencio no layout. Fiz isso por questão de organização, porém você pode optar por colocar o código diretamente na View.

• Na pasta JS do projeto criei outra pasta chamada "Views" e dentro desta criei um arquivo JavaScript chamado "masks". Dentro desse arquivo coloquei as máscaras que utilizei ou vou utilizar para o meu projeto em específico:

Adicionar texto alternativo

Adicionar texto alternativo

Lembrando que essas máscaras você encontra no mesmo link onde baixamos o plug-in, na parte de docs (http://igorescobar.github.io/jQuery-Mask-Plugin/docs.html).

• Para que essas máscaras fossem utilizadas em qualquer parte do projeto, eu optei por referenciar esse arquivo JS no Layout:

Adicionar texto alternativo

Observe na imagem acima que estou referenciando exatamente a pasta onde criei o arquivo JS que contém as máscaras de formatação.

Agora podemos utilizar a formatação nos campos input das Views.

OBS: Você utiliza esse seletores do JQuery na View através das propriedades id="" ou através da class="". Se você utilizar # no seletor, então terá que usar id na View. Se usar . terá que usar class. Exemplo:

Adicionar texto alternativo

Para money eu teria que usar id e para time usaria class. Vamos entender melhor isso na View.

• Na view em todos os campos eu coloquei o type="text" porque o asp-for do .net acaba formatando o campo de acordo com o modelo e dessa forma não funciona a formatação usando JQuery Mask.
• Segue como ficou a View. Repare que no campo Date e Schedule eu preferi utilizar a formatação do modelo mesmo ao invés das máscaras:

Adicionar texto alternativo

Adicionar texto alternativo

Segue link do vídeo abaixo onde é possível ver a formatação dos campos preço e quantidade de poltronas funcionando. Também mostrei que mantive a formatação do modelo para data e horário pois no data, por exemplo, ele mostra um calendário bem legal.

https://drive.google.com/file/d/1Mw42L3pEBWOT0qQxTNYvPsTgLFiZUqBr/view

Caso você tenha alguma dúvida pode me chamar por aqui ou no meu Linkedin (https://www.linkedin.com/in/karolinabento/).

Eu sou Jr em desenvolvimento Web e faço alguns projetos para estudos. Meu GitHub está repleto de repositórios voltados para iniciantes como eu com commits bem explicativos. Se quiser saber mais segue os links:

Projeto de Venda de Ingressos de Teatro mostrado no vídeo: https://github.com/karolinagb/SaleTheaterTickets

Link Meu GitHub: https://github.com/karolinagb

Fontes:

• https://www.youtube.com/watch?v=KNYQzoMLJ5M
• http://igorescobar.github.io/jQuery-Mask-Plugin/docs.html