I'm working on an ASP.NET MVC 4 app. This app leverages bundling to improve performance. Previously, the app was using jquery.mobile-1.1.0.js. Everything worked fine. However, I've upgraded to JQuery Mobile 1.2 and when I load my screen, I always see a wait spinner. I've pinpointed it to the fact that both the standard and the minified versions are being referenced. When I look in my view-source after the page is loaded, I see the following at the top:
<script src="/Scripts/jquery.mobile-1.2.0.js"></script>
<script src="/Scripts/jquery.mobile-1.2.0.min.js"></script>
From what I can tell, this was generated from the following in my ASP.NET MVC .cshtml file
#Scripts.Render("~/bundles/jquerymobile")
In my BundleConfig.cs file, I have the following definition:
bundles.Add(new ScriptBundle("~/bundles/jquerymobile").Include("~/Scripts/jquery.mobile*"));
Essentially, I want to use the normal version when the debug="true" flag is set in my web.config compilation setting. However, when debug="false", I want to use the minified version. What am I doing wrong?
Thank you
This should happen automatically for you already (assuing the fileextensionreplacement lists still have the default "min" entry for when optimizations are enabled).
As a workaround, you could try this instead which should also work:
.Include("~/Scripts/jquery.mobile-{version}.js"));
This basically is similar to your * except it will regex match for version strings. Note, both this and what you have require that you only have the latest jquery in your Scripts folder, if you still have the 1.1 version there, you will end up with both versions in your page.
Related
I am getting a jQuery is not defined error from jQuery validate being loaded before jquery.
I am not sure if this is involved with using ASP.net Boilerplate or not, though in the bundle config I have the following:
bundles.Add(
new ScriptBundle("~/Bundles/vendor/js/bottom")
.Include(
"~/lib/json2/json2.js",
"~/lib/jquery/dist/jquery.min.js",
"~/lib/bootstrap/dist/js/bootstrap.min.js",
"~/lib/moment/min/moment-with-locales.min.js",
"~/lib/jquery-validation/dist/jquery.validate.min.js",
"~/lib/blockUI/jquery.blockUI.js",
"~/lib/toastr/toastr.min.js",
"~/lib/sweetalert/dist/sweetalert.min.js",
"~/lib/spin.js/spin.min.js",
"~/lib/spin.js/jquery.spin.js",
"~/lib/bootstrap-select/dist/js/bootstrap-select.min.js",
"~/lib/jquery-slimscroll/jquery.slimscroll.min.js",
"~/lib/Waves/dist/waves.min.js",
"~/lib/push.js/push.min.js",
"~/Abp/Framework/scripts/abp.js",
"~/Abp/Framework/scripts/libs/abp.jquery.js",
"~/Abp/Framework/scripts/libs/abp.toastr.js",
"~/Abp/Framework/scripts/libs/abp.blockUI.js",
"~/Abp/Framework/scripts/libs/abp.spin.js",
"~/Abp/Framework/scripts/libs/abp.sweet-alert.js",
"~/lib/flatpickr/dist/flatpickr.min.js",
"~/js/admin.js",
"~/js/main.js",
"~/Scripts/jquery.signalR-2.2.3.js",
"~/Views/Shared/_Layout.js"
)
);
So I am using the minified version of jQuery and the minified version of jQuery.Validate. As soon as I use the minified version of jQuery and I load a page, jquery.validate.min.js is the first script that gets loaded in and as expected it throws a jQuery is not defined. error.
Though as soon as I do not use the minified version of jQuery (jquery.js) the scripts are loaded up in the correct order.
Is ASP.NET Boilerplate using any custom file ordering in the bundles that I do not know of? I do believe that MVC, but could be wrong, that it will process explicitly named scripts first in the bundle, then symbolically named scripts. Though these are all explicitly named scripts.
Is there something I am missing or some solution on how I can solve this?
I ended up using an answer from here: https://stackoverflow.com/a/11981271/4201348
So pretty much I defined my own BundleOrderer called AsIsBundleOrder that implementsIBundleOrderer that just returned the files as is, and set that as the orderer to use in the BundleConfig.
That works, though still doesn't give me a complete answer as to WHY (the important reason in my mind) the default orderer was only promoting jQuery validate to be before jQuery only when I used the minified version of jQuery.
Just upgraded a very old project from MVC 4 to 5 and now after the upgrade the Razor Partial views which were working fine no longer work.
By this I mean that in the partial views there is a Script file that is called at the bottom:
<script src="~/Scripts/simAvail.js" type="text/javascript"></script>
And this was loading the JS and in that file some JQuery added CSS etc as needed to the elements on the page. However after the upgrade this JS file is no longer loaded and I use this method on many pages in the project so wondered if anyone knows the reason why.
The data in the Partial view is loaded and displayed but all the styling and reading/posting of the changes via Ajax is no longer there as this is what the JS file adds to the page.
Thanks
I Managed to fix this it turns out that when the upgrade to MVC5 happened part of the process as detailed on the MS instructions was to re-install all the Nuget's. This part actually installed the latest versions of all the JS packages like JQuery/Knockout etc without me noticing.
This then caused there to be two versions of everything being loaded and thus caused the issue. SO I deleted the old version of the JS packages and back running.
I am about to start work on a non SPA ASP.NET MVC application and I was wondering what the best practices are for bundling and minifying.
I've been using webpack for react but this does not seem to fit in with a non SPA website or would this be a good fit?
I've used requirejs in the past where I used the data-main attribute to specify a file for the current view but I'm not sure how this would work with minified code where we would potentially only have 1 file.
I know .NET has its own ScriptBundler but is this still supported and should I perhaps use gulp instead?
If you're using ASP.NET MVC 5 or lower, then you can use both gulp and the script/style bundlers.
For instance, you could use gulp to do the minifying and use the script/style bundling to do the rest. This way you can use the non-minified scripts and styles during development (debug mode) whereas you only use the minified and bundled scripts in release mode.
Depending on your requirements, you can make multiple bundles and add those to your views. Performance wise, I'd suggest you use 2 bundles per page: 1 script bundle (near the closing body tag) and 1 style bundle (in the head section). Don't forget about common scripts and styles: those can be located the _Layout partial view. So you end up with 2 bundles per type per page.
I use this approach for my own projects. However, for ASP.NET Core applications, you should consider only using gulp. As far as I know, there isn't a real replacement for the bundling as we know it in ASP.NET MVC 5 applications, it just works a bit differently. But if you use gulp already, then you won't have big problems migrating to asp.net core (which you will at some point I guess).
I want to use a CDN to reference jQuery for my ASP.Net MVC app.
I do not want to tie the app to a specific version of jQuery.
So, why does every example I can find, seem to reference a specific jQuery version in the CDN path but then use the version agnostic syntax in the '.Include' for the ScriptBundle?
For example:
var cdnPath = "http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js";
bundles.Add(new ScriptBundle("~/bundles/jquery", cdnPath)
.Include( "~/Scripts/jquery-{version}.js"));
Why does the CDN path not simply point to a directory in which multiple jQuery versions may reside and then the CDN server return the latest jQuery version (just as my MVC app would do when fetching scripts from bundles locally).
Or if that is not possible, then why bother with the version agnostic syntax within the .Include() method?
Some major versions of Jquery are not backward compatible. For example jQuery v2 doesn't run on IE 6/7/8. So if your project has to run on those you will have to stick with version 1
EDIT
Include() is for local scripts not the ones in CDN. In case that CDN script could not be fetched for what ever reason, local script is used instead.
I have a project I'm working on and I'm using the Telerik MVC controls. I have the newest open source version.
In my _Layout.cshtml, I have the following line:
#(Html.Telerik().ScriptRegistrar().DefaultGroup(group =>
group.Combined(false)
.Compress(false))
.jQuery(false)
.jQueryValidation(false))
I want to load jQuery and jQueryValidation myself by using Cassette. The above line keeps jQuery from loading in favor of the location and version I've specified.
My problem is that when I bring up a page with a grid on it, the jquery.validation.min.js that exists in the telerik script directory still gets loaded as well as the one I have specified from a different directory.
Why is the ScriptRegistrar still loading jQueryValidation?
There was a bug which caused this erroneous behavior. Try downloading the latest internal build.
Another approach is to replace the jquery.validation.min.js that exists in the telerik script directory with an empty file.