Ajax Request: Json Data Not Being Passed to Controller

Question

I'm building a program that searches documents in ASP.NET Core. I'm passing the search data from a text box to the controller through an Ajax request but the controller isn't receiving the string.

I've tried changing how the ajaxData field is defined, adding quotations around 'search' and even turning the whole thing into a string but I can't get it to pass to the controller.

This is the code for the request:

ajaxData = {search: $("#textSearchBox").val()}

console.log(ajaxData);

$.ajax({
    type: 'POST',
    url: "@Url.Action("GetDocuments", "DocumentSearchApi")",
    data: ajaxData,
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    error: function (e) {
        //Error Function
    },
    success: function (jsonData) {
        //Success Function
    },
    fail: function (data) {
        //Fail Function
    }
});

And this is the top of the Controller's GetDocuments function:

[Route("GetDocuments")]
public async Task<IActionResult> GetDocuments(string search)
{

No error messages anywhere. The Console shows an Object that contains 'search: "Test"' but when I hit the breakpoint in GetDocuments 'search' is null.

Tony Ngo · Accepted Answer · 2019-05-16T16:14:15.813

1

I think is more elegant way to use GET in this case then you should change your code to

var ajaxData = $("#textSearchBox").val();
url: "@Url.Action("GetDocuments", "DocumentSearchApi")"?search=ajaxData

and remove data: ajaxData

Because you want to get something from the search. Using the post is when you want to modify the data from API

edited May 16 '19 at 16:14

answered May 16 '19 at 16:11

Tony Ngo

19,166
4
38
60

What if I'm looking for `"Tom & Jerry"`? – Andreas May 16 '19 at 16:16
then you should split the search using ```string.split()``` in your server side then query base on 2 condition tom and jerry – Tony Ngo May 16 '19 at 16:17
`"Tom & Jerry"` won't get as `"Tom & Jerry"` to the server, hence nothing to split (which is weird when I'm looking for `"Tom & Jerry"` and not `"Tom" AND "Jerry"`) – Andreas May 16 '19 at 16:20
Hm then I think you need to submit the string to server and search base on the content ? I dont know how you want to implement the search on the backend so I cant give my opinion – Tony Ngo May 16 '19 at 16:22
He ask why json data not being passed to the controller, best practice or approach is another thread, when someone search something like this issue would find something else – Zach dev May 16 '19 at 16:23
It works when tweaked slightly: "@Url.Action("GetDocuments", "DocumentSearchApi")?search="+ajaxData.search Changing it to 'GET' fixed it though. – user3599291 May 16 '19 at 16:29
@user3599291 I think you can use my approach is more clean. Use object to search is overkill in this case – Tony Ngo May 16 '19 at 16:31
@TonyNgo Changing it to 'GET' fixed it. I need an object because I will be passing more parameters. I can still use the 'data:' to pass the object. – user3599291 May 16 '19 at 16:36
you can seperate by & character and using FromQuery to get the data. You can read [here](https://stackoverflow.com/questions/41577376/how-to-read-values-from-the-querystring-with-asp-net-core) to see how you can do it – Tony Ngo May 16 '19 at 16:39

Zach dev · Answer 2 · 2019-05-16T16:15:39.950

you need use JSON.stringify() when sending data to a web server, the data has to be a string not a object

$.ajax({
    type: 'POST',
    url: "@Url.Action("GetDocuments", "DocumentSearchApi")",
    data: JSON.stringify(ajaxData),
    dataType: "json",
    contentType: "application/json; charset=utf-8",
    error: function (e) {
        //Error Function
    },
    success: function (jsonData) {
        //Success Function
    },
    fail: function (data) {
        //Fail Function
    }
});

Ajax Request: Json Data Not Being Passed to Controller

2 Answers2