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

Question

I am fairly new to ASP.NET MVC 4 and was wondering what is the ASP.NET way of including css and js files. 我对ASP.NET MVC 4还是相当陌生，并且想知道ASP.NET包含CSS和JS文件的方式是什么。

Background 背景

In my PHP projects, I usually have arrays for CSS and JS file names that live in the controller. 在我的PHP项目中，我通常在控制器中包含用于CSS和JS文件名的数组。 These arrays are passed in the master-template where a function loops through and generates the html tags for each item and auto-versions them at this point as well. 这些数组在主模板中传递，在该模板中，函数循环通过并生成每个项目的html标签，并在此时自动对其进行版本控制。 The CSS resides in the <head> while the JS resides right before the </body> tag. CSS位于<head>而JS位于</body>标记之前。

Things I am aware of 我知道的事情

The BundleConfig (However, I am strictly concerned with page-specific css/js not global ones) BundleConfig（但是，我严格关注页面特定的css / js，而不是全局的）
Creating some static function in a class that is passed in a list of files to generate the script and link tags accordingly 在类中创建一些静态函数，该类在文件列表中传递，以相应地生成脚本和链接标记

Question 题

How should I manage to include (and possibly auto-version and minify like BundleConfig) page specific js and css files from the view (or even the controller).? 我应该如何从视图（甚至是控制器）中包含（并可能像BundleConfig一样自动版本化并缩小）页面特定的js和css文件？

Answer 1

One option is to use @RenderSection within you layout page to achieve this. 一种选择是在布局页面中使用@RenderSection来实现此目的。 In the layout page you include the files and/or bundles common to all pages using the layout and use @RenderSection to specify place holders where page specific files will be included (note the 2nd parameter = false makes it optional) 在布局页面中，您使用布局包括所有页面@RenderSection的文件和/或包，并使用@RenderSection指定将包含页面特定文件的占位符（请注意2nd参数= false使其成为可选）

The layout page 布局页面

<!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>

Then in the page, define the sections for the page specific bundles and/or files 然后在页面中，为页面特定的包和/或文件定义部分

@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>

} }

There is no reason you cant create bundles for page specific files even if its only one file. 即使没有一个文件，也没有理由不能为页面特定的文件创建捆绑软件。 The advantage is that for your production environment, the files will be automatically minified (unless you already have a file in the same folder appended with .min.js). 好处是，对于您的生产环境，文件将自动缩小（除非您已经在同一文件夹中附加了.min.js的文件）。 By default the bundle is cached in the browser (for 12 months I think) and if you edit the file, a new minified version is created and the old version is removed from the browser cache. 默认情况下，捆绑包在浏览器中缓存（我认为是12个月），如果您编辑文件，则会创建一个新的缩小版本，并将旧版本从浏览器缓存中删除。

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

问题描述

1 个解决方案

解决方案1
1 已采纳

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

问题描述

1 个解决方案

解决方案1 1 已采纳

解决方案1
1 已采纳