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
Thiago Guedes
08/03/2021 14:27