1

Como utilizar JQuery Mask no ASP.NET

#jQuery
Karolina Bento
Karolina Bento

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

Não foi fornecido texto alternativo para esta imagem


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


Adicionar texto alternativo

Não foi fornecido texto alternativo para esta imagem


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


Adicionar texto alternativo

Não foi fornecido texto alternativo para esta imagem


  • 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

Não foi fornecido texto alternativo para esta imagem


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

Não foi fornecido texto alternativo para esta imagem


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

Não foi fornecido texto alternativo para esta imagem


Adicionar texto alternativo

Não foi fornecido texto alternativo para esta imagem


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

Não foi fornecido texto alternativo para esta imagem


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

Não foi fornecido texto alternativo para esta imagem


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

Não foi fornecido texto alternativo para esta imagem


Adicionar texto alternativo

Não foi fornecido texto alternativo para esta imagem


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
1
17

Comentários (1)

0
Thiago Guedes

Thiago Guedes

08/03/2021 14:27

Tutorial com foto e em tópico pra mim quem faz é anjo! haha


Ficou muuuuuito bom! Até tô seguindo pra ver mais conteúdo!


Parabéns pela contribuição e pelo seu dia, Karolina!

Somou muuuito!

None

Brasil