Pass Data string using ajax to controller method

Question

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.

At least try to avoid typos in your example(s). Closing brackets and quotes, etc. — Nenad
– Nenad, Commented Aug 10, 2013 at 10:52
@user1938460: after few edits... now you're only missing comma after success. — Nenad
– Nenad, Commented Aug 10, 2013 at 11:05

Nenad · Accepted Answer · 2013-08-10 11:21:11Z

1

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).

edited Aug 10, 2013 at 11:21

answered Aug 10, 2013 at 10:47

Nenad

27k11 gold badges81 silver badges102 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

user1938460 Over a year ago

changing the syntax doesnt make a difference. There is no error in the syntax. Its just not passing the values through to the ActionResult Method parameters. So its just returning all the data.

Nenad Over a year ago

Well, it passed data when I use your example above. Did you forget to tell us something? Is your environment different then example you gave? Give me exact URL where AJAX call sends data.

user1938460 Over a year ago

Hi Nenad using breakpoints and the intellisense the values of the strings in the method parameters are null, therefore it will return all the data. The exact URL is url 'Project/FilterData'

Nenad Over a year ago

"data:..." line in your code calls JSON.stringify. Remove it!

user1938460 Over a year ago

Oh, thanks. But it did not work, got this error: Invalid JSON primitive: a,

|

Daniele · Accepted Answer · 2013-08-10 10:38:27Z

0

try with:

url:'/Controller/FilterData',

answered Aug 10, 2013 at 10:38

Daniele

1,93616 silver badges24 bronze badges

2 Comments

nemesv Over a year ago

This was just a typo in the OP sample, this is not the solution.

user1938460 Over a year ago

Sorry forgot to add the "". But its doesnt make a difference. as the data is being posted and the method is called. But the json being returned is not filtered, as it doesnt get the posted data.

Collectives™ on Stack Overflow

Pass Data string using ajax to controller method

2 Answers 2

15 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

15 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related