ASP.NET MVC - Bundle Config order

Question

I'm trying to use a specific locale (es-CL) in my ASP.NET MVC 5 application. I've the following:

Changed web.config uiculture and culture to "es-CL"
Installed the Globalize and jQuery.Validation.Globalize packages
Changed the default language in my views: <html lang="es-cl">
Created a new Bundle and included in the appropriate views.

In BundleConfig.cs:

bundles.Add(new ScriptBundle("~/bundles/jqueryval")
    .Include("~/Scripts/jquery.validate.js")
    .Include("~/Scripts/jquery.validate.unobtrusive.js"));

bundles.Add(new ScriptBundle("~/bundles/globalization")
    .Include("~/Scripts/globalize/globalize.js")
    .Include("~/Scripts/globalize/cultures/globalize.culture.es-CL.js")
    .Include("~/Scripts/jquery.validate.globalize.js"));

In the appropriate views:

@section Scripts {
    @Scripts.Render("~/bundles/jqueryval")
    @Scripts.Render("~/bundles/globalization")
}

However, the generated source code is the following:

<script src="/Scripts/jquery.validate.js"></script>
<script src="/Scripts/jquery.validate.unobtrusive.js"></script>

<script src="/Scripts/jquery.validate.globalize.js"></script>
<script src="/Scripts/globalize/globalize.js"></script>
<script src="/Scripts/globalize/cultures/globalize.culture.es-CL.js"></script>

Please note that the jquery.validate.globalize.js script is being loaded before globalize.js, which is not what I want.

Why is this happening? Is it possible to rely in the include order in a single bundle, or am I forced to put this single script in a different bundle and specify it in my view?

Have a look at this question stackoverflow.com/questions/11979718/… — PMC
– PMC, Commented Oct 11, 2013 at 17:03
@PaulMcCowat yes, but I'm not using the minified versions yet. I'm using Microsoft.AspNet.Web.Optimizations 1.1.0. — Leonardo Herrera
– Leonardo Herrera, Commented Oct 11, 2013 at 17:08
@LeonardoHerrera I would think it is like Chris mentioned in his comments, that known files are moved around to an order specified by the bundler... but I can't be sure since I don't know what those files are, which led me to ask. I'll be interested to know if using the IBundleOrderer works for you since specifying the order didn't. — MikeSmithDev
– MikeSmithDev, Commented Oct 11, 2013 at 19:36
look at @Softlion answer in [this link][1] [1]: stackoverflow.com/questions/11979718/… — Omid.Hanjani
– Omid.Hanjani, Commented Jun 17, 2015 at 7:02
@section Scripts { @Scripts.Render("~/bundles/jqueryval") } appears to have resolved the issue of my scripts loading out of order.... — petrosmm
– petrosmm, Commented Nov 10, 2016 at 16:25

Community · Accepted Answer · 2017-05-23 12:10:08Z

104

By default, bundling order is alphabetical for names with wildcards (as pointed out in the comments). However, it also orders based on what it thinks your dependency tree is, and jQuery scripts seem to get slotted to the top. You need to create an object that implement IBundleOrder:

class NonOrderingBundleOrderer : IBundleOrderer
{
    public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        return files;
    }
}

This prevents the default ordering. Now to use it:

var bundle = new ScriptBundle("~/bundles/globalization")
    .Include("~/Scripts/globalize/globalize.js")
    .Include("~/Scripts/globalize/cultures/globalize.culture.es-CL.js")
    .Include("~/Scripts/jquery.validate.globalize.js");

bundle.Orderer = new NonOrderingBundleOrderer();

bundles.Add(bundle);

ref: http://stevescodingblog.co.uk/changing-the-ordering-for-single-bundles-in-asp-net-4/

For further reading, an answer to MikeSmithDev's question provides further insight into the default ordering for popular script libraries:

Ordering of Files within a bundle - What are the known libraries?

edited May 23, 2017 at 12:10

CommunityBot

11 silver badge

answered Oct 11, 2013 at 17:09

Mister Epic

16.8k13 gold badges88 silver badges157 bronze badges

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

10 Comments

MikeSmithDev Over a year ago

Not to nitpick, but "by default, bundling order is alphabetical" is true when you use things like wild cards... when you specify the order, like he has, it should use his order. I can only assume the bundler is moving around known file types and is ignoring his order.

Mister Epic Over a year ago

It looks like the bundler also orders using some logic about dependencies. It thinks that jquery.validate.globalize.js is required for the other two. From the ref: "[The bundler] will even put known framework javascript files first in the bundle automatically, such as jQuery or Prototype scripts, to make sure they run before your own code which uses their types gets executed"

ravndal Over a year ago

The spesific order is: jquery.js jquery-min.js jquery-* jquery-ui* jquery.ui* jquery.unobtrusive* jquery.validate* modernizr-* dojo.* mootools-core* mootools-* prototype.js prototype-* scriptaculous-* ext.js ext-*

Jaider Over a year ago

here is where programming is not fun. why VS make this complicated?

John Culviner Over a year ago

The fact that this exists blows my mind with how stupid it is. Really.. the bundler knows better how to order my dependencies better than I've typed them? Gulp.js (or even Grunt) FTW!

|

Sebastián Rojas · Accepted Answer · 2015-09-17 06:32:49Z

31

In the last version of MVC 5 (at october 27 of 2014), yo should use this class instead:

class AsIsBundleOrderer : IBundleOrderer
{
    public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
    {
        return files;
    }
}

And create the bundle like the other response:

var bundle = new ScriptBundle("~/bundles/globalization")
.Include("~/Scripts/globalize/globalize.js")
.Include("~/Scripts/globalize/cultures/globalize.culture.es-CL.js")
.Include("~/Scripts/jquery.validate.globalize.js");

bundle.Orderer = new AsIsBundleOrderer();

bundles.Add(bundle);

edited Sep 17, 2015 at 6:32

answered Oct 28, 2014 at 6:24

Sebastián Rojas

2,9201 gold badge30 silver badges36 bronze badges

4 Comments

PussInBoots Over a year ago

Where can I find this info? Can you provide a link please?

Sebastián Rojas Over a year ago

I just try to use the method of the current response for this question but I found my selkf with an error in ASP.NET MVC 5, so I check the IBundleOrderer interface and made the changes

Legends Over a year ago

There is no Orderer Property. I am using MVC 5.2.x

Sebastián Rojas Over a year ago

I just test it with MVC 5.2.3 and tehres is the Orderer Property.

Ramin Bateni Parvar · Accepted Answer · 2019-03-16 11:41:59Z

30

To reduce the codes during creating bundles, I suggest you create an extension method.

Require infrastructure classes:

class NonOrderingBundleOrderer : IBundleOrderer
{
    public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
    {
        return files;
    }
}


static class BundleExtentions
{
    public static Bundle NonOrdering(this Bundle bundle)
    {
        bundle.Orderer=new NonOrderingBundleOrderer();
        return bundle;
    }
}

Now simply use it like this:

All in one command 😎

bundles.Add(new ScriptBundle("~/bundles/jqueryval")
               .NonOrdering()
               .Include(
                    "~/Scripts/globalize/globalize.js",
                    "~/Scripts/globalize/cultures/globalize.culture.es-CL.js",
                    //...
                );

edited Mar 16, 2019 at 11:41

answered Aug 3, 2016 at 10:32

Ramin Bateni Parvar

17.6k13 gold badges80 silver badges102 bronze badges

1 Comment

Aruna Over a year ago

Nice way of thinking!

Collectives™ on Stack Overflow

ASP.NET MVC - Bundle Config order

3 Answers 3

10 Comments

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related