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.

Answer 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

Answer 2

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
    }
});