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

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.

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) {

            }
        });
    }