Как добавить маску в Html.TextBox в Aspnet Core - PullRequest
Новая
       7

Как добавить маску в Html.TextBox в Aspnet Core

0 голосов
/ 23 октября 2019

Я пытаюсь добавить маску на мой взгляд в ядре asp net в html.textbox, но у меня возникли проблемы. Я скачал пакет, разработанный специально для добавления маски: https://github.com/igorescobar/jQuery-Mask-Plugin

Итак, попробуйте вызвать скрипт js из пакета в моем приложении _Layout, используя: 

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

, поэтому _Layout имеет вид: 

<!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>

и затем я пытаюсь использовать скрипт маски на мой взгляд: 

@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"/>
    }

, но он не работает, кажется, что он даже не вызывает js из пакета в _Layout, и этопочему я не могу использовать маску на мой взгляд, кто-нибудь может мне помочь? если кто-то знает другое решение для добавления маски в этот код, я действительно буду признателен за это!

1 Ответ

0 голосов
/ 23 октября 2019

$("txtCPF") должен быть $("#txtCPF") в качестве селектора идентификатора. txtCPF - кнопка, поэтому я предполагаю, что вы хотите применить маску для ввода document. Вы можете использовать @section Scripts, чтобы задействовать функции 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>

}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...