Posting data using ajax in an MVC controller not working

Question

I have a problem posting my data to a controller using ajax, I am trying to send a string to a controller via ajax but it doesn't even reach the controller, my code is like this:

var m_page_nm = $('#pagemenu_hid').val(),
oColumns = JSON.stringify(this.oKgrid.columns),
data = JSON.stringify({ columns: oColumns, page_name: m_page_nm, grid_nm:     this.m_kgrid_id });

$.ajax({
    url: "/Favorite/SaveColumnSettings",
    type: 'POST',             
    data:{ gridset:data },
        dataType: 'json',
        contentType: 'application/json; charset=utf-8',
    error: function (xhr) {
        alert('Error: ' + xhr.statusText);
    },               
});

and in the controller its just as simple as this

[HttpPost]

public ActionResult SaveColumnSettings(string gridset)
{
    return new EmptyResult();
}

on the developer tools was this request

Request URL:http://localhost:2144/Favorite/SaveColumnSettings
Request Headers CAUTION: Provisional headers are shown.
Accept:*/*
Content-Type:application/x-www-form-urlencoded; charset=UTF-8
Origin:http://localhost:2144
Referer:http://localhost:2144/Agent/Index?menu=AGENT_SETUP
User-Agent:Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko)             Chrome/34.0.1847.131 Safari/537.36
X-Requested-With:XMLHttpRequest
Form Dataview sourceview URL encoded
gridset:{"columns":" [{\"encoded\":true,\"title\":\"Id\",\"hidden\":true,\"field\":\"agent_no\",\"filterable\":{},\"attributes\":{\"style\":\"display:none\"},\"footerAttributes\":{\"style\":\"display:none\"},\"headerAttributes\":{\"style\":\"display:none\"}},{\"encoded\":true,\"title\":\"Agent Code\",\"width\":\"20px\",\"field\":\"agent_cd\",\"groupable\":false,\"filterable\":{}},{\"encoded\":true,\"title\":\"Agent Name\",\"width\":\"80px\",\"field\":\"agent_nm\",\"groupable\":false,\"filterable\":{}},{\"encoded\":true,\"title\":\"Supervisory Code\",\"width\":\"20px\",\"field\":\"supervisor_cd\",\"filterable\":{}},{\"encoded\":true,\"title\":\"Sales Dept. Code\",\"width\":\"20px\",\"field\":\"sdept_cd\",\"filterable\":{}},{\"encoded\":true,\"title\":\"Area\",\"width\":\"20px\",\"field\":\"area_cd\",\"filterable\":{}},{\"encoded\":true,\"title\":\"Active?\",\"width\":\"10px\",\"template\":\"<div style='text-align:center'><input type='checkbox' disabled checked #= inactive_yn? checked='checked': checked='' # class='chkbx' /></div>\",\"field\":\"inactive_yn\",\"filterable\":{}}]","page_name":"AGENT_SETUP","grid_nm":"#agent_kgrid"}

Answer 1

After checking your code I found these -

1. You are not using ajax success callback method, so even if you are getting correct result you won't be able to know. Add success method, a sample would be like (Use a JS console to view the result , may be FireBug or Chrome Developer Tools) -

   $.ajax({ url: "/Favorite/SaveColumnSettings", type: 'POST',
data:{ gridset:data }, dataType: 'json', contentType: 'application/json; charset=utf-8', error: function (data) { console.log(data); },
success: function (data) { console.log(data); } });

2. You are using dataType:json in the code, so the result will be automatically parsed to json object. So you won't get a normal xhr response therefore xhr.statusText is invalid. The result is already json and since you returned EmptyResult the result is empty, thus data should be blank or null.

3. You are using EmptyResult , using dataType:json - This options is not connected to server, this is to let jQuery know that your response is json and so jQuery will automatically parse it when calling error or success callback. So with EmptyResult its insignificant

4. To make it work change the return EmptyResult to something like this (This is the syntax I use, there are others too, I don't have VS installed right now, so the syntax might be a bit wrong, but you can always find easily. )-

   return MVCHelperUtilites.GetJsonResult(new []{ new KeyValuePair<String,String>("Success",True) });

5. If you are still willing to use EmptyResult use dataType:html instead