Posting JSON data via jQuery to ASP .NET MVC 4 controller action

Question

I'm having trouble trying to pass a complex JSON object to an MVC 4 controller action. As the JSON content is variable, I don't want MVC to map individual properties/elements of the JSON to parameters in the action method's parameter list. I just want to get the data as a single JSON string parameter in the controller action.

Here's the signature of my action method:

    [HttpPost]     [ValidateInput(false)]     public string ConvertLogInfoToXml(string jsonOfLog) 

And here's my attempt to post some JSON data, from my browser:

    data = {prop: 1, myArray: [1, "two", 3]};      //'data' is much more complicated in my real application     json = {jsonOfLog: data};      $.ajax({         type: 'POST',         url: "Home/ConvertLogInfoToXml",         data: JSON.stringify(json),         success: function (returnPayload) {             console && console.log ("request succeeded");         },         error: function (xhr, ajaxOptions, thrownError) {             console && console.log ("request failed");         },         dataType: "xml",         contentType: "application/json",                     processData: false,         async: false     }); 

When I hit my breakpoint at the beginning of the ConvertLogInfoToXML method, jsonOfLog is null.

If I change what 'json' variable is set to in the JavaScript to have the jsonOfLog property be a simple string, e.g. :

json = { jsonOfLog: "simple string" }; 

then when my breakpoint at the beginning of the ConvertLogInfoToXML method is hit, jsonOfLog is the value of the string (e.g. "simple string").

I tried changing the type of the jsonOfLog parameter in the action method to be of type object:

    [HttpPost]     [ValidateInput(false)]     public string ConvertLogInfoToXml(object jsonOfLog) 

Now, with the original JavaScript code (where I'm passing a more complex 'data' object), jsonOfLog gets the value of {object}. But the debugger doesn't show any more details in a watch window, and I don't know what methods I can use to operate on this variable.

How do I pass JSON data to a MVC controller, where the data passed is a stringified complex object?

Thanks, Notre

Answer 1

The problem is your dataType and the format of your data parameter. I just tested this in a sandbox and the following works:

C#

    [HttpPost]     public string ConvertLogInfoToXml(string jsonOfLog)     {         return Convert.ToString(jsonOfLog);     } 

javascript

<input type="button" onclick="test()"/>      <script type="text/javascript">          function test() {             data = { prop: 1, myArray: [1, "two", 3] };             //'data' is much more complicated in my real application             var jsonOfLog = JSON.stringify(data);              $.ajax({                 type: 'POST',                 dataType: 'text',                 url: "Home/ConvertLogInfoToXml",                 data: "jsonOfLog=" + jsonOfLog,                 success: function (returnPayload) {                     console && console.log("request succeeded");                 },                 error: function (xhr, ajaxOptions, thrownError) {                     console && console.log("request failed");                 },                  processData: false,                 async: false             });         }      </script> 

Pay special attention to data, when sending text, you need to send a variable that matches the name of your parameter. It's not pretty, but it will get you your coveted unformatted string.

When running this, jsonOfLog looks like this in the server function:

    jsonOfLog   "{\"prop\":1,\"myArray\":[1,\"two\",3]}"    string 

The HTTP POST header:

Key Value Request POST /Home/ConvertLogInfoToXml HTTP/1.1 Accept  text/plain, */*; q=0.01 Content-Type    application/x-www-form-urlencoded; charset=UTF-8 X-Requested-With    XMLHttpRequest Referer http://localhost:50189/ Accept-Language en-US Accept-Encoding gzip, deflate User-Agent  Mozilla/5.0 (compatible; MSIE 10.0; Windows NT 6.2; WOW64; Trident/6.0) Host    localhost:50189 Content-Length  42 DNT 1 Connection  Keep-Alive Cache-Control   no-cache Cookie  EnableSSOUser=admin 

The HTTP POST body:

jsonOfLog={"prop":1,"myArray":[1,"two",3]} 

The response header:

Key Value Cache-Control   private Content-Type    text/html; charset=utf-8 Date    Fri, 28 Jun 2013 18:49:24 GMT Response    HTTP/1.1 200 OK Server  Microsoft-IIS/8.0 X-AspNet-Version    4.0.30319 X-AspNetMvc-Version 4.0 X-Powered-By    ASP.NET X-SourceFiles   =?UTF-8?B?XFxwc2ZcaG9tZVxkb2N1bWVudHNcdmlzdWFsIHN0dWRpbyAyMDEyXFByb2plY3RzXE12YzRQbGF5Z3JvdW5kXE12YzRQbGF5Z3JvdW5kXEhvbWVcQ29udmVydExvZ0luZm9Ub1htbA==?= 

The response body:

{"prop":1,"myArray":[1,"two",3]} 

Answer 2

I think you'll find your answer if you refer to this post: Deserialize JSON into C# dynamic object?

There are various ways of achieving what you want here. The System.Web.Helpers.Json approach (a few answers down) seems to be the simplest.