Passing variables from your Controller to your JavaScript in ASP.NET MVC

GitHub link to NGon: https://github.com/brooklynDev/NGon

Last night I was watching the latest RailCast screen cast, where Ryan showed a cool technique in Ruby on Rails on how to pass data from your Controller straight to your JavaScript:

http://railscasts.com/episodes/324-passing-data-to-javascript

Essentially, it involved using a gem called Gon which enabled you to do this in your controller:

	#Controller
	def HomeController < ApplicationController
	def index
	gon.myVar = 100
	end
	end
	#home.html.erb
	<%= include_gon %>
	<script type="text/javascript">
	$(function(){
	alert(gon.myVar);
	})
	</script>

view raw gistfile1.rb hosted with ❤ by GitHub

I thought that was pretty cool, and it'd be awesome to have the same thing in ASP.NET MVC. Enter NGon. The code is actually very simple, but I think the usage is quite elegant (It's up on GitHub here, complete with Unit Tests and a sample app).

Usage:

The first step is to register the NGonActionFilterAttribute in the global filters in your Global.asax.cs page:

	protected void Application_Start()
	{
	AreaRegistration.RegisterAllAreas();
	GlobalFilters.Filters.Add(new NGonActionFilterAttribute());
	RegisterGlobalFilters(GlobalFilters.Filters);
	RegisterRoutes(RouteTable.Routes);
	}

view raw gistfile1.cs hosted with ❤ by GitHub

Then, in your Controller, you do this:

	public class HomeController : Controller
	{
	public ActionResult Index()
	{
	ViewBag.NGon.SomeValue = 100;
	return View();
	}
	}

view raw gistfile1.cs hosted with ❤ by GitHub

Next, in your HTML page (probably in your Layout.cshtml page so it's available everywhere) you add this line:


@Html.IncludeNGon()

At this point, you'll now have access to the values in your javascript:

	<script type="text/javascript">
	$(function () {
	$("#button").click(function () {
	alert(ngon.SomeValue);
	});
	}); </script>

view raw gistfile1.js hosted with ❤ by GitHub

The cool thing is that it works on more than just simple types. It works on any object which in turn gets serialized into JSON (using the JavascriptSerializer). This allows you to do something like this:

	public class HomeController : Controller
	{
	public ActionResult Index()
	{
	var person = new Person { FirstName = "John", LastName = "Doe", Age = 30 };
	ViewBag.NGon.Person = person;
	return View();
	}
	}

view raw gistfile1.cs hosted with ❤ by GitHub

and in your javascript:

	<script type="text/javascript">
	$(function () {
	$("#button").click(function () {
	var person = ngon.Person;
	var div = $("#output");
	div.html('');
	div.append("FirstName: " + person.FirstName);
	div.append(", LastName: " + person.LastName);
	div.append(", Age: " + person.Age);
	});
	});
	</script>

view raw gistfile1.js hosted with ❤ by GitHub

Under the hood:

It's actually all quite simple. The first thing that happpens, is when an action gets called, the NGonActionFilterAttribute fires, and it creates a new ExpandoObject called NGon on the Controllers ViewBag property:

	public class NGonActionFilterAttribute : ActionFilterAttribute
	{
	public override void OnActionExecuting(ActionExecutingContext filterContext)
	{
	filterContext.Controller.ViewBag.NGon = new ExpandoObject();
	base.OnActionExecuting(filterContext);
	}
	}

view raw gistfile1.cs hosted with ❤ by GitHub

Then, as you keep adding items to the ViewBag.NGon property, you're adding it to this underlying ExpandoObject. Finally, when you call the IncludeNGon in the HTML, this is where all the magic happens:

	public static class HtmlHelperExtensions
	{
	public static IHtmlString IncludeNGon(this HtmlHelper helper, string @namespace = "ngon")
	{
	var viewData = helper.ViewContext.ViewData;
	if (viewData == null)
	{
	return MvcHtmlString.Empty;
	}
	var ngon = viewData["NGon"] as ExpandoObject;
	if (ngon == null)
	{
	throw new InvalidOperationException("Cannot find NGon in ViewBag. Did you remember to add the global NGonActionFilterAttribute?");
	}
	var tag = new TagBuilder("script");
	tag.Attributes.Add(new KeyValuePair<string, string>("type", "text/javascript"));
	var builder = new StringBuilder();
	builder.AppendFormat("window.{0}={{}};", @namespace);
	var serializer = new JavaScriptSerializer();
	foreach (var prop in ngon)
	{
	builder.AppendFormat("{0}.{1}={2};", @namespace, prop.Key, helper.Raw(serializer.Serialize(prop.Value)));
	}
	tag.InnerHtml = builder.ToString();
	return new HtmlString(tag.ToString());
	}
	}

view raw gistfile1.cs hosted with ❤ by GitHub

What it does is, it first creates an empty javascript object on the window object. Then, for each property in the ViewBag.NGon property, it adds the serialized version of it to that javascript object on the window object. What you end up with, is something like this:

<script type="text/javascript">window.ngon={};ngon.Person={"FirstName":"John","LastName":"Doe","Age":30};</script>

view raw gistfile1.mustache hosted with ❤ by GitHub

Cool huh? Drop me a comment, let me know what you think!