在 ASP.NET MVC 中管理 js 和 css 文件答案

【问题标题】：Managing js and css files in ASP.NET MVC在 ASP.NET MVC 中管理 js 和 css 文件
【发布时间】：2014-06-08 05:10:23
【问题描述】：

我是 ASP.NET MVC 4 的新手，想知道 ASP.NET 包含 css 和 js 文件的方式是什么。

背景

在我的 PHP 项目中，我通常在控制器中有 CSS 和 JS 文件名的数组。这些数组在主模板中传递，其中一个函数循环并为每个项目生成 html 标签，并在此时自动对其进行版本化。 CSS 位于 <head> 中，而 JS 位于 </body> 标记之前。

我知道的事情

BundleConfig（但是，我严格关注特定于页面的 css/js，而不是全局的）
在文件列表中传递的类中创建一些静态函数以相应地生成脚本和链接标签

问题

我应该如何设法从视图（甚至控制器）中包含（并且可能像 BundleConfig 一样自动版本和缩小）页面特定的 js 和 css 文件。？

【问题讨论】：

标签： javascript css asp.net asp.net-mvc

【解决方案1】：

一种选择是在您的布局页面中使用@RenderSection 来实现此目的。在布局页面中，您包含所有使用布局的页面共有的文件和/或包，并使用@RenderSection 指定将包含页面特定文件的占位符（注意第二个参数 = false 使其可选）

布局页面

<!DOCTYPE html>
<html>
  <head>
    <title>@ViewBag.Title</title>
    <link href="~/Content/Common.css" rel="stylesheet" /> // Common .css files here
    @RenderSection("styles", false) // Place holder for optional page specific .css files
    @Scripts.Render("~/bundles/modernizr")
  </head>
  <body>
    <div id="content">
      @RenderBody()
    </div>
    @Scripts.Render("~/bundles/jquery") // Common .js files or bundles
    @RenderSection("scripts", required: false) // Place holder for optional page specific .js files or bundles 
  </body>
</html>

然后在页面中，定义页面特定包和/或文件的部分

@model ....
// Page specific html
@section styles {
  <link href="~/Content/page-specific-stylesheet.css" rel="stylesheet" />
}
@section Scripts {
  @Scripts.Render("~/bundles/page-specific-bundle")
  <script src="~/Scripts/page-specific-file.js"></script>
  <script type="text/javascript">
    // page specific script
  </script>

}

没有理由不能为页面特定文件创建捆绑包，即使它只有一个文件。优点是对于您的生产环境，文件将被自动缩小（除非您在同一文件夹中已经有一个附加了 .min.js 的文件）。默认情况下，捆绑包在浏览器中缓存（我认为是 12 个月），如果您编辑文件，则会创建一个新的缩小版本，并从浏览器缓存中删除旧版本。

【讨论】：