Utilizando o JQuery.UI e o JQuery.Inputmask no MVC 5

https://social.msdn.microsoft.com/Forums/en-US/10cca9f5-5758-4abd-a91a-16405c5370b2/mscara-em-campos-textbox-no-mvc-4?forum=mvcpt

http://www.codeproject.com/Tips/642477/Input-Masking-in-MVC-using-Data-Annotation

1. Abra o Visual Studio 2013. No menu superior clique em “File” -> “New” -> “Project”. Selecione “Visual C”# -> “ASP.Net Web Application”. Em “Name” escreva “ProjetoIESB” e clique em OK. Na próxima janela, em “Select template”, selecione “MVC” e marque a opção “Add unit tests”. Clique em OK.

2. Instalar o JQuery.UI utilizando o “Package Manager Console”

PM> Install-Package jquery.ui.combined

3. Instalar os scripts  de internacionalização do JQuery utilizando o “Package Manager Console”

PM> Install-Package jQuery.UI.i18n

4. Instalar o script  jquery.inputmask utilizando o “Package Manager Console”

PM> install-package jquery.inputmask

5. Clique com o botão direito na pasta “Scripts” -> “Add” -> “Javascript File”. Em “item name” digite “Site”.

6. Adicione ao final do arquivo App_Start/BundleConfig.cs

bundles.Add(new ScriptBundle("~/bundles/site").Include(

"~/Scripts/Site.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(

"~/Scripts/jquery-ui-{version}.js",

"~/Scripts/jquery.inputmask/jquery.inputmask.js",

"~/Scripts/jquery-ui-i18n.js"));

bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(

"~/Content/themes/base/all.css"));

7. Altere no início do arquivo Views/Shared/_Layout.cshtml

@Styles.Render("~/Content/css")

@Styles.Render("~/Content/themes/base/css")

@Scripts.Render("~/bundles/modernizr")

8. Altere no fim do arquivo Views/Shared/_Layout.cshtml

@Scripts.Render("~/bundles/jquery")

@Scripts.Render("~/bundles/bootstrap")

@Scripts.Render("~/bundles/jqueryui")

@Scripts.Render("~/bundles/site")

@RenderSection("scripts", required: false)

9. Para testar, insira no final do arquivo Views/Home/Index.cshtml

<p>Telefone: <input type="text" id="telefone" /></p>

<p>Data: <input type="text" id="calendario" /></p>

@section Scripts {

<script>

$(document).ready(function () {

$("#telefone").inputmask("mask", { "mask": "(99)99999-9999" });

var lang = window.navigator.userLanguage || window.navigator.language;

lang = lang.substring(0, 2);

$("#calendario").datepicker();

$.datepicker.setDefaults($.datepicker.regional[lang]);

});

</script>

}

10. Outra Forma de utilizar estes componentes é:

<div class="form-group">

@Html.LabelFor(model => model.DataCriacao, new { @class = "control-label col-md-2" })

<div class="col-md-10">

@Html.TextBoxFor(model => model.DataCriacao, new { @class = "date-picker" })

@Html.ValidationMessageFor(model => model.DataCriacao)

</div>

</div>