Asp.. Net Mvc bundle和特定视图

Question

我在一些特定的表中使用数据表，它需要至少10个不同的js/css文件才能在我的情况下工作。我试着把它们放在一个bundle中然后在那个视图中调用那个bundle。但没有成功。

我的问题是:捆绑包只适用于整个网站(在每个页面加载)，或者我可以在特定视图中使用它们中的一些吗?

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)

…然后在视图中添加bundle引用，如下所示:

@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"));