让我的脚本和 CSS 页面与 MVC5 应用程序一起使用答案

【问题标题】：Getting my Script and CSS pages to work with MVC5 App让我的脚本和 CSS 页面与 MVC5 应用程序一起使用
【发布时间】：2017-12-23 13:01:00
【问题描述】：

我已经启动了一个新的 MVC5 ASP.Net 应用程序。我一直在疯狂地阅读我能读到的所有内容，但我不确定我是否完全理解我做错了什么。

我已将我的 javascript 页面添加到 js 文件夹以及我的 css 到其相应的文件夹。我已将此添加到 BundelConfig.cs 文件中的 App_Start 文件夹中：

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/skel").Include("~/Scripts/skel.js"));
bundles.Add(new ScriptBundle("~/bundles/skel").Include("~/Scripts/awards.js"));
bundles.Add(new ScriptBundle("~/bundles/skel").Include("~/Scripts/main.js"));
bundles.Add(new ScriptBundle("~/bundles/skel").Include("~/Scripts/index.js"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/main.css", "~/Content/awards.css"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/font-awesome.min.css"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/fullcalendar.css", "~/Content/fullcalendar.print.css"));
bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/noscript.css"));

然后将其添加到 Shared _Layout.cshtml 文件中

在<head>：

@Styles.Render("~/Content/css/main")
@Styles.Render("~/Content/css/font-awesome.min")
@Styles.Render("~/Content/css/main")
@Styles.Render("~/Content/css/noscript")
@Styles.Render("~/Content/sass/main")
@Styles.Render("~/Content/sass/noscript")

在我的<body>标签结束上方的底部：

@Scripts.Render("~/Scripts/index")
@Scripts.Render("~/Scripts/jquery.dropotron.min")
@Scripts.Render("~/Scripts/jquery.min")
@Scripts.Render("~/Scripts/jquery.scrollex.min")
@Scripts.Render("~/Scripts/jquery.scrolly.min")
@Scripts.Render("~/Scripts/main")
@Scripts.Render("~/Scripts/moment")
@Scripts.Render("~/Scripts/npm")
@Scripts.Render("~/Scripts/skel")
@Scripts.Render("~/Scripts/util")
@Scripts.Render("~/Scripts/gcal")
@Scripts.Render("~/Scripts/fullcalendar")
@RenderSection("scripts", required: false)

当我运行它时，我没有收到任何错误，但 HTML 就是这样，HTML。我在哪里错了？

【问题讨论】：

也许我的 ASP.NET MVC 知识有点过时了，但这看起来和 ASP.NET MVC 没有太大关系。
除了 HTML 之外，您希望 HTML 是什么？
怎么样？你必须记住，我试图解释一些我每天都不做的事情。我通常用 HTML5 和 PHP 而不是 .NET 来做我的应用程序，所以这就是我提出这个问题的地方。
我试图将纯 HTML 的噱头与理解我称它以不同方式表现的 HTML 联系起来。因此，当我运行应用程序时，它不仅会看到我的 HTML，而且还会看到并运行我正在调用的脚本和 css。
我正在尝试让应用程序呈现 css 和脚本，以便 HTML 以我想要的方式运行。我可以让它与 bootstrap 一起使用，但我无法让它与 skel 一起使用。

标签： html css asp.net asp.net-mvc bundling-and-minification

【解决方案1】：

您这里的逻辑不太正确。您正在创建多个具有相同虚拟路径的包，这些包将覆盖 bundles 集合中的先前包。

首先，bundle 的想法是将多个 JS/CSS 文件连接在一起作为一个文件。为此，您可以调用ScriptBundle() 或StyleBundle()，为该包提供一个虚拟路径，然后使用Include() 添加文件和/或文件夹。

其次，在使用Scripts.Render() 或Styles.Render() 时，您在视图中使用虚拟路径。试试这个：

bundles.Add(new ScriptBundle("~/bundles/modernizr").Include("~/Scripts/modernizr-*"));
bundles.Add(new ScriptBundle("~/bundles/skel")
  .Include("~/Scripts/skel.js")
  .Include("~/Scripts/awards.js")
  .Include("~/Scripts/main.js")
  .Include("~/Scripts/index.js"));

bundles.Add(new StyleBundle("~/Content/css")
  .Include("~/Content/main.css", "~/Content/awards.css")
  .Include("~/Content/font-awesome.min.css")
  .Include("~/Content/fullcalendar.css", "~/Content/fullcalendar.print.css")
  .Include("~/Content/noscript.css"));

// In the view(s)
@Styles.Render(~/Content/css)
@Scripts.Render("~/bundles/modernizr")
@Scripts.Render("~/bundles/skel")
@RenderSection("scripts", required: false)

【讨论】：

非常感谢您的快速回复。所以我现在得到了捆绑包，这很有意义。所以我就像你说的那样捆绑了css，当我去编译它给我的视图时
如果您想添加一些代码，最好在您的问题上使用edit 按钮 - cmets 不适合格式化代码。
第 377 行：
第 378 行：第 379 行：@Styles.Render(~/Content/css) 第 380 行：@Scripts.Render("~/bundles/modernizr ") 第 381 行：@Scripts.Render("~/bundles/skel")

@Style.Render(~/Content/css) "/" 无效表达式术语的编译错误。

没关系，我忘记了我该死的引语。主要问题是 @RenderSection("scripts", required: false) Exception User unhandled