ASP.NET MVC do not accept ajax data object on controller

Question

I've been searching for a while and nothing helped me to solve this problem. I don't know what is happening, I used to send information to controller through a data object from AJAX using JQuery, but in this case, the parameter arrive null. My request look like this (I created a function based on button click):

Js Method on Razor page

const searchStudy = () => {
        let searchString = JSON.stringify({"searchString": $("#searchString").val()});
        console.log(searchString)

        $.ajax({
            url: "@Url.Action("SearchStudies","Studies")",
            method: "POST",
            processData: false,
            data: searchString,
            contentType: "application/json; charset=UTF-8",
            dataType: "html",
            success: function(response) {
                console.log(response)
                $("#dataContainer").html(response);
            }
        });
    }

Controller

[HttpPost]
public async Task<IActionResult> SearchStudies(string searchString)
{
    if (String.IsNullOrWhiteSpace(searchString))
        return BadRequest("Search something!");

    var studies = await _studyService.GetSearchStudies(searchString);

    return PartialView("~/Views/Studies/_Studies.cshtml", studies);
}

Ps.: When I try to use query data on url it works. Hope some of you have face this problem once :)

Yong Shun · Accepted Answer · 2022-03-12 03:56:46Z

1

Create a model class for the expected object to be received.

public class SearchStudiesModel
{
    public string SearchString { get; set; }
}

Change the controller method signature to expect to receive SearchStudiesModel and apply [FromBody] to get the value from the request body.

[HttpPost]
public async Task<IActionResult> SearchStudies([FromBody]SearchStudiesModel model)
{
    if (String.IsNullOrWhiteSpace(model.SearchString))
        return BadRequest("Search something!");

    ...
}

Debugging result

edited Mar 12, 2022 at 3:56

answered Mar 12, 2022 at 2:45

Yong Shun

54.5k6 gold badges38 silver badges66 bronze badges

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

3 Comments

João Victor Dantas Over a year ago

Hello Yong! First of all, thank you so much for your asnwer, it worked fine. But, isn't it a bad pratice to create a entire model class for just a property? And if it isn't, should I face it as a kind of DTO? Hugs from Brazil :) 🇧🇷

Yong Shun Over a year ago

Hi, I would say it is more opinion-based. As you post an object to the controller, you need an input parameter with class/object type. So the class created is acted as DTO.

Yong Shun Over a year ago

Consider that you are trying to GET data, another approach is to change your controller method as GET such [HttpGet("SearchStudies/{searchString}")]public async Task<IActionResult> SearchStudies(string searchString). So you don't need to create a model class as the controller method will get the value from url. Ya, and with the GET, you need to modify your ajax as well. So (two approaches, GET or POST) it depends on your use case/preference.

CPlus · Accepted Answer · 2023-09-09 02:34:08Z

0

$.ajax({
    url: "/Studies/SearchStudies/?searchString=" + searchString,
    // ...
})

edited Sep 9, 2023 at 2:34

CPlus

5,11048 gold badges33 silver badges77 bronze badges

answered Sep 8, 2023 at 8:38

Kenes Kuanyshov

111 bronze badge

1 Comment

mozway Over a year ago

Please provide more context, code-only answer are not always useful.

Collectives™ on Stack Overflow

ASP.NET MVC do not accept ajax data object on controller

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related