Estoy tratando de agregar una máscara en mi vista en asp net core en html.textbox pero tengo problemas. Descargué un paquete desarrollado específicamente para agregar máscara: https://github.com/igorescobar/jQuery- Complemento de máscara

Entonces intento llamar al script js desde el paquete en mi aplicación _Layout usando:

<script type="text/javascript" src="~/lib/jQuery-Mask-Plugin-master/src/jquery.mask.js"></script>

Entonces _Layout es como:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>@ViewData["Title"] - OrderStatus</title>

    <environment include="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
    </environment>
    <environment exclude="Development">
        <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
    </environment>
</head>
<body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <a href="@Url.Action("Index", "Home")" class="navbar-brand">
            <img src="/images/zc-new-header-logo.jpeg" title="ZC" alt="" style="
                    margin-right: 7px;
                    margin-top: -9px;
                    height: 200%;
                    margin-left: 100px;
                ">
        </a>
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a asp-area="" asp-controller="Home" asp-action="Index" class="navbar-brand">ZonaCriativa</a>
            </div>
            <div class="navbar-collapse collapse">
                <ul class="nav navbar-nav">
                    <li><a asp-area="" asp-controller="Pessoafisica" asp-action="Index">Pessoa Física</a></li>
                    <li><a asp-area="" asp-controller="Pessoajuridica" asp-action="Index">Pessoa Jurídica</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="About">Sobre</a></li>
                    <li><a asp-area="" asp-controller="Home" asp-action="Contact">Contato</a></li>
                </ul>
            </div>
        </div>
    </nav>

    @*<partial name="_CookieConsentPartial" />*@

    <div class="container body-content">
        @RenderBody()
        <hr />
        <footer>
            <p>&copy; zonacriativa - Consultar Pedido de Venda</p>
        </footer>
    </div>

    <environment include="Development">
        <script src="~/lib/jquery/dist/jquery.js"></script>
        <script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
        <script type="text/javascript" src="~/lib/jQuery-Mask-Plugin-master/src/jquery.mask.js"></script>
        <script src="~/js/site.js" asp-append-version="true"></script>
    </environment>
    <environment exclude="Development">
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.3.1.min.js"
                asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                asp-fallback-test="window.jQuery"
                crossorigin="anonymous"
                integrity="sha384-tsQFqpEReu7ZLhBV2VZlAu7zcOV+rXbYlF2cqB8txI/8aZajjp4Bqd+V6D5IgvKT">
        </script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
                asp-fallback-src="~/lib/bootstrap/dist/js/bootstrap.min.js"
                asp-fallback-test="window.jQuery && window.jQuery.fn && window.jQuery.fn.modal"
                crossorigin="anonymous"
                integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd">
        </script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
    </environment>

    @RenderSection("Scripts", required: false)

</body>
</html>

Y luego trato de usar el script de máscara en mi vista:

@model List<OrderStatus.Models.ZonaCriativa.Value>
@{
    ViewData["Title"] = "Pessoa Física";
}

<script>
    $(document).ready(function)(){
        $("txtCPF").mask("000.000.000.-00")
    })
</script>

<div>
    @using (Html.BeginForm("Search", "Pessoafisica", FormMethod.Get))
    {
        <span>Procure pelo CPF:</span>
        <br />
        <br />
        @Html.TextBox("document")
        <input id="txtCPF" type="submit" value="Procurar" class="btn btn-primary"/>
    }

Pero no funciona, parece que ni siquiera llama a los js del paquete en _Layout y es por eso que no puedo usar la máscara en mi opinión, ¿alguien puede echarme una mano? Si alguien conoce una solución mejor diferente para agregar una máscara en este código, ¡realmente lo agradeceré!

0
Lucas Lucena 23 oct. 2019 a las 05:53

1 respuesta

La mejor respuesta

$("txtCPF") debería ser $("#txtCPF") como selector de id. txtCPF es un botón, así que supongo que desea aplicar una máscara a la entrada document. Puede usar @section Scripts para involucrar las funciones js:

@Html.TextBox("document")
<input id="txtCPF" type="submit" value="Procurar" class="btn btn-primary" />


@section Scripts{
    <script>
        $(function () {
            $("#document").mask("000.000.000.-00")
        })
    </script>

}
0
Nan Yu 23 oct. 2019 a las 05:36