jQuery AJAX POST not passing value to controller in ASP.Net Core MVC

Question

I have been digging around for a few hours now and just not finding anything. A lot of questions similar to this are about posting to controllers but I am just trying to post a single integer. I have confirmed the code is calling into the controller as I can hit a break-point in the controller and see that the value I have hard-coded is not being passed to the controller. I am sure there is something stupid I am missing but I can't figure it out after trying a lot of different things the controller always get the value of "0" for the selectedNavigationItemID. What am I missing to pass the integer into my controller?

Striped out AJAX call:

    $(document).ready(function()
    {
        $('#SelectedExistingNavigationItemID').change(function()
        { 
            $.ajax('../Sections/GetSectionNavigationItemInfo/'),
            {
                type: 'POST',
                dataType: 'json',
                data: { 'selectedNavigationItemID': '3'},
                success: function(data, status, jqXHR)
                {
                    if ("success" == status)
                    {
                        alert('good');
                    }
                }
            };
        });
    });

Code on my controller side:

    [Route("GetSectionNavigationItemInfo")]
    public async Task<JsonResult> GetSectionNavigationItemInfo(int selectedNavigationItemID)
    {
        var navigationItem = await _navigationHelper.GetSectionNavigationMenuItem(selectedNavigationItemID);
        return Json(navigationItem);
    }

I have tried removing the questions around the information in data, specifiying application/json for a contentType, changing dataType to multipart/form-data but it all results in the value of 0 being passed into the controller.

What stupid little thing am I missing to make this work?

Mohammad Aghazadeh · Accepted Answer · 2022-12-03 07:01:23Z

1

If you look at the browser's network tab, it's probably being sent with the GET method, because your ajax syntax is incorrect and Ajax Configuration aren't applied, and by default it's being sent with the GET method, try changing your code to :

$(document).ready(function()
{
    $('#SelectedExistingNavigationItemID').change(function() {
        $.ajax({
            url: '../Sections/GetSectionNavigationItemInfo/',
            type: 'POST',
            dataType: 'json',
            data: { 'selectedNavigationItemID': '3' },
            success: function(data, status, jqXHR) {
                if ("success" == status) {
                    alert('good');
                }
            }
        });
    });
});

A tip to improve your code:

It is better to add [HttpPost] attribute to your action so that your action is only available via POST method. This way, your action method would no longer be called with the GET method, and you could debug your code more easily and find the problem.

[HttpPost]
[Route("GetSectionNavigationItemInfo")]
public async Task<JsonResult> GetSectionNavigationItemInfo(int selectedNavigationItemID)
{
    var navigationItem = await _navigationHelper.GetSectionNavigationMenuItem(selectedNavigationItemID);
    return Json(navigationItem);
}

edited Dec 3, 2022 at 7:01

answered Dec 3, 2022 at 6:37

Mohammad Aghazadeh

3,0583 gold badges14 silver badges26 bronze badges

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

2 Comments

Matthew Verstraete Over a year ago

Thanks you. The dev consle in FireFox was not complaining about any errors and I was hitting the controller so I did not think my syntax was wrong. I tried yours and it passed the variable no issue. Thanks for the tip on the HTTPPost command, I did not have it on this controller to simplify the code as much as I could. I do use that command on the full form submit and did plan to use it on the JSON controller once I got the thing working.

Mohammad Aghazadeh Over a year ago

your welcome, by the way, one of the reasons maybe you could not find the problem was that your code had the correct syntax in terms of JavaScript, but logically, the settings object was not passed to your request, so Firefox did not show an error.

Collectives™ on Stack Overflow

jQuery AJAX POST not passing value to controller in ASP.Net Core MVC

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related