Javascript object received as null in mvc controller

Question

Below is my AJAX GET request that is trying to pass few parameters including a javascript object to a mvc controller but the object is always received as null:

 var sort =  { column: 'UserName', order: 'desc' };
 var sortParameter = JSON.stringify(sort);

 $.ajax({
       url: '@Url.Action("GetUsers", "Account")',
       cache: false,
       type: 'GET',
       contentType: 'application/json; charset=utf-8',
       data: { skipRecords: vm.pageIndex * 1000, sortParam: sortParameter },
       success: function (data) {
       }
 });

The controller method looks like below:

[HttpGet]
public JsonResult GetUsers(int skipRecords, Sort sortParam, string userName = null)
{

}

Also below is the Sort class defined:

public class Sort
{
    public string column { get; set; }
    public string order { get; set; }
}

If I dont use JSON.stringify and pass just the javascript object, below is the request that gets sent:

GET /Account/GetUsers?skipRecords=0&sortParam%5Bcolumn%5D=UserName&sortParam%5Border%5D=desc&_=1408990051727 HTTP/1.1

Answer 1

You're probably looking for:

 var sortParameter =  { column: 'UserName', order: 'desc' };

 $.ajax({
       url: '@Url.Action("GetUsers", "Account")',
       cache: false,
       type: 'POST',
       contentType: 'application/json; charset=utf-8',
       data: JSON.stringify({ 
         skipRecords: vm.pageIndex * 1000, 
         sortParam: sortParameter }),
       success: function (data) {
       }
 });

The reason your code doesn't work is because if you don't JSON.stringify the entire result, it is passed as a querystring encoded. You can't pass JSON as a value in a querystring encoded value.

Querystring encoded (Post or Get) looks like: a=1&b=2&c=3

So your querystring would look like skipRecords=5&sortParam={column:'UserName',order:'desc' }

MVC Won't double decode querystring and json.

Answer 2

Use POST and prepend [FromBody] to your 'Sort' object parameter in your action method.