Create Javascript mask using jQuery

Question

I have a customer registration page in my MVC project requesting standard data such as name, Cpf, dt nasc... I need to create masks of these fields.

After researches I reached the plugin offered by Digitalbush. So I liked it and want to join it. How should I do?

I already put "jquery.maskedinput.js" in the Scripts directory.

In my Index.cshtml I have this:

@model IEnumerable<Estacionamento.Models.Estacionamento_Cliente>

@{
    ViewBag.Title = "Index";
}

<h2>Bem vindo</h2>

<p>
    @Html.ActionLink("Create New", "Create")
</p>
<table class="table">
    <tr>
        <th>
            @Html.DisplayNameFor(model => model.Cliente_Nome)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Cliente_CPF)          
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Cliente_RG)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Cliente_End)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Cliente_Numero_Endereco)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Cliente_DDD)
        </th>
        <th>
            @Html.DisplayNameFor(model => model.Cliente_Tel)
        </th>
        @*<th>
            @Html.DisplayNameFor(model => model.Dta_Cadastro)
        </th>*@
        <th>
            @Html.DisplayNameFor(model => model.Dta_Nascimento)
        </th>
        @*<th>
            @Html.DisplayNameFor(model => model.Flg_Situacao)
        </th>*@
        <th>
            @Html.DisplayNameFor(model => model.Cliente_Email)
        </th>
        <th></th>
    </tr>

@foreach (var item in Model) {

    string cpf = (item.Cliente_CPF).ToString();
    string rg = (item.Cliente_RG).ToString();
    string ddd = (item.Cliente_DDD).ToString();
    string telefone = (item.Cliente_Tel).ToString();
    string data = Convert.ToDateTime(item.Dta_Nascimento).ToShortDateString();
    <tr>
        <td>
            @Html.DisplayFor(modelItem => item.Cliente_Nome)
        </td>
        <td>
            @Html.DisplayFor(modelItem => cpf)
        </td>
        <td>
            @Html.DisplayFor(modelItem => rg)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Cliente_End)
        </td>
        <td>
            @Html.DisplayFor(modelItem => item.Cliente_Numero_Endereco)
        </td>
        <td>
            @Html.DisplayFor(modelItem => ddd)
        </td>
        <td>
            @Html.DisplayFor(modelItem => telefone)
        </td>
        @*<td>
            @Html.DisplayFor(modelItem => item.Dta_Cadastro)
        </td>*@
        <td>
            @Html.DisplayFor(modelItem => data)
        </td>
        @*<td>
            @Html.DisplayFor(modelItem => item.Flg_Situacao)
        </td>*@
        <td>
            @Html.DisplayFor(modelItem => item.Cliente_Email)
        </td>
        <td>
            @Html.ActionLink("Edit", "Edit", new { id=item.Id_Cliente }) |
            @Html.ActionLink("Details", "Details", new { id=item.Id_Cliente }) |
            @Html.ActionLink("Delete", "Delete", new { id=item.Id_Cliente })
        </td>
    </tr>
}

</table>

Answer 1

You need to define your masks and then apply them to those who matter. We assume:

<input type="text" id="cpf"/>

Starting from the pre-presumed that you have already added jquery and jquery.maskedinput, in the document load you can assign the mask:

$(document).ready(function(){
      $("#cpf").masked("999.999.999-99")
      //e todas as demais mascaras para seus devidos elementos
});

In this case it means that the user will be able to enter only values, up to 9 for each digit and exactly in this formatting - point and hyphen. Other formatting you will search according to your need. Even if you need the same mask on more elements, it will apply by class and not by ID...

Where to put it: If you are working with ASP.NET MVC, it is recommended to separate it into a js file and add it to the Bundles. This optimizes the loading/downloading of scripts. But, you can put in your page tags as well, or inside the scripts Section.

Answer 2

There are two points here: @Html.DisplayFor() and @Html.TextBoxFor(), or else @Html.EditorFor().

In the case of @Html.DisplayFor(), you can wear something like this:

@Html.DisplayFor(modelItem => telefone, "Telefone")

Then you create a template Razor in Views\Shared\DisplayTemplates\Telefone.cshtml with the following:

@model long
@string.Format("{0:(00) 00000-0000}", Model)

I’m guessing your phone is long.

Already to @Html.TextBoxFor()and @Html.EditorFor(), The ideal is to use Nuget to install jQuery.Maskedinput and check your BundleConfig.cs to make sure that there is a reference to jQuery.Maskedinput there.

The other thing is to put the block scripts of View in @section Scripts {}:

@section Scripts {
    <!-- não esqueça de criar o bundle -->
    @Scripts.Render("~/bundles/jquery/maskedinput")

    <script>
        $(document).ready(function()
        {
            $(".telefone").mask("(99) 9999?9-9999")
        });
    </script>
}

The phone also needs to be annotated in the class:

@Html.EditorFor(model => model.Telefone, new { htmlAttributes = new { @class = "telefone" } })