Javascript – passing JSON formatted data with ajax is not working

I am trying to call an action in my controller with some JSON data, it
seems to be reaching the action but the data is all null.

Well, based on your scenario and description, you would get null data always. Beause the way, you are sending Json data either you have to have Request model in controller wraping with [FromBody] or you should post data as query parameter like this way:"http://localhost:5094/AjaxPostNull/PrivateChat2?id=" + data.id + "&username=" + data.username + "&connectionID=" + data.connectionID

Let’s have a look at practice, how we could achieve that:

Way: FormBody Wrapper:

Request Model:

public class AjaxRequestModel
 {
     public  int id { get; set; }
     public string username { get; set; }
     public string connectionID { get; set; }
 }

Controller Signature:

public IActionResult PrivateChat([FromBody] AjaxRequestModel ajaxRequestModel)
{
    //at this point
    //id = 0
    //username = null
    //connectionID = null

    return null;
}

Note: If you send request along with json model, you should wrap the controller with [FromBody]

Script:

@section scripts {
    <script>
        function PostAjaxRequest() {
            var url = "http://localhost:5094/AjaxPostNull/PrivateChat2?id=" + data.id + "&username=" + data.username + "&connectionID=" + username +;
            $.ajax({
                url: url,
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                // data: JSON.stringify(data),
                success: function (response) {
                    //success code
                },
                error: function (err) {
                    console.error(err);
                }
            });
        }
    </script>
}

Output:

Alternative way: Query String

@section scripts {
    <script>
        function PostAjaxRequest() {
            

            var data = { id: 123, username: "Test User Name", connectionID: "My con ID" };


            var url = "http://localhost:5094/AjaxPostNull/PrivateChat2?id=" + data.id + "&username=" + data.username + "&connectionID=" + data.connectionID
            $.ajax({
                url: url,
                type: 'POST',
                contentType: 'application/json; charset=utf-8',
                // data: JSON.stringify(data),
                success: function (response) {
                    //success code
                },
                error: function (err) {
                    console.error(err);
                }
            });
        }
    </script>
}

Output:

Note: Please refer to this official document if you want to know more.