如何在MVC 4-ASP.NET中捆绑和呈现脚本? [英] How to Bundle and render scripts in mvc 4 -- asp.net?

问题描述

我最近了解到，我可以将脚本js/css捆绑在一起以获得更好和优化的性能.我尝试通过我的mvc项目实现此功能，但脚本未呈现.我在如下的App_Start下添加了bundleconfig类.

I recenly learnt that i can bundle my scripts js/css for a better and optimized performance. I tried to implement this with my mvc project but the scripts aren't rendering. I added my bundleconfig class under App_Start like below.

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"

                      ));
        }
    }

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

Note: new ScriptBundle("Viturtual path"). Please what should the virtual path be? I created a new folders and assigned them as my virtual path. I was expecting to see some files to be created after the bundling yet the folder is still empty. In my Global.asx, i added the line below.

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

我尝试从LayoutPage渲染我的包

I try to render my bundle from my LayoutPage

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

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

As i have seen some where but nothing is rendering. Also my vitual path is still empty . Please what am i missing ? Any better tut or explanation would be appreciated.

推荐答案

您可以像这样制作样式包:

You make your styles bundles like this:

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

名称〜/styles 是您的虚拟路径.

您的脚本捆绑如下:

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 再次是您的虚拟路径.

例如在布局文件中使用这些捆绑软件.请执行以下操作:

To use these bundles, for example, in the Layout file. Do the following:

对于样式:

@Styles.Render("~/styles")

对于脚本:

@Scripts.Render("~/scripts")

在您的示例中，可以这样更改名称:

In your example the names can be changed like so:

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"

  ));

然后您可以像我上面显示的那样调用这些捆绑包.名称可以是任何东西，只要您可以区分它们即可.

And you can then call these bundles like I showed above. The names can be just about anything as long as you can differentiate them.

但是，如果您想继续使用所选的名称，则也可以按照上面的示例使用这些名称来调用它们.只需替换虚拟路径名即可.

But if you want to keep using the names you've selected then you can also call them with those names by following the example above. Just replace the virtual path names.

注意:您无需更改Global.asax文件即可调用捆绑包.BundleConfig类正在Global.asax中的以下行中注册: BundleConfig.RegisterBundles(BundleTable.Bundles); .如果您有一个空的应用程序，那么这就是您要添加到Global.asax

Note: You do not need to change your Global.asax file to call your bundles. The BundleConfig class is being registered in Global.asax at the line that says: BundleConfig.RegisterBundles(BundleTable.Bundles);. If you had an empty application then that is the line you want to add to the Application_Start() method in Global.asax

这篇关于如何在MVC 4-ASP.NET中捆绑和呈现脚本?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！