AJAX Post issue with ASP.NET

Question

I'm having an issue posting data. First, I tried using the shorthand $.post and got a 415 response. Some other posts on this site recommended using the $.ajax method instead and setting some headers. I did that and when I use the $.ajax method, the data seems to not pass to the server because the method on the backend breaks and says there is no data with that id, which is not true. Below you can see both methods. The shorthand post is currently commented out.

$(".Set_set").click(function () {

        let setID = $(this).attr("data-id");
        $.ajax({
            method: "POST",
            url: "https://localhost:44327/workout/addRep",
            data: { id: setID },
            dataType: "json",
            headers: {
                "Content-Type": "application/json",
            },
            success: function (data, status, jqxhr) {
                console.log(data);
                console.log(status);
            }
            })


           /* 
            $.post("https://localhost:44327/workout/addRep", 
              { id: setID }, function (data) {
                console.log(data)
            })

 */

    }
    )

})

When I use the $.ajax method, the headers section in the browser will say 'id=3' under the 'Request Payload" subsection.

When I use the $.post method, the 'Request Payload' section is not there. Instead there is a "Form Data" section and it will show "id: 3"

Here is the backend code if it helps:

[HttpPost]
    public IActionResult addRep([FromBody]int id)
    {
        //id is the setid

        ExerciseSet exerciseSet = context.Exercise_Sets.Where(c => c.ID == id).Single();



        return Ok(exerciseSet);
    }

that means your server does not accept the format of the media see this [post](https://stackoverflow.com/questions/20226169/how-to-pass-json-post-data-to-web-api-method-as-an-object) — Muhammad Omer Aslam, Aug 22 '19 at 21:26
@MuhammadOmerAslam After reading that, I edited the data to only contain the id, not JSON.stringify({id: setID}). I set the data to just 'setID' and it worked. Thanks for the link. Do you have any insight as to why it works this way? — QHafeez, Aug 22 '19 at 21:33

score 0 · Answer 1 · answered Aug 24 '19 at 08:47

$.ajax({
            method: "POST",
            url: "https://localhost:44327/workout/addRep",
            data:JSON.stringify({ id: setID }) ,
            dataType: "json",
            success: function (data, status, jqxhr) {
                console.log(data);
                console.log(status);
            }
            })
            
    //OR  
    
    $.ajax({
            method: "POST",
            url: "https://localhost:44327/workout/addRep?id="+setID,
            dataType: "json",
            success: function (data, status, jqxhr) {
                console.log(data);
                console.log(status);
            }
            })

AJAX Post issue with ASP.NET

1 Answers1