Question

我有一个名为ProcessController的控制器及其视图，在该视图中，我将PartialView称为Modal，在其中，我需要将数据加载到Jquery Select2控件中。

PartialView

@model App.ViewModels.UnidadeOrganizacionalViewModel
@{
    ViewData["Title"] = "Nova unidade organizacional";
}

<div class="modal-header">
    <h4 class="modal-title">@ViewData["Title"]</h4>
    <button type="button" class="close" data-dismiss="modal">
        <span aria-hidden="true">×</span><span class="sr-only">Fechar</span>
    </button>
</div>

<form asp-action="CreateUnidadeOrganizacional">
    <div class="modal-body">

        <div asp-validation-summary="ModelOnly" class="text-danger"></div>
        <div class="form-group">
            <label asp-for="IdContratante" class="control-label"></label>
            <select id="slcContratante" asp-for="IdContratante" class="form-control"></select>
            <span asp-validation-for="IdContratante" class="text-danger"></span>
        </div>
        <div class="form-group">
            <label asp-for="Nome" class="control-label"></label>
            <input asp-for="Nome" class="form-control" />
            <span asp-validation-for="Nome" class="text-danger"></span>
        </div>

        <div class="modal-footer" style="padding-right:0">
            <input type="submit" value="Salvar" class="btn btn-success" />
            <input type="button" class="btn btn-info" value="Fechar" data-dismiss="modal" />
        </div>
    </div>
</form>

<script src="~/lib/select2/js/select2.js"></script>
<script>
    $(document).ready(function () {

        $('#slcContratante').select2({

            placeholder: 'Informe o contratante',
            allowClear: true,
            closeOnSelect: true,
            tags: false,
            minimumInputLength: 0,
            language: {
                inputTooShort: function () { return ""; },
                noResults: function () {
                    return "Nenhum resultado encontrado";
                },
                searching: function () { return "Pesquisando..." }
            },
            ajax: {
                type: 'GET',
                url: '/get-contratante',
                contentType: 'application/json',
                dataType: 'json',
                data: function (params) {
                    var query = {
                        search: params.term
                    }
                    return query;
                },
                processResults: function (json) {

                    return { results: objThat.MapSelect2(json) };
                }
            }
        });
    });
</script>

当我选择Select2时，它应该打开一个下拉列表，其中包含通过在ProcessController中进行调用的ajax方法获取的数据

[Route("get-contratante")]
public async Task<JsonResult> GetContratante(string search)
{
    IEnumerable<ContratanteViewModel> lstContratanteViewModel = null;
    lstContratanteViewModel = _mapper.Map<IEnumerable<ContratanteViewModel>>(await _contratanteBLL.GetByNome(search));
    return new JsonResult(lstContratanteViewModel);
}

没有Ajax请求发生，我检查了控制台，它没有错误消息，并且在被JQuery调用时Select2控件是正确的。

我在ProcessController View中测试了相同的Select2并加载了数据，但是在PartialView中什么也没有发生。

我要去哪里错了？

Answer 1

我测试了您的代码，看来您没有首先引用您的jquery。最简单的方法是删除_Layout.cshtml中的引用：

<environment include="Development">
    @*<script src="~/lib/jquery/dist/jquery.js"></script>*@remove this line
    <script src="~/lib/bootstrap/dist/js/bootstrap.bundle.js"></script>
</environment>

并将您的jquery引用添加到局部视图中，例如

<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/select2/js/select2.js"></script>

您可以按F12键来检查浏览器中的js代码是否有错误，并在操作中添加断点以查看是否被击中。

更新：

您不能在局部视图中使用@section Scripts{}，因为doc曾说过：

页面或视图中定义的部分仅在其直接布局页面中可用。不能从局部视图，视图组件或视图系统的其他部分引用它们。

您可以将所有js代码从局部视图移动到称为局部视图的父视图，您可以成功使用@section脚本{}。

Answer 2

在脚本partial view中给出

$( document ).ready(function() {
     $("select").select2();
});

如何在部分视图中加载Select2？

2 个答案: