Asp.Net Mvc捆綁包和特定視圖

Question

我在某些特定的表中使用了DataTables，它需要至少10個不同的js / css文件才能工作。 因此，我嘗試將它們放在一個包中，並在該視圖中將該包稱為。 但是沒有成功。

我的問題是：捆綁包是否僅適用於整個站點（每個頁面中的負載），或者我只能在特定視圖中使用其中的一部分？

BundleConfig

bundles.Add(new     ScriptBundle("~/Content/DataTablesJS").Include("~/Content/DataTables/*.jss"));
bundles.Add(new     StyleBundle("~/Content/DataTablesCSS").Include("~/Content/DataTables/*.css"));

視圖

@section Styles
{
    @Scripts.Render("~/Content/DataTablesCSS")

}

    @section Scripts
    {
    @Scripts.Render("~/Content/DataTablesJS")
    <script src="~/Content/SayfaJSs/DataTables.jss" type="text/javascript"></script>
    <script>
    jQuery(document).ready(function() {
    DataTables.init();
    });
    </script>
    }

HTML輸出

 <script src="/Content/DataTablesCSS?v=z-Ctaq2TbplDFpORl0e9NGH8TjpB5hQ2cPam2OxmDEo1"></script>

 <script src="/Content/DataTablesJS?v=2gXGKlcqr0bFFqv6Bbr9jB_7LVvvHDrghzBwHCgFJds1"></script>

Answer 1

在您的布局中，您將具有以下內容：

@RenderSection("Scripts", required: false)

...然后在您的視圖中，您將添加捆綁參考，如下所示：

@section Scripts {
    @Scripts.Render("~/bundles/yourBundle")
}

Answer 2

我發現了問題。 它使用星號來獲取文件夾中的所有腳本。 從asp.net網站：

“通過通配符添加腳本默認以字母順序加載它們，這通常不是您想要的。”

我的腳本需要特殊的命令。 所以我把它們包括在內，以便我需要：

        bundles.Add(new StyleBundle("~/Content/DataTablesCSS")
            .Include("~/Content/DataTables/dataTables.bootstrap.css",
            "~/Content/DataTables/buttons.dataTables.min.css",
            "~/Content/DataTables/select.dataTables.min.css"));

        bundles.Add(new ScriptBundle("~/Content/DataTablesJS")
            .Include("~/Content/DataTables/jquery.dataTables.min.js",
            "~/Content/DataTables/dataTables.bootstrap.js",
            "~/Content/DataTables/dataTables.buttons.min.js",
            "~/Content/DataTables/dataTables.select.min.js",
            "~/Content/DataTables/buttons.bootstrap.min.js",
            "~/Content/DataTables/jszip.min.js",
            "~/Content/DataTables/pdfmake.min.js",
            "~/Content/DataTables/vfs_fonts.js",
            "~/Content/DataTables/buttons.html5.min.js",
            "~/Content/DataTables/buttons.print.min.js"));