Question

我在所有屏幕上都遇到输入掩码（bootstrap）问题。我发现以下有趣：我的所有视图都以“PartialView”的形式返回，输入掩码不起作用。对于测试，当我创建一个视图和一个返回视图的控制器时，一切正常。这清楚地表明问题是由我的控制器返回PartialView引起的。

我有几个从我的索引以模态形式打开的CRUD视图。它们仅在返回PartialView时才起作用。但是传入的吉祥物根本不起作用......有谁知道如何解决这个问题？

//My Controller
 [HttpGet]
        [Authorize(Policy = "CanWriteCepData")]
        [Route("cep-gerenciamento/editar-cep/{id}")]
        public IActionResult Edit(string id)
        {
            if (id == null)
            {
                return NotFound();
            }

            var cepViewModel = _cepAppService.GetByCepId(id);

            if (cepViewModel == null)
            {
                return NotFound();
            }

            return PartialView(cepViewModel);
        }

@using SistemaComercial.Domain.ValueObjects
@model SistemaComercial.Application.ViewModels.Cep.CepViewModel
@{
    ViewData["Title"] = "Editar CEP";
}

<div>
    <form asp-action="Edit">
        @Html.AntiForgeryToken()

        <div class="modal-shadow">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="false">×</span><span class="sr-only">Close</span></button>
                <h4 class="modal-title text-center"> @ViewData["Title"] </h4>
            </div>
            <div class="form-horizontal">
                <div id="validationSummary" class="text-center">
                    <vc:summary />
                </div>
                <div class="panel-body">
                    <div class="form-group">
                        <label asp-for="CepId" class="col-md-2 control-label"></label>
                        <div class="col-md-3">
                            <input id="txtCep" asp-for="CepId" class="form-control" data-plugin="formatter" data-pattern="[[99999]]-[[999]]" />
                            <span asp-validation-for="CepId" class="text-danger"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label asp-for="Endereco" class="col-md-2 control-label"></label>
                        <div class="col-md-10">
                            <input id="txtEndereco" asp-for="Endereco" class="form-control text-uppercase" />
                            <span asp-validation-for="Endereco" class="text-danger"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label asp-for="Complemento" class="col-md-2 control-label"></label>
                        <div class="col-md-5">
                            <input asp-for="Complemento" class="form-control text-uppercase" />
                            <span asp-validation-for="Complemento" class="text-danger"></span>
                        </div>
                        <label asp-for="Bairro" class="col-md-1 control-label"></label>
                        <div class="col-md-4">
                            <input asp-for="Bairro" class="form-control text-uppercase" />
                            <span asp-validation-for="Bairro" class="text-danger"></span>
                        </div>
                    </div>

                    <div class="form-group">
                        <label asp-for="Cidade" class="col-md-2 control-label"></label>
                        <div class="col-md-7">
                            <input id="txtDescricao" asp-for="Cidade" class="form-control text-uppercase" />
                            <span asp-validation-for="Cidade" class="text-danger"></span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label asp-for="UF" class="col-md-2 control-label"></label>
                        <div class="col-md-2">
                            <input asp-for="UF" class="form-control text-uppercase" maxlength="2" />
                            <span asp-validation-for="UF" class="text-danger"></span>
                        </div>
                        <div class="col-md-5">
                            <div class="checkbox-custom checkbox-default">
                                <input type="checkbox" asp-for="PadraoSistema" disabled />
                                <label asp-for="PadraoSistema"></label>
                            </div>
                            <span asp-validation-for="PadraoSistema" class="text-danger"></span>
                        </div>
                       
                    </div>
                    <div class="modal-footer">
                        <button id="btnSalvar" type="submit" class="btn btn-primary"><i class="icon wb-check"></i> Salvar </button>
                        <a class="btn btn-danger" data-dismiss="modal">
                            <span title="Fechar" class="icon wb-close"></span> Fechar
                        </a>
                    </div>
                </div>
            </div>
        </div>

    </form>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
   
}

//Field of View Edit containing the input Mask of Zip Code
 <div class="form-group">
                        <label asp-for="CepId" class="col-md-2 control-label"></label>
                        <div class="col-md-3">
                            <input id="txtCep" asp-for="CepId" class="form-control" data-plugin="formatter" data-pattern="[[99999]]-[[999]]" />
                            <span asp-validation-for="CepId" class="text-danger"></span>
                        </div>
                    </div>

//My Index with Generic Modal

@{
    ViewData["Title"] = "Gerenciar CEPS";
}

<div class="panel animsition">
    <div class="page-header">
        <h1 class="page-title">@ViewData["Title"]</h1>
        <ol class="breadcrumb">
            <li><a asp-action="Index" asp-controller="Home">Home</a></li>
            <li class="active">cep-gerenciamento/listar-todos</li>
        </ol>
        <div class="page-header-actions">
            <div class="btn-group btn-group-sm"
                 role="group">
                <a id="btnNovo" asp-action="Create" data-modal="" class="btn btn-outline btn-default new" data-toggle="tooltip"
                   data-original-title="Cadastrar Novo" data-container="body">
                    <span title="Cadastrar Novo" class="icon wb-plus"></span> Cadastrar Novo
                </a>
                <button type="button" class="btn btn-outline btn-default" data-toggle="tooltip"
                        data-original-title="Configurações" data-container="body">
                    <i class="icon wb-settings" aria-hidden="true"></i>
                </button>
                <button type="button" class="btn btn-outline btn-default" data-toggle="tooltip"
                        data-original-title="Exportar" data-container="body">
                    <i class="icon wb-upload" aria-hidden="true"></i>
                </button>
                <button type="button" class="btn btn-outline btn-default" data-toggle="tooltip"
                        data-original-title="Importar" data-container="body">
                    <i class="icon wb-download" aria-hidden="true"></i>
                </button>
                <button type="button" class="btn btn-outline btn-default" data-toggle="tooltip"
                        data-original-title="Imprimir" data-container="body">
                    <i class="icon wb-print" aria-hidden="true"></i>
                </button>
                <button type="button" class="btn btn-outline btn-default" data-toggle="tooltip"
                        data-original-title="Pesquisa Avançada" data-container="body">
                    <i class="icon wb-search" aria-hidden="true"></i>
                    <span class="hidden-xs">Pesquisa Avançada</span>
                </button>

            </div>
        </div>
    </div>
    <div class="page-content">

        <table id="dtPrincipal" class="table table-striped table-bordered center-header " cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>Cep</th>
                    <th>Endereço</th>
                    <th>Complemento</th>
                    <th>Bairro</th>
                    <th>Cidade</th>
                    <th>UF</th>
                    <th>Ações</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<div class="modal fade modal-primary" id="modalCep" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static">
    <div class="modal-dialog" style="width: 50%; height: 500px;">
        <div class="modal-content">
            <div id="contentModal"></div>
        </div>
    </div>
</div>

@section scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script src="~/js/cadastros/cep/cep.js"></script>
}

Answer 1

您无法在局部视图中指定部分，或者更恰当地指定用作部分视图的视图。这就是为什么它在作为视图返回时起作用，但在作为局部视图返回时不起作用;在前者中，脚本被添加到该部分中，而在后者中则不是。

对于这样的事情，您应该将脚本直接添加到布局中，或者添加到将使用其中一个部分的每个视图。你几乎不应该在部分视图中添加任何类型的JavaScript，因为这会导致各种各样的问题，例如多次加载脚本，在依赖项可用之前加载等等。

PartialViews中的输入掩码问题 - Asp.Net Core

1 个答案: