Sizzlin’ with jQuery Presentation Solution

For those of you that attended my presentation at the Twin Cities Developer’s Guild meeting on November 10, 2009, I hope you found it interesting.  As I mentioned at the end of that presentation, I am posting the solution files for you to download and play with.  This is a Visual Studio 2008 solution, using ASP.NET MVC and jQuery.

Enjoy!

jquery_start _finish.zip (7.90 mb)

Share

Rendering a Spark partial view to a string or JSONP with ASP.NET MVC

I am working on a web app that will involve injecting a widget from one domain into another.  The goal is to include a small javascript snippet on the destination page and make an AJAX call to load a widget from the hosting domain.  Ideally, it would be a widget coded in html, rather than pure javascript, so it is easier to work with when changing the html structure.

I wanted the host site to utilize the ASP.NET MVC framework to take advantage of all the benefits that it provides.  I also decided that I wanted to use a custom view engine, called Spark, because I have been working with it as part of the MarketWatch 5.0 team (check out this post by the architect of MW and author of Spark, Louis DeJardin) and have been quite impressed with it.

By utilizing MVC and Spark, I am able to create a partial view that can be inserted into any page on the host site and, more importantly, use that same partial as my cross-domain widget using a little elbow grease in the controller.  The trick here is that modern browsers prevent straight up AJAX loading from a domain other than the one you are currently in.  To pull off the call to another domain, I had to utilize JSONP (JSON with Padding).  JSONP is essentially JSON wrapped up as a callback function.  You’ll see what I mean shortly.

For this example, we are going to use an extremely well thought out partial view with an exceedingly clever name: _Blah.spark (as follows)

To render the Spark partial view to JSONP, it first needs to be rendered to a string.  That seems simple enough, but it is a little more complex than one would expect.  Essentially, you have to recreate the view generation that ASP.NET MVC does for you automagically.  To do this, I turned to a friend and co-worker of mine, Donn Felker.  Since Donn is also a Spark expert, I asked if he had any idea how to pull this off.  Turns out that I was in luck, this was his suggestion:

This code renders the Spark view to a string and returns it as straight up string content, using the ContentResult.  If you found this post hoping to learn how convert a Spark partial to a string, then you are finished.  If you are hoping to convert it to JSONP, then there is a little bit more to be done.

What we need to do to get that string into JSONP is wrap it up with some JSON and a callback function.  So, instead of returning the rendered view in a ContentResult, we need to do some more work to it (please excuse the formatting):

Two things to take note of…  First, I needed to remove the carriage return and line feed, “\r\n”, from the end of the string rendered from the writer.  Leaving them in there would just screw with the AJAX response.  Second, I pulled the name of the JSONP callback function from the query string parameters and added that to the beginning of the JSONP.  Also, when doing string formatting, I usually prefer to use string.Format().  In this case, since part of what we are doing is rendering JSON, we would have conflicts with the { and } characters in the format string.

Now, let’s merge those two together to show you the final result:

So, there you have it.  When your AJAX call receives this and the callback function is called, you can find the html of the Spark partial view in the variable ‘html’.

I hope this was as helpful for you as it was for me.  I would like to thank Donn Felker for providing me with the majority of the code presented here.  So, thanks Donn!  Consider the keg tapped.

Share