Bootstrap-select 插件在 asp.net core mvc 的部分视图中不起作用答案

【问题标题】：Bootstrap-select plugin not working in partial view in asp.net core mvcBootstrap-select 插件在 asp.net core mvc 的部分视图中不起作用
【发布时间】：2020-08-22 20:10:32
【问题描述】：

我正在使用 jquery 的 $.get() 方法使用局部视图，但是每当我加载页面时，选择元素就会从页面中消失。它显示在浏览器的“检查元素”部分，但我没有看到任何错误。

此错误仅发生在部分视图中。如果我将页面加载为视图而不是部分视图，那么该插件将完美运行。

这是我的代码。如果您对此有所了解，请提供帮助。

注意：由于部分视图不支持@section，所以我必须将所有脚本元素放在正文标记的开头，以便部分视图中的所有脚本都将在 _Layout 页面脚本之后注册到 dom 中。否则我会收到类似“$ 未定义”等错误

这是我的 _Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Website Name</title>
    <link rel=" shortcut icon" type="image/x-icon" href="~/logo-icon.png" sizes="16x16" />
    <link rel="stylesheet" href="~/css/bootstrap.min.css" />
    <link rel="stylesheet" href="~/DataTables/datatables.min.css" />
    <link rel="stylesheet" href="~/css/font-awesome.min.css" />
    <link rel="stylesheet" href="~/css/bootstrap-select.min.css" />
    <link rel="stylesheet" href="~/css/style.css" />
</head>

<body>
    <script type="text/javascript" src="~/js/jquery-3.5.1.min.js"></script>
    <script type="text/javascript" src="~/js/popper.min.js"></script>
    <script type="text/javascript" src="~/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/js/bootstrap-select.min.js"></script>
    <script type="text/javascript" src="~/DataTables/datatables.min.js"></script>
    <script type="text/javascript" src="~/js/customized-datatable.js"></script>


    <!--For font awesom 5.14.0 icons -->
    <script type="text/javascript" src="~/js/font-awesome-5.14.0.js"></script>

    <!--Custom bootstrap modal-->
    <script type="text/javascript" src="~/js/psychic-dev.js"></script>


    @await Component.InvokeAsync("Menu")
    @await Component.InvokeAsync("ChangePassword")
    @await Component.InvokeAsync("UserProfile")
    @await Component.InvokeAsync("Profile")

    <div class="m-4">
        @RenderBody()
    </div>


    @RenderSection("script", required: false)
</body>
</html>

这是一个视图（我将在其中注入不同的局部视图）


<div class="container-fluid p-3 shadow-lg border" style="height:80vh;">
    <div id="fund-rule-div">
    </div>
</div>


@section script{

    <script type="text/javascript" src="~/ui-js/fund-rule-ui/fund-rule.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $.get('@Url.Action("FundRuleIndex")', function (data) {
                $('#fund-rule-div').html(data);
            });


        });
    </script>
}

这是我的部分观点，其中 bootstrap-select 不起作用（根本没有出现）

@model Society.Excel.WebApp.ViewModels.FundRuleViewModel


<ul class="breadcrumb">
    <li class="breadcrumb-item"><a asp-action="Index" asp-controller="FundRule">Index</a></li>
    <li class="breadcrumb-item active">Fund Rule</li>
</ul>


<form method="post" class="form-horizontal " role="form" id="add-fund-rule-form" onsubmit="addUpdateFundRule(event)">

    <h5 class="text-info">Fund Rule</h5>
    <hr class="border-info" />

    <div class="row ">
        <div class="col-md-3">
            <div class="form-group">
                <div class="custom-control custom-switch">
                    <input asp-for="FundRuleModel.IsActive" type="checkbox" class="custom-control-input" id="IsActive" checked="checked">
                    <label class="custom-control-label" for="IsActive">Is Active?</label>
                </div>
            </div>
        </div>
        <div class="col-md-9">
            <label class="col-form-label"><strong>Rule for :>></strong> </label>
            <div class="custom-control custom-radio custom-control-inline">
                <input asp-for="FundRuleModel.IsIncludedInRegularInvoice" id="IsForSystemGeneration_true" class="custom-control-input" type="radio" value="true" checked>
                <label class="custom-control-label" for="IsForSystemGeneration_true">Regular Invoice</label>
            </div>
            <div class="custom-control custom-radio custom-control-inline">
                <input asp-for="FundRuleModel.IsIncludedInRegularInvoice" id="IsForSystemGeneration_false" class="custom-control-input" type="radio" value="false">
                <label class="custom-control-label" for="IsForSystemGeneration_false">Manually Created Invoice</label>
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-3">
            <div class="form-group ">
                <label asp-for="FundRuleModel.FundRuleName" for="FundRuleName">Name <span class="text-danger">*</span></label>
                <input type="text" asp-for="FundRuleModel.FundRuleName" class="form-control form-control-sm " id="FundRuleName" required />
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label asp-for="FundRuleModel.FundRuleTypeName" for="FundRuleType">Rule Type <span class="text-danger">*</span></label>
                <select asp-for="FundRuleModel.FundRuleTypeRid" asp-items="@(new SelectList(Model.FundRuleTypes,"FundRuleTypeRid","FundRuleTypeName"))" class="selectpicker form-control form-control-sm " data-live-search="true" data-size="5" id="FundRuleType" required>
                    <option selected disabled value="">Select One</option>
                </select>
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label asp-for="FundRuleModel.FundCycleName" for="FundCycleName">Fund Cycle<span class="text-danger">*</span></label>
                <select asp-for="FundRuleModel.FundCycleRid" asp-items="@(new SelectList(Model.FundCycles,"FundCycleRid","FundCycleName"))" class="selectpicker form-control form-control-sm " id="FundCycleName" required>
                    <option selected disabled value="">Select One</option>
                </select>
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label asp-for="FundRuleModel.Amount" for="Amount">Amount <span class="text-danger">*</span></label>
                <input asp-for="FundRuleModel.Amount" class="form-control form-control-sm " id="Amount" required />
            </div>
        </div>
    </div>


    <div class="row">
        <div class="col-md-3">
            <div class="form-group">
                <label asp-for="FundRuleModel.FundCalculationTypeName" for="FundCalculationTypeName">Calculation Type <span class="text-danger">*</span></label>
                <select asp-for="FundRuleModel.FundCalculationTypeRid" asp-items="@(new SelectList(Model.CalculationTypes,"FundCalculationTypeRid","FundCalculationTypeName"))" class="selectpicker form-control form-control-sm " id="FundCalculationTypeName" required>
                    <option selected disabled value="">Select One</option>
                </select>
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label asp-for="FundRuleModel.FlatCalculationFilterName" for="FlatCalculationFilterRid">Flat Filters<span class="text-danger">*</span></label>
                <select asp-for="FundRuleModel.FlatCalculationFilterRid" asp-items="@(new SelectList(Model.CalculationFlatFilters,"FlatCalculationFilterRid","FlatCalculationFilterName"))" class="selectpicker form-control form-control-sm " id="FlatCalculationFilterRid" required>
                    <option selected disabled value="">Select One</option>
                </select>
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label asp-for="FundRuleModel.ApplicableDate" for="ApplicableDate">Applicable Date <span class="text-danger">*</span></label>
                <input type="date" asp-for="FundRuleModel.ApplicableDate" class="form-control form-control-sm " id="ApplicableDate" required />
            </div>
        </div>

        <div class="col-md-3">
            <div class="form-group">
                <label asp-for="FundRuleModel.EndDate" for="EndDate">End Date</label>
                <input type="date" asp-for="FundRuleModel.EndDate" class="form-control form-control-sm " id="EndDate" />
            </div>
        </div>
    </div>


    <div class="row ">
        <div class="col-md-12">
            <div class="form-group">
                <label asp-for="FundRuleModel.Narration" for="Narration">Narration</label>
                <textarea asp-for="FundRuleModel.Narration" class="form-control form-control-sm " id="Narration"></textarea>
            </div>
        </div>
    </div>


    <div class="row ">
        <div class="col-md-12 text-center">
            <div class="form-group">
                <button class="btn btn-sm btn-success " type="submit">Save</button>
                <button type="button" onclick="fundRuleIndexPage()" class="btn btn-sm btn-outline-dark ">Cancel</button>
            </div>
        </div>
    </div>
</form>

【问题讨论】：

由于您是通过 jQuery 的 Get() 加载局部视图，因此您的父视图很可能已经加载。这意味着，为选择运行所需的任何 JS 初始化，在您通过 Get() 方法加载局部视图之前已经运行。它不会再次运行，因为加载局部视图与加载页面不同。所以需要手动执行负责渲染bootstrap select的JS代码。
我已经尝试在局部视图中手动执行 JS 但没有成功

标签： jquery asp.net-core asp.net-mvc-partialview bootstrap-selectpicker

【解决方案1】：

你可以尝试这样使用局部视图，下面是一个简单的demo：

主视图：

<div class="container-fluid p-3 shadow-lg border" style="height:80vh;">
    <div id="fund-rule-div">
        <partial name="FundRuleIndex" />
    </div>
</div>


@section script{

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">

    <script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
}

局部视图：

<select class="selectpicker">
    <option>Mustard</option>
    <option>Ketchup</option>
    <option>Barbecue</option>
</select>

结果：

【讨论】：