How to Bundle and render scripts in mvc 4 -- asp.net?

Question

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"

                      ));
        }
    }

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);

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.

The bundling doesn't work that way, there are no physical "bundle" files. The idea is to bundle on the fly the first time a request is made, cache that version until it expires or a new version is build. The virtual path is just an easy way to refer to a "bundled" organization of one or many of your reference files. — Ross Bush
– Ross Bush, Commented Mar 20, 2015 at 18:47
@lrb, i created the virtual folders , should i delete them then? — Nuru Salihu
– Nuru Salihu, Commented Mar 20, 2015 at 18:51

Nico · Accepted Answer · 2015-03-20 19:04:28Z

4

You make your styles bundles like this:

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

The name ~/styles is your virtual path.

And your scripts bundles like this:

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"));

The name ~/scripts is again your virtual path.

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

For styles:

@Styles.Render("~/styles")

For scripts:

@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.

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

edited Mar 20, 2015 at 19:04

answered Mar 20, 2015 at 18:56

Nico

3,4792 gold badges31 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

Nuru Salihu Over a year ago

Thank you sir it works now. But why does it fail before? What different does the virtual path make?

Nico Over a year ago

@NuruSalihu Probably because you misspelled it: @Scripts.Render("~/Content/bundles/cs") instead of @Scripts.Render("~/Content/bundles/js") its hard to tell what's going wrong without the error message. Either way, I'm glad its working now.

Nuru Salihu Over a year ago

Nope i added the two. One for my css and the other for my js. It works now and didnt before.

Nico Over a year ago

@NuruSalihu That should be @Styles.Render not Scripts because css are stylesheets. Refer to the examples given in the answer.

Nuru Salihu Over a year ago

Nicolas . thank you . I put @Styles in my code. Its part of the error actually. Thank you once again for your time.

|

JustAPup · Accepted Answer · 2015-03-20 18:46:02Z

1

Shouldn't it be this? You are just misspelling the bundle..

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

answered Mar 20, 2015 at 18:46

JustAPup

1,79013 silver badges19 bronze badges

2 Comments

Nuru Salihu Over a year ago

yah i have two, one for js and the other cs. Or should i leave on only ?

Nuru Salihu Over a year ago

Thank you. I mispelled @Scripts.Render("~/Content/bundles/cs"). It should be @Styles.Render("~/Content/bundles/css") . css with the ss . Than you sir.

Collectives™ on Stack Overflow

How to Bundle and render scripts in mvc 4 -- asp.net?

2 Answers 2

7 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related