Bootstrap-Select插件在ASP.NET Core MVC的部分视图中不起作用

问题描述

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

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

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

注意：由于部分视图不支持@section，因此我必须将所有脚本元素放在body标签的开头，以便将部分视图中的所有脚本都在_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>
}

这是我的局部视图，其中引导选择不起作用（根本没有出现）

@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>

解决方法

您可以尝试以这种方式使用部分视图，下面是一个简单的演示：

主视图：

<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>

结果：

asp.net-core asp.net-mvc-partialview bootstrap-selectpicker jquery