Search code examples
asp.net-corejquery-ajax

Jquery Ajax call passed parameter always null in Asp.net MVC Core

I am migrating my MVC application to Asp.Net core (3.1 version) application. I have one layout page which is used for menu navigation. When user click on any menu then i need to pass some value from Layout to the controller for some business purpose. To do that i used one ajax call here.

Below ajax call code is working fine in MVC, But in Asp.Net core the passed parameter value is null in controller.

Working code of MVC:

function SetCurrentPageNameSession(currentPageName, isBookMarkPage) {

        if(isBookMarkPage==undefined)
            isBookMarkPage = false;
        var url = baseUrl+"Manage/HighlightCurrentMenu/"
            $.ajax({
            type: "POST",
            data: "{'CurrentPage':'" + currentPageName + "', 'IsBookMark':'" + isBookMarkPage + "'}",
                url: url,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async:false,
                success: function (data) {
                var res = data.d;
            },
                error: function (xhr, ajaxOptions, thrownError) {

            }
        });
    }

and below is the controller action method where i get these passed value:

[HttpPost]
        public IActionResult HighlightCurrentMenu(string CurrentPage, bool IsBookMark)
        {
           return Json(true);
        }

When the same code not works in Asp.Net core then i googled it and found like need to modify the ajax call code.

I modified data section in below:

function SetCurrentPageNameSession(CurrentPage, IsBookMark) {

        var url = baseUrl+"Manage/HighlightCurrentMenu/"
            $.ajax({
            type: "POST",
            data: JSON.stringify({ CurrentPage: CurrentPage, IsBookMark: IsBookMark }),
                url: url,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                async:false,
                success: function (data) {
                var res = data.d;
            },
                error: function (xhr, ajaxOptions, thrownError) {

            }
        });
    }

And used FromBody in controller action method:

[HttpPost]
        public IActionResult HighlightCurrentMenu([FromBody] string CurrentPage, [FromBody] bool IsBookMark)
        {
          return Json(true);  
        }

I get the value null in "CurrentPage" Parameter.

I tried one more scenario by myself in below:

data: JSON.stringify("{'CurrentPage':'" + CurrentPage + "', 'IsBookMark':'" + IsBookMark + "'}"),

In this case i get complete Json format value in "CurrentPage" parameter inside action method

Below is the screen shot for the same.

Screenshot attached

Please suggest.

Solution

  • You probably don't need to specify that you are sending dataType of json. I have tried the below and it worked

        function SetCurrentPageNameSession(currentPageName, isBookMarkPage) {
        if(isBookMarkPage==undefined)
            isBookMarkPage = false;
        var url = baseUrl+"Manage/HighlightCurrentMenu/";
        $.ajax({
            type: "POST",
            data: { CurrentPage: currentPageName, IsBookMark: isBookMarkPage },
            url: url,
            success: function (data) {
                var res = data.d;
            },
            error: function (xhr, ajaxOptions, thrownError) {

            }
        });
    }