是否可以将每页的脚本和样式捆绑在一起

Question

尽管捆绑是 VS 的一项巧妙功能，但有时我希望有一个脚本或 css 可用于特定页面。这样，我可以确保避免名称冲突 and/or 覆盖。

是否可以捆绑文件以便只有全局文件和页面特定文件可用？

例如，假设我有一个名为 Cabinet.cshtml 的页面。我还有 Cabinet.js 和 Cabinet.css 文件。另一方面，我有另一个名为 AdminPanle.cshtml 的页面，其中包含文件 admin.js 和 admin.css。

现在，我希望这两个视图只能访问它们对应的文件以及 jQuery 和 jQuery ui。所以 jQuery 必须是全局的。

Answer 1

所以问题是什么？默认情况下，在您的 BundleConfig.cs 中您有：

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                    "~/Scripts/jquery-ui-{version}.js"));

所以把这个包放在你的头上 _Layout.cshtml:

@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/jqueryui")

并创建另外 4 个捆绑包：

//scripts
bundles.Add(new ScriptBundle("~/bundles/cabinet").Include(
                    "~/Scripts/Cabinet.js"));
bundles.Add(new ScriptBundle("~/bundles/admin").Include(
                    "~/Scripts/admin.js"));
//styles
bundles.Add(new StyleBundle("~/Content/cabinet").Include("~/Content/Cabinet.css"));
bundles.Add(new StyleBundle("~/Content/admin").Include("~/Content/admin.css"));

现在您可以分离这些脚本和样式，并仅将它们添加到您需要的页面上。

此外，我认为最好在 _Layout.cshtml 标签中的 _Layout.cshtml 中定义 2 个部分。

<head>
    //other scripts and styles here
    @RenderSection("scriptslib", required: false)
    @RenderSection("csslib", required: false)
</head>

所以现在在您的视图（Cabinet.cshtml 和 AdminPanle.cshtml）中，您可以将您的库放在它们应该像这样的地方：

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

是否可以将每页的脚本和样式捆绑在一起

Is it possible to bundle scripts and styles per page

asp.net-mvc

bundling-and-minification