Rectangle 27 8

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

asp.net mvc - Absolute URL in ASP bundle - Stack Overflow

asp.net-mvc asp.net-mvc-4 asp.net-optimization bundling-and-minification
Rectangle 27 5

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

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

asp.net mvc - Absolute URL in ASP bundle - Stack Overflow

asp.net-mvc asp.net-mvc-4 asp.net-optimization bundling-and-minification
Rectangle 27 7

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

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.

asp.net mvc - Absolute URL in ASP bundle - Stack Overflow

asp.net-mvc asp.net-mvc-4 asp.net-optimization bundling-and-minification
Rectangle 27 6

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&amp;libraries=places";
   bundles.Add(new ScriptBundle("myfoobundle", jqueryCdnPath).Include(
                "~/Scripts/jquery-{version}.js"));
}

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.

asp.net mvc - Absolute URL in ASP bundle - Stack Overflow

asp.net-mvc asp.net-mvc-4 asp.net-optimization bundling-and-minification
Rectangle 27 1

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

string googleMapsApiCDN = "http://maps.google.com/maps/api/js?sensor=false&amp;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.

asp.net mvc - Absolute URL in ASP bundle - Stack Overflow

asp.net-mvc asp.net-mvc-4 asp.net-optimization bundling-and-minification
Rectangle 27 39

CssRewriteUrlTransform updates the CSS Url with absolute path, saying so if we use -

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",new CssRewriteUrlTransform()));

and we have following CSS class in "site.css"

.Sandy
{
    background-image: url("Images/Sandy.jpg");
    border: 1px solid #c8c8c8;
    border-radius:4px 4px 4px 4px;
    box-shadow: 1px 1px 8px gray;
    background-position:left;
    background-size:contain;
    -moz-background-size:contain;
    -webkit-background-size:contain;
    -o-background-size:contain;
    background-repeat:no-repeat;
    min-height:100px;
    min-width:100px;
    display:block;
}
-Web site Root
   -Content
   --site.css
   --Images
   ---Sandy.jpg
background-image: url("/Content/Images/Sandy.jpg");

And now if you hosting the website / web application as a website on web server above path will work, because browser will send request for this resource using following Url because of leading '/'

http://<server>/content/images/sandy.jpg

but if you host the website as web application this will create problem. Because browser will still interpret this as absolute Url instead of relative and still send following request to fetch this resource -

http://<server>/content/images/sandy.jpg

So, the solution for this problem is using the relative Url even in CSS file and then remove the CssRewriteUrlTransform from the Bundle config as below -

background-image: url("Images/Sandy.jpg");

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
CSS

asp.net mvc - MVC Bundling and CSS relative URLs - Stack Overflow

css asp.net-mvc relative-path asp.net-mvc-5 bundling-and-minification
Rectangle 27 39

CssRewriteUrlTransform updates the CSS Url with absolute path, saying so if we use -

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css",new CssRewriteUrlTransform()));

and we have following CSS class in "site.css"

.Sandy
{
    background-image: url("Images/Sandy.jpg");
    border: 1px solid #c8c8c8;
    border-radius:4px 4px 4px 4px;
    box-shadow: 1px 1px 8px gray;
    background-position:left;
    background-size:contain;
    -moz-background-size:contain;
    -webkit-background-size:contain;
    -o-background-size:contain;
    background-repeat:no-repeat;
    min-height:100px;
    min-width:100px;
    display:block;
}
-Web site Root
   -Content
   --site.css
   --Images
   ---Sandy.jpg
background-image: url("/Content/Images/Sandy.jpg");

And now if you hosting the website / web application as a website on web server above path will work, because browser will send request for this resource using following Url because of leading '/'

http://<server>/content/images/sandy.jpg

but if you host the website as web application this will create problem. Because browser will still interpret this as absolute Url instead of relative and still send following request to fetch this resource -

http://<server>/content/images/sandy.jpg

So, the solution for this problem is using the relative Url even in CSS file and then remove the CssRewriteUrlTransform from the Bundle config as below -

background-image: url("Images/Sandy.jpg");

bundles.Add(new StyleBundle("~/Content/css").Include("~/Content/site.css"));
CSS

asp.net mvc - MVC Bundling and CSS relative URLs - Stack Overflow

css asp.net-mvc relative-path asp.net-mvc-5 bundling-and-minification
Rectangle 27 70

I am not sure to fully understand your problem, but seeing http://localhost here seems wrong. You should never use an absolute URL for your bundles.

bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/Content/css/*.css", new CssRewriteUrlTransform()));

I was confused with the "VirtualDir" thing, as you are talking about IIS VirtualDir, and I was thinking Bundle VirtualDir! It's true that in this case CssRewriteUrlTransform will rewrite URLs to the Host, not to the Host/VirtualDir URI.

To do that, you have to derive CssRewriteUrlTransform to make it do what you need it to. There is a good discussion here: ASP.NET MVC4 Bundling with Twitter Bootstrap

public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {           
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);           
    }
}

Use this class instead of CssRewriteUrlTransform

The problem appears when your application isn't hosted at the server root, but in a virtual directory. Like /path/to/my/appRoot/.

c# - CssRewriteUrlTransform with or without virtual directory - Stack ...

c# asp.net-mvc-4 bundling-and-minification web-optimization
Rectangle 27 0

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

asp.net mvc - Absolute URL in ASP bundle - Stack Overflow

asp.net-mvc asp.net-mvc-4 asp.net-optimization bundling-and-minification
Rectangle 27 0

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&amp;libraries=places";
   bundles.Add(new ScriptBundle("myfoobundle", jqueryCdnPath).Include(
                "~/Scripts/jquery-{version}.js"));
}

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.

asp.net mvc - Absolute URL in ASP bundle - Stack Overflow

asp.net-mvc asp.net-mvc-4 asp.net-optimization bundling-and-minification
Rectangle 27 0

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

string googleMapsApiCDN = "http://maps.google.com/maps/api/js?sensor=false&amp;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.

asp.net mvc - Absolute URL in ASP bundle - Stack Overflow

asp.net-mvc asp.net-mvc-4 asp.net-optimization bundling-and-minification
Rectangle 27 0

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

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.

asp.net mvc - Absolute URL in ASP bundle - Stack Overflow

asp.net-mvc asp.net-mvc-4 asp.net-optimization bundling-and-minification
Rectangle 27 0

I think this is still under development, check this more recent SO question: Absolute URL in ASP bundle

asp.net mvc 4 - Using multiple CDN links in one StyleBundle - Stack Ov...

asp.net-mvc-4
Rectangle 27 0

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

ASP.NET MVC 4.0 Bundles with Multiple Absolute URLs for Styles - Stack...

asp.net-mvc bundle asp.net-optimization
Rectangle 27 0

I am not sure to fully understand your problem, but seeing http://localhost here seems wrong. You should never use an absolute URL for your bundles.

bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/Content/css/*.css", new CssRewriteUrlTransform()));

I was confused with the "VirtualDir" thing, as you are talking about IIS VirtualDir, and I was thinking Bundle VirtualDir! It's true that in this case CssRewriteUrlTransform will rewrite URLs to the Host, not to the Host/VirtualDir URI.

To do that, you have to derive CssRewriteUrlTransform to make it do what you need it to. There is a good discussion here: ASP.NET MVC4 Bundling with Twitter Bootstrap

public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {           
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);           
    }
}

Use this class instead of CssRewriteUrlTransform

The problem appears when your application isn't hosted at the server root, but in a virtual directory. Like /path/to/my/appRoot/.

This put me on the right track but did not work for url( ) that contained a AbsoluteUri already, i needed to detect that so i added a Uri.TryCreate inside a custom version of CssRewriteUrlTranform instead of using a wrapper.

c# - CssRewriteUrlTransform with or without virtual directory - Stack ...

c# asp.net-mvc-4 bundling-and-minification web-optimization
Rectangle 27 0

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

asp.net mvc - Absolute URL in ASP bundle - Stack Overflow

asp.net-mvc asp.net-mvc-4 asp.net-optimization bundling-and-minification
Rectangle 27 0

I am not sure to fully understand your problem, but seeing http://localhost here seems wrong. You should never use an absolute URL for your bundles.

bundles.Add(new StyleBundle("~/bundles/css").Include(
                "~/Content/css/*.css", new CssRewriteUrlTransform()));

I was confused with the "VirtualDir" thing, as you are talking about IIS VirtualDir, and I was thinking Bundle VirtualDir! It's true that in this case CssRewriteUrlTransform will rewrite URLs to the Host, not to the Host/VirtualDir URI.

To do that, you have to derive CssRewriteUrlTransform to make it do what you need it to. There is a good discussion here: ASP.NET MVC4 Bundling with Twitter Bootstrap

public class CssRewriteUrlTransformWrapper : IItemTransform
{
    public string Process(string includedVirtualPath, string input)
    {           
        return new CssRewriteUrlTransform().Process("~" + VirtualPathUtility.ToAbsolute(includedVirtualPath), input);           
    }
}

Use this class instead of CssRewriteUrlTransform

The problem appears when your application isn't hosted at the server root, but in a virtual directory. Like /path/to/my/appRoot/.

c# - CssRewriteUrlTransform with or without virtual directory - Stack ...

c# asp.net-mvc-4 bundling-and-minification web-optimization
Rectangle 27 0

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

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

asp.net mvc - Absolute URL in ASP bundle - Stack Overflow

asp.net-mvc asp.net-mvc-4 asp.net-optimization bundling-and-minification
Rectangle 27 0

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

asp.net mvc - Absolute URL in ASP bundle - Stack Overflow

asp.net-mvc asp.net-mvc-4 asp.net-optimization bundling-and-minification