jQuery Ajax call – sending json data to an action

 

UPDATE: Looks like I made an oversight here  :)  The Content-type is not being sent as json, which is why it works without the filter after all.

jQuery will require the additional parameter in the ajax call:

contentType: "application/json; charset=utf-8",

$.ajax({
                url: ‘/Home/Save’,
                type: ‘POST’,
                data: person,
                dataType: ‘json’,
                contentType: "application/json; charset=utf-8",
                beforeSend: function() { $("#saveStatus").html("Saving").show(); },
                success: function(result) {
                    alert(result.Result);
                    $("#saveStatus").html(result.Result).show();
                }
            });

 

It is possible to convert this InputStream using a DataContractJsonSerializer

As mentioned by Mike : http://msmvps.com/blogs/omar/archive/2008/10/03/create-rest-api-using-asp-net-mvc-that-speaks-both-json-and-plain-xml.aspx

So, we’re going to need that filter after all  🙂

I’m only going to modify it slightly, more a preference by me I guess – to use the Json.NET library

I’ll add this to ‘Part II’… coming right up

———-

Mike made a comment in one of my posts about sending json data to an action.  I was reading his blog post on it here ‘Passing JSON into an ASP.NET MVC Controller’ – very good stuff!

However, in one part of the post Mike comments that ‘if you try to pass a JSON object to MVC it falls apart’.

Well, I thought I’d dig in and try it out with our favorite friend jQuery.ajax

First let’s good at the sample with a few setup screens:

I added the following action to the HomeController:

image

In my sample you load the “form” with http://localhost/Home/Person which returns the ‘PersonView’

image

Clicking on the JsonPostSave button :

image 

will make the following ajax call:

image

There are two key elements here: (1) I’m passing the data, a ‘person’ json object,  in through the ‘data’ property of the ajax object and setting the dataType to ‘json’.   I’m expecting json back in my ‘success’ callback, which will be an object with a ‘Result’ property.

I’m also making a call to the url ‘Home/Save’ which will call the HomeController’s Save action:

image

In this sample, I call update model, which maps the 2 input elements to the Person object.

(nothing fancy, it’s my ‘model’  – looks like:

image )

I could create a Model binder here – as you see in my comments.  Another alternative is to pass them to the action as parameters as well (ie. Save(string FirstName, string LastName) – all three will work.

My ‘success’ call above is expecting a ‘result.Result’ – and I’m supplying this by using the return Json and creating an anonymous object with a property ‘Result’.

A few comments:

Let’s look at Firebug and see what is going on:

Here is my Header:

image

Key here is ‘Content-Type’ is application/json in the Response Header as well as ‘application/json’ in my Request Header.

The post data:

image

And the Response:

image

I think this shows you can send json data to a Action result without the Filter, although I do like those cool filters  🙂

Here is the source code!

(update: sorry for the long load time – I need to cut back on the images!)

Advertisements

5 thoughts on “jQuery Ajax call – sending json data to an action

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