Question

我对ASP.NET MVC 4还不熟悉，并且想知道包含css和js文件的ASP.NET方式是什么。

背景

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

我了解的事情

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

问题

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

Answer 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个月），如果您编辑该文件，则会创建一个新的缩小版本，并从浏览器缓存中删除旧版本。

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

1 个答案: