如何在mvc 4中捆绑和渲染脚本 - asp.net?

时间:2015-03-20 18:43:45

标签: asp.net-mvc

我后来才知道我可以捆绑我的脚本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")

正如我所看到的那样,但没有任何东西在渲染。我的虚拟道路仍然是空的。请问我错过了什么?任何更好的tut或解释将不胜感激。

2 个答案:

答案 0 :(得分:4)

你制作这样的样式包:

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()方法的行

答案 1 :(得分:1)

不应该这样吗?你只是错误拼写了这个包..

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