Absolute URL in ASP bundle

Question

I use a jQuery library for Google Maps, and it depends on the Google scripts to be loaded first. I'd like to be able to include both in the bundle as such:

  bundles.Add(new ScriptBundle("myfoobundle").Include(
    "http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places",
    "~/scripts/jquery.fooplugin-{version}.js"
  ));

This doesn't seem to work (throws an exception complaining about the first string). And one may say that this shouldn't work because that absolute URL is not meant to be minified/bundled.

But the current approach is a hassle, as I need to ensure that the dependencies are correct, and that happens in different places (half the problem in the bundling code, the other half in the view).

Would be nice to have a 1-step solution as above. Do I have any options in this regard?

UPDATE:

To address the comments regarding using a CDN as a solution: if I specify bundles.UseCdn = true it has no effect, and I still get the exception The URL 'http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places' is not valid. Only application relative URLs (~/url) are allowed. Also I'm unsure what the implication of doing that is in the first place, because I already use CDN support for jQuery, etc., so unsure how that would conflict with my use case.

Rockabilly

what does the exception about the first string say? if you set UseCdn to true, your code should work. – Counterproposal

@rob It doesn't work with UseCdn enabled – Legion

asp bundle is blue sheet – Pandemic

The behavior that I've noticed is that bundles.UseCdn = true AND your compilation method under system.web must be false (<compilation debug="false" targetFramework="4.5.2" />). Afterwards, the CDN path is output to the page. – Latchkey

Answer 1

Currently you would have to include a local copy of the jquery that you are depending on inside of the bundle, or you would have to manage the script tags as you mention. We are aware of this kind of depedency management issue and it falls under the category of asset management which we are tracking with this work item on codeplex

Time

Thanks for the definitive answer Hao! I hope you guys get round to this soon. All I was looking for is a way to include a remote script into a bundle (not anything complex as is explained in that codeplex workitem. – Rockabilly

Answer 2

If you are using a version of System.Web.Optimization >= 1.1.2, there is a new convenient way of overriding the url's for Styles and Scripts. In the example below, I am grabbing a CdnBaseUrl from web.config to use as the base url for all scripts and stylesheets:

public class BundleConfig
{
    private static readonly string BaseUrl = ConfigurationManager.AppSettings["CdnBaseUrl"];

    public static void RegisterBundles(BundleCollection bundles)
    {
        // This is the new hotness!!
        Styles.DefaultTagFormat = "<link href=\"" + BaseUrl + "{0}\" rel=\"stylesheet\"/>";
        Scripts.DefaultTagFormat = "<script src=\"" + BaseUrl + "{0}\"></script>";

        bundles.Add(new ScriptBundle("~/bundles/js").Include(
            "Your scripts here..."
        ));

        bundles.Add(new StyleBundle("~/bundles/css").Include(
            "Your css files here..."
        ));
    }
}

More info on static site (CDN) optimization

Trauma

Answer 3

Based on the MVC tutorials, your syntax is incorrect for creating a bundle from a CDN. And as others have said, ensure that you have the bundles.UseCdn = true; property set. Using the example on the MVC site - your code should reflect the following:

public static void RegisterBundles(BundleCollection bundles)
{
   bundles.UseCdn = true;   //enable CDN support
   //add link to jquery on the CDN
   var jqueryCdnPath = "http://maps.googleapis.com/maps/api/js?sensor=false&libraries=places";
   bundles.Add(new ScriptBundle("myfoobundle", jqueryCdnPath).Include(
                "~/Scripts/jquery-{version}.js"));
}

Sard

This code will allow me to load jQuery from a CDN, which I already do. What I want is to include some other unrelated library (the Google Maps stuff) as an absolute URL in the appropriate bundle. – Rockabilly

Answer 4

If it is just a matter of getting absolute url in bundle then you can go for this.

public static class Extensions
    {
        public static IHtmlString RenderScript(this UrlHelper helper, params string[] paths)
        {
            string scripts = System.Web.Optimization.Scripts.Render(paths).ToHtmlString();
            string hostName = HttpContext.Current.Request.Url.Scheme + Uri.SchemeDelimiter + HttpContext.Current.Request.Url.Authority;
            string replaced = Regex.Replace(scripts, "src=\"/", "src=\"" + hostName + "/", RegexOptions.Multiline | RegexOptions.IgnoreCase);
            return new HtmlString(replaced);
        }
    }

This will basically take the bahvior from Scripts.Render and then apply absolute urls to it. Then in the view you have to write

  @Url.RenderScript("~/bundles/jquery")

instead of

  @Scripts.Render("~/bundles/jquery")

Enjoy coding!!...

Ignatzia

Thanks Dhrumil! This helped me while I was trying to using async tag with bundled jquery files. – Lizalizabeth

Answer 5

I tried this as suggested and it didn't work:

string googleMapsApiCDN = "http://maps.google.com/maps/api/js?sensor=false&language=en";
        bundles.Add(new ScriptBundle("~/bundles/gmap3", googleMapsApiCDN).Include(
                    "~/Scripts/GMap3/gmap3.min.js",         // GMap3 library
                    "~/Scripts/GMap3/mygmap3-about.js"      // Pops up and configures     
GMap3 on About page
                    ));

The mygmap3-about.js script was rendered but the gmap3.min.js and the CDN script from google where both excluded.

Exhaustless

Answer 6

Have you tried enabling CDN support and seeing if that allows the absolute URL to work:

bundles.UseCdn = true;

Withy

Not sure if it answers the questions but its good to know there's an option like this. – Zany