如何在mvc 4中打包和呈现脚本-asp.net？

Question

我最近了解到，我可以将脚本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"

                      ));
        }
    }

注意： new ScriptBundle("Viturtual path") 。 请问虚拟路径应该是什么？ 我创建了一个新文件夹，并将其分配为我的虚拟路径。 我希望在捆绑后看到一些要创建的文件，但文件夹仍然为空。 在我的Global.asx中，我添加了以下行。

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

我尝试从LayoutPage渲染我的包

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

如我所见，有些地方没有渲染。 同样，我的生命之路仍然是空的。 请我想念什么？ 任何更好的评论或解释将不胜感激。

Answer 1

您可以这样制作样式束：

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

名称~/styles是您的virtual path 。

您的脚本捆绑如下：

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再次是您的virtual path 。

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

对于样式：

@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文件即可调用捆绑软件。 BundleConfig类正在Global.asax中的以下行中注册： BundleConfig.RegisterBundles(BundleTable.Bundles); 。 如果您有一个空的应用程序，那么这就是您要添加到Global.asax中的Application_Start()方法中的行

Answer 2

不是吗 您只是在拼写错误。.

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