Create JavaScript mask using jQuery

Question

Create JavaScript mask using jQuery

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

I have a client registration page in my MVC project requesting default data like name, cpf, dt nasc ... I need to create masks of these fields.

After searching I came to the DigitalBush plugin. So I liked it and I want to adhere to it. How should I do it?

I've 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>

javascript jquery css asp.net-mvc

asked by anonymous 05.05.2017 / 02:25

2 answers

1

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

For the case of @Html.DisplayFor() , you can use 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 for @Html.TextBoxFor() and @Html.EditorFor() , The ideal is to use NuGet to install jQuery .MaskedInput and check your BundleConfig.cs to make sure there is a reference to jQuery.MaskedInput there.

The other thing is to put scripts block from 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 with the class:

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

05.05.2017 / 05:20

Error saving list of related objects Vectors in Python

score 3 · Accepted Answer

You need to set your masks and then apply to whoever you care about. We assume:

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

From the presumed assumption 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, the user will be able to enter only values, up to 9 for each digit and exactly in this format - dot and hyphen. Other formatting you will be searching according to your need. Even if you need the same mask in 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 loading / downloading scripts. But, you can put in the tags of your page too, or within the section of the scripts.