2

Tenho uma página de cadastro de cliente no meu projeto de MVC solicitando dados padrões como nome, cpf, dt nasc... Eu preciso criar máscaras desses campos.

Após pesquisas cheguei ao plugin oferecido pela DigitalBush. Então gostei e quero aderir à ela. Como devo fazer?

Já coloquei o "jquery.maskedinput.js" no diretório Scripts.

No meu Index.cshtml tenho isso:

@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>
2
  • No link que tu disponibilizou do plugin tem todos os exemplos ali na primeira página.
    – Aline
    Commented 5/05/2017 às 0:32
  • Sim mas não me diz onde devo colocar cada coisa. Por exemplo na primeira parte tem o script, aonde eu coloco? E depois diversas jQuery, onde eu coloco? Tudo no arquivo Index.cshtml? Commented 5/05/2017 às 0:40

2 Respostas 2

3

Você precisa definir suas máscaras e depois aplicar a quem interessa. Supomos:

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

Partindo do pré suposto que você já adicionou jquery e jquery.maskedinput, no load do documento tu pode atribuir a máscara:

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

Nesse caso quer dizer que o usuário vai poder inserir apenas valores, até 9 para cada algarismo e exatamente nessa formatação - ponto e hífen. Outras formatações você vai pesquisando de acordo com sua necessidade. Inclusive se precisar da mesma máscara em mais elementos, vai aplicar por classe e não por ID...

Sobre aonde colocar: Se voce ta trabalhando com ASP.NET MVC, é recomendado separar em um arquivo js e adicionar aos bundles. Isso otimiza o carregamento/download dos scripts. Mas, você pode colocar nas tags da sua página também, ou dentro da section dos scripts.

2
  • Entendi quanto a como gerenciar as mascaras e seus caracteres, obrigado! Mas ainda estou em dúvida de onde colocar o <input .. > e também as próprias máscaras. Eu já criei sim o jquery.maskedinput identico ao que está no site, dentro do diretório Scripts, agora eu preciso criar outro javascript nesse mesmo diretório contendo o <input...> e as mascaras? Commented 5/05/2017 às 1:03
  • Esse HTML que tu mostrou então, não é aonde você quer adicionar as máscaras, certo? Tu quer adicionar no Edit e no Create. Isso?
    – Aline
    Commented 5/05/2017 às 1:57
1

Há dois pontos aqui: @Html.DisplayFor() e @Html.TextBoxFor(), ou então @Html.EditorFor().

Para o caso do @Html.DisplayFor(), você pode usar algo assim:

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

Aí você cria um template Razor em Views\Shared\DisplayTemplates\Telefone.cshtml com o seguinte:

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

Estou supondo que seu telefone é long.

Já para @Html.TextBoxFor()e @Html.EditorFor(), O ideal é usar o NuGet para instalar o jQuery.MaskedInput e verificar seu BundleConfig.cs para se certificar de que há uma referência ao jQuery.MaskedInput lá.

A outra coisa é colocar o bloco de scripts da View em @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>
}

O telefone também precisa estar com a anotação da classe:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .