Why ajax send parameters to controller is null?

Question

I sending a post request to controller by ajax:

This is my code in cshtml file:

<script>
    $("#btnSeachAjax").click(function () {
        var token = $('input[name="__RequestVerificationToken"]').val();    
        $.ajax({
            url: '@Url.Action("Search")',
            data: { id: "1",title:"ba"},
            contentType: 'application/json',
            type: 'POST',
            headers: {
                "RequestVerificationToken": token
            },
            success: function (data) {
                $("#data").html(data);
            }
            ,
            error: function (req, status, error) {
                alert(error);
            }
        });
        return false;
    });
</script>

This is my code in controller:

 [HttpPost, ActionName("Search")]
        [ValidateAntiForgeryToken]
        public async Task<IActionResult> Search([FromBody] string id,string title)
        {
            var movie = await _context.Movies.FindAsync(id);
            return View(movie);
        }

Value of id , title in controller = null.

Why ajax send parameters to controller is null?

I using Asp.net mvc net core 3.1.

Answer 1

public async Task<IActionResult> Search([FromBody] string id,string title)

Value of id , title in controller = null.

Based on your action method and accepted parameters, you can try to modify the Ajax code as below.

$.ajax({
    url: '@Url.Action("Search")'+'?title=ba',
    data: JSON.stringify("1"),
    contentType: 'application/json',
    type: 'POST',
    //...

Besides, you can create a viewmodel and modify your action accept a complex type parameter, like below.

public class MyData
{
    public string Id { get; set; }
    public string Title { get; set; }
}

Action method

public async Task<IActionResult> Search([FromBody] MyData myData)
{
    //...

On JS client side

$.ajax({
    url: '@Url.Action("Search")',
    data: JSON.stringify({ id: "1", title: "ba" }),
    contentType: 'application/json',
    type: 'POST',
    //...