jQuery and Asp.NET MVC – sending Json to an Action – Revisited

Part I here – where I prove myself wrong …. so, let’s refactor with some help from Omar Al Zabir

First, the new javascript:

image

The main difference here is that the contentType must be spelled out explicitly. 

Secondly – the Json object must be wrapping up in a string.

Mark Gibson has a jQuery plugin to the rescue – $.ToJSON:

Mark Gibson put together a re-purposed json.js direct from Douglas Crockford’s early implementation of json.js as a jQuery plugin located here. I simply took Douglas Crockford’s ‘2008-02-14′ json2.js release and did the same re-purposing as Mark Gibson did just to have the updated features of the new json2.js code. One of those features included the ability to detect enumerable object to differentiate between Array() and Object(), [] vs {}.

The code below only offers the $.toJSON() jQuery function to take a Javascript object serialize it into a JSON string and return said string. This is hugely important for our AJAX functionality which posts JSON data instead of itemized form fields in the POST data string.

 

So, now we need to pass this data to our Person object on the action.  But we need to get access to that data and serialize it to the object – this is where Omar gets all the credit, but I modify the Json Serializer to use Json.NET:

image

I must say, every time I dig into the Action Filter’s I learn something new – and thanks to Omar, I realized that you can take a parameter on the action and set it’s value – very slick – with the filterContext.ActionParameters call – (side note: now I have to re-read how Model Binders work as well)

So, we read the inputstream (Stream object) into a string – which is our json string – and then we Deserialize the object into the type we set on the filter  – and take that type and pass it to the parameter defined:

Here is the updated Action method:

image

Presto!  The magic occurs and we now have a Person object that is filled.

Thanks for getting me started Mike, thanks to Omar for his good article on filters, thanks to Ryan for pointing out the ‘hey, you screenshot shows it’s not json and you said it did’ (oops – lol)*, and thanks to Json.NET and the ToJson .js jQuery plugin!

It’s late here, so goodnight and enjoy – I’ll update the code :

Source code

(for Ryan)

image

Advertisements

9 thoughts on “jQuery and Asp.NET MVC – sending Json to an Action – Revisited

  1. Thanks, very nice overview for using json, jquey with asp.net mvc. Far better approach then microsofts ajax libs ect.

  2. Ok this is a very nice example but what if my JSON contains multiple instance of Person? What I mean is I use extJS Editable Grid to modify multiple Person records and then one save button to AJAX submit the entire grid meaning JSON contains more than 1 Person? How would I desirialize this JSON into, say a list of products (List)?

    Thanks in advance!

  3. How Can you integrate ModelBinding Validation into the mix? I tried using The DataAnnotations model, but it just doesnt work with this scheme.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s