Question

I am calling a ajax method as below

 var srchText = "Chicago";


 $.ajax({
    url: "/Ajax/GetCities",
    data: "{'srchText' : '" + srchText + "'}",
    dataType: "json",
    type: "POST",
    async: false,
    contentType: "application/json; charset=utf-8",
    dataFilter: function (data) { return data; },
    success: function (data) {
        cityList = data.d;
    }
});

The url is pointing to a MVC controller, as below,

 [HttpPost]
    public ActionResult GetCities(string srchText)
    {
        List<City> result = new List<City>();
        EventsBIZ objBIZ = new EventsBIZ();
        result = objBIZ.ToList<City>(objBIZ.GetCities(srchText));
        return this.Json(new GetEventsResponse() { d = result }, JsonRequestBehavior.AllowGet);
    }

There is something wrong with the code, that the method is called successfully, but the srchText is coming as null. Please help me to figure out wat went wrong. Thanks in advance

Adding the request tracked from firebug.

Answer 1

The reason your code doesn’t work is because by default ASP.NET MVC 2 doesn’t understand JSON requests. There is nothing built-in that allows you to send a JSON formatted request and that this request is parsed back to a strongly typed action argument. This functionality is built-in by default starting from ASP.NET MVC 3. Take a look at the following blog post. You will need to implement a JsonValueProviderFactory if you want to make this work under ASP.NET MVC 2.

Also instead of:

data: "{'srchText' : '" + srchText + "'}",

you should use:

data: JSON.stringify({ srchText: srchText }),

The JSON.stringify is native for modern browsers, and for older you might need to include json2.js.

Another possibility if you don’t want to implement a JsonValueProviderFactory is to use a standard application/x-www-form-urlencoded request which the default model binder can understand:

$.ajax({
    url: '/Ajax/GetCities',
    data: { srchText: srchText },
    type: 'POST',
    async: false,
    dataType: 'json',
    dataFilter: function (data) { return data; },
    success: function (data) {
        cityList = data.d;
    }
});