I am creating a filter list. I have a several multi-select lists where the user can choose several options. The problem is I am using ajax to return the values and call a controller method which will return a Json data which will then be displayed on the website. But the problem is it doesn't work.

Controller Method:

[HttpPost]
public ActionResult FilterData(string a, string b, string c, string d){
  //Do Something with the strings e.g. filter the data.
  return Json(result, JsonRequestBehavior.AllowGet);
}

Ajax Method for getting filtered data:

$(document).ready(function() {
$("#submitBTN").click(function() {
var ab = $('#selectedID1').val();
var bc = $('#selectedID2').val();
var cd = $('#selectedID3').val();
var de = $('#selectedID4').val();

$.ajax({
       contentType: "application/json; charset=utf-8",
       url:"/Controller/FilterData",
       type: "POST",
       data: JSON.stringify({a: ab, b: bc, c: cd, d:de }),
       success: function(result){

       } 
       error: function(){}
     });
       return false;
      });
   });

Using firebug I can see the right values are posted. And I know that if I manually select string a via the url link it get the correct filtered data. However, this data does not seem to get into the method and output all the data without being filtered using the postes values.

The problem is that the Data Posted is not being pciked up or sent to the method FilterData, so it returns all the data as it should do if there are no filter options selected. I would like to know how I can fix the code so I can get the data posted by ajax to send that data to method FilterData parameters e.g. string a, string b, string c and string d.

I am creating a filter list. I have a several multi-select lists where the user can choose several options. The problem is I am using ajax to return the values and call a controller method which will return a Json data which will then be displayed on the website. But the problem is it doesn't work.

Controller Method:

[HttpPost]
public ActionResult FilterData(string a, string b, string c, string d){
  //Do Something with the strings e.g. filter the data.
  return Json(result, JsonRequestBehavior.AllowGet);
}

Ajax Method for getting filtered data:

$(document).ready(function() {
$("#submitBTN").click(function() {
var ab = $('#selectedID1').val();
var bc = $('#selectedID2').val();
var cd = $('#selectedID3').val();
var de = $('#selectedID4').val();

$.ajax({
       contentType: "application/json; charset=utf-8",
       url:"/Controller/FilterData",
       type: "POST",
       data: JSON.stringify({a: ab, b: bc, c: cd, d:de }),
       success: function(result){

       } 
       error: function(){}
     });
       return false;
      });
   });

Using firebug I can see the right values are posted. And I know that if I manually select string a via the url link it get the correct filtered data. However, this data does not seem to get into the method and output all the data without being filtered using the postes values.

The problem is that the Data Posted is not being pciked up or sent to the method FilterData, so it returns all the data as it should do if there are no filter options selected. I would like to know how I can fix the code so I can get the data posted by ajax to send that data to method FilterData parameters e.g. string a, string b, string c and string d.

• javascript
• jquery
• ajax
• asp-mvc

• At least try to avoid typos in your example(s). Closing brackets and quotes, etc. – Nenad Commented Aug 10, 2013 at 10:52
• There is nothing returned in the ajax error? – Daniele Commented Aug 10, 2013 at 10:57
• @user1938460: after few edits... now you're only missing ma after success. – Nenad Commented Aug 10, 2013 at 11:05

2 Answers 2

Update: Now when you restated problem, here is the line that had issue (you were using JSON.stringify on data value):

data: { a: ab, b: bc, c: cd, d: de }

You were converting data into 1 JSON string, which is not what MVC expects.

"{"a":1,"b":2,"c":3,"d":4}"

Instead it expects key value pairs (normal post-back format):

a=1&b=2&c=3&d=4

So now full example without typos:

$(document).ready(function () {
    $("#submitBTN").click(function(){
        var ab = $('#selectedID1').val();
        var bc = $('#selectedID2').val();
        var cd = $('#selectedID3').val();
        var de = $('#selectedID4').val();

        $.ajax({
            url: '/MyController/FilterData',
            type: 'POST',
            data: { a: ab, b: bc, c: cd, d: de },
            success: function(result) {

            },
            error: function() {
            }
        });
    });
});

You don't need JsonRequestBehavior.AllowGet if it's just POST request (although it doesn't break anything).

try with:

url:'/Controller/FilterData',