Проблемы с масками ввода в PartialViews - Asp.Net Core

Question

У меня проблемы с входными масками (начальной загрузкой) на всех экранах.Мне показалось интересным следующее: все мои представления, которые возвращаются в виде «PartialView», маски ввода не работают.Для тестов, когда я создаю View и контроллер, который возвращает View, все работает правильно.Это ясно показывает, что проблема вызвана возвратом 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 в частичное представление, так как это может привести к всевозможным проблемам, таким как скрипты, загружаемые несколько раз, загружаемые до того, как станут доступны зависимости, и т. Д.