Asp.net mvc 如何在MVC4--asp.net中绑定和呈现脚本？

我最近了解到，我可以捆绑我的脚本js/css，以获得更好和优化的性能。我试图用我的mvc项目实现这一点，但脚本无法呈现。我在App_Start下添加了bundleconfig类，如下所示

public class BundleConfig
    {
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/Content/bundles/js").Include(

                       "~/Content/js/jquery.min.js",

                       "~/Content/js/bootstrap.min.js",

                       "~/Content/js/JobWebSite.js",

                       "~/Content/js/bootstrap-datetimepicker.min.js",
                       "~/Content/js/bootstrap-filestyle.min.js"

                       ));

            bundles.Add(new StyleBundle("~/Content/bundles/css").Include(

                      "~/Content/css/style.css",

                      "~/Content/css/bootstrap.min.css",
                      "~/Content/css/bootstrap-datetimepicker.min.css",
                      "~/Content/css/social-buttons.css",
                      "~/Content/css/font-awesome.min.css"

                      ));
        }
    }

注意：

newscriptbundle（“虚拟路径”）

。请确定虚拟路径应该是什么？我创建了一个新文件夹，并将它们指定为我的虚拟路径。我本来希望看到捆绑后创建一些文件，但文件夹仍然是空的。在我的Global.asx中，我添加了以下行

JobWebSite.WebUI.App_Start.BundleConfig.RegisterBundles(System.Web.Optimization.BundleTable.Bundles);

我试图从我的布局页面呈现我的包

 @Scripts.Render("~/Content/bundles/cs")

---

正如我所看到的，有些地方却什么也没有呈现出来。而且我的虚拟路径仍然是空的。请问我错过了什么？如果有更好的提示或解释，我们将不胜感激。

不应该是这样吗？你只是拼错了包

@Scripts.Render("~/Content/bundles/js")

---

您可以这样创建样式包：

bundles.Add(new StyleBundle("~/styles")
                .Include("~/Content/Styles/bootstrap.css")
                .Include("~/Content/Styles/Site.css"));

bundles.Add(new ScriptBundle("~/scripts")
                .Include("~/Scripts/jquery-2.1.3.js")
                .Include("~/Scripts/jquery.validate.js")
                .Include("~/Scripts/jquery.validate.unobtrusive.js")
                .Include("~/Scripts/bootstrap.js"));

名称

~/styles

是您的

虚拟路径

您的脚本包如下所示：

bundles.Add(new StyleBundle("~/styles")
                .Include("~/Content/Styles/bootstrap.css")
                .Include("~/Content/Styles/Site.css"));

bundles.Add(new ScriptBundle("~/scripts")
                .Include("~/Scripts/jquery-2.1.3.js")
                .Include("~/Scripts/jquery.validate.js")
                .Include("~/Scripts/jquery.validate.unobtrusive.js")
                .Include("~/Scripts/bootstrap.js"));

名称

~/scripts

同样是您的

虚拟路径

例如，在布局文件中使用这些捆绑包。请执行以下操作：

对于样式：

@Styles.Render("~/styles")

对于脚本：

@Scripts.Render("~/scripts")

在您的示例中，名称可以更改如下：

bundles.Add(new ScriptBundle("~/scripts").Include(

   "~/Content/js/jquery.min.js",

   "~/Content/js/bootstrap.min.js",

   "~/Content/js/JobWebSite.js",

   "~/Content/js/bootstrap-datetimepicker.min.js",
   "~/Content/js/bootstrap-filestyle.min.js"

   ));

bundles.Add(new StyleBundle("~/styles").Include(

  "~/Content/css/style.css",

  "~/Content/css/bootstrap.min.css",
  "~/Content/css/bootstrap-datetimepicker.min.css",
  "~/Content/css/social-buttons.css",
  "~/Content/css/font-awesome.min.css"

  ));

然后你可以像我上面展示的那样调用这些包。只要你能区分它们，名字可以是任何东西

但是如果你想继续使用你选择的名字，那么你也可以按照上面的例子用这些名字来称呼他们。只需替换虚拟路径名

---

注意：您不需要更改Global.asax文件来调用bundle。BundleConfig类正在Global.asax中注册，该行显示：

BundleConfig.RegisterBundles（BundleTable.Bundles）。如果您有一个空的应用程序，那么这就是您要添加到Global中的
应用程序\u Start（）
方法中的行。asax
捆绑不以这种方式工作，没有物理“捆绑”文件。想法是在第一次请求时动态绑定，缓存该版本，直到过期或生成新版本。虚拟路径只是引用一个或多个参考文件的“捆绑”组织的一种简单方式。@lrb，我创建了虚拟文件夹，是否应该删除它们？是的，我有两个，一个用于js，另一个用于cs。还是我应该只开着？谢谢。我错发了
@Scripts.Render（“~/Content/bundles/cs”）
。它应该是
@Styles.Render（“~/Content/bundles/css”）
。css与ss。比你强，先生。谢谢你，先生。现在可以了。但为什么它以前失败过呢？虚拟路径有什么不同呢？@NuruSalihu可能是因为您拼错了：
@Scripts.Render（“~/Content/bundles/cs”）
而不是
@Scripts.Render（“~/Content/bundles/js”）
如果没有错误消息，很难判断出哪里出了问题。不管怎样，我很高兴它现在起作用了。不，我加了两个。一个用于我的css，另一个用于我的js。它现在可以工作，以前没有。@NuruSalihu应该是
@Styles。Render
不是
脚本，因为
css
是样式表。参考答案中给出的例子。Nicolas。非常感谢。我在代码中添加了@style。事实上，这是错误的一部分。再次感谢您抽出时间。