asp mvc jquery from cdn with fallback to localhost

Paul Irish has some nice code for loading jquery from cdn but then falling back to localhost if it cannot be loaded from cdn. Check it out here.

For asp mvc you usually also want jquery.valdiater and possibly unobtrusive validation as well. Here is an html helper to generate html mark up that handles loading these via cdn with fallback

The helper

	using System;
	using System.Web.Mvc;
	using System.Web.Mvc.Html;
	using System.Web.Routing;
	public static class HtmlHelperExtensions
	{
	/// <summary>
	/// render script tag to include javascript file from cdn, but fallback to local if cannot be loaded
	/// </summary>
	/// <param name="helper"></param>
	/// <param name="cdnPath">start with // to handle either http or https</param>
	/// <param name="localPath">start with ~/</param>
	/// <param name="javascriptCondition">javascript condition, if true then your browser will load the local file</param>
	/// <returns>
	/// <script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	/// <script>!window.jQuery && document.write(unescape('%3Cscript src="/Scripts/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>
	/// </returns>
	/// <seealso cref="http://paulirish.com/2010/the-protocol-relative-url/"/>
	public static MvcHtmlString JavascriptIncludeFromCdnWithFallback(this HtmlHelper helper, string cdnPath, string localPath, string javascriptCondition)
	{
	var urlHelper = new UrlHelper(helper.ViewContext.RequestContext);
	var cdnBuilder = new TagBuilder("script");
	var localBuilder = new TagBuilder("script");
	// src for cdn resource
	cdnBuilder.Attributes.Add("src", cdnPath);
	// js to build a local script tag if needed
	localBuilder.InnerHtml = String.Format
	(
	"{0} && document.write(unescape('%3Cscript src=\"{1}\"%3E%3C/script%3E'))",
	javascriptCondition,
	urlHelper.Content(localPath)
	);
	// return markup
	var built = String.Format("{0}\n\t{1}", cdnBuilder.ToString(TagRenderMode.Normal), localBuilder.ToString(TagRenderMode.Normal));
	return MvcHtmlString.Create(built);
	}
	}

view raw cdn-with-fallback.cs hosted with ❤ by GitHub

Usage, most likely from your layout file

	@Html.JavascriptIncludeFromCdnWithFallback(
	"//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js",
	"~/Scripts/lib/jquery/jquery-1.4.4.min.js",
	"!window.jQuery"
	)
	@Html.JavascriptIncludeFromCdnWithFallback(
	"//ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js",
	"~/Scripts/lib/jquery/jquery.validate.min.js",
	"!window.jQuery.validator"
	)
	@Html.JavascriptIncludeFromCdnWithFallback(
	"//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js",
	"~/Scripts/lib/jquery/jquery.validate.unobtrusive.min.js",
	"!window.jQuery.validator.unobtrusive"
	)

view raw cdn-with-fallback.cshtml hosted with ❤ by GitHub

And the rendered html

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script>!window.jQuery && document.write(unescape('%3Cscript src="/Scripts/lib/jquery/jquery-1.4.4.min.js"%3E%3C/script%3E'))</script>
	<script src="//ajax.aspnetcdn.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
	<script>!window.jQuery.validator && document.write(unescape('%3Cscript src="/Scripts/lib/jquery/jquery.validate.min.js"%3E%3C/script%3E'))</script>
	<script src="//ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.validate.unobtrusive.min.js"></script>
	<script>!window.jQuery.validator.unobtrusive && document.write(unescape('%3Cscript src="/Scripts/lib/jquery/jquery.validate.unobtrusive.min.js"%3E%3C/script%3E'))</script>

view raw cdn-with-fallback-rendered.html hosted with ❤ by GitHub