如何在Aspnet Core的Html.TextBox中添加蒙版

问题描述 投票:0回答:1

我试图在html.textbox的asp net core的视图中添加一个蒙版,但是我遇到了麻烦。我下载了专门开发的用于添加遮罩的软件包:https://github.com/igorescobar/jQuery-Mask-Plugin

可以尝试使用以下命令从_Layout应用程序上的包中调用js脚本:

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

但是它不起作用,似乎它甚至都没有从_Layout包中调用js,这就是为什么我不能在我的视图中使用mask,有人可以帮我的忙吗?如果有人知道在此代码中添加掩码的更好的其他解决方案,我将非常感激!

javascript c# jquery html asp.net-core
1个回答
© www.soinside.com 2019 - 2024. All rights reserved.