ASP.NET MVC - Bundle Config order
Javascriptasp.netasp.net MvcJavascript Problem Overview
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?
Javascript Solutions
Solution 1 - Javascript
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:
Solution 2 - Javascript
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);
Solution 3 - Javascript
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",
//...
);