AJAX Post request with Razor Pages parameter class-CodePudding

I'm trying to implement a simple ajax with razor pages, but the parameter is not transmitted.

Here is the ajax

document.querySelector("#btnEditTeamSave").addEventListener("click", function editTeamSubmit(event) { 
    
    event.preventDefault();
    var theTeam = { Id:$('#btnEditTeamSave').val(), Name: $('#EditTeamName').val(), Description: $('#EditTeamDescription').val(), MachineId: $('#EditTeamMachine').val(),Active: $('#EditTeamActive').val(), Color: $('#EditTeamColorPicker').val()  };
    //JSON.stringify(theTeam)

       console.log(JSON.stringify(theTeam));
       $.ajax({
            type: "POST",
            url: "?handler=Team",
            contentType: "application/json; charset=utf-8",
            dataType: "JSON",
            data: JSON.stringify(theTeam),
            headers: {
                RequestVerificationToken:
                    $('input:hidden[name="__RequestVerificationToken"]').val()
            },
        })
            .done(function (result) {
                console.log(result);
            });
  },false)

And here is the model

   public class TeamShort
    {
        public int? Id { get; set; }
        public string? Name { get; set; }
        public string? Description { get; set; }
        public string? MachineId { get; set; }
        public bool? Active { get; set; }
        public string? Color { get; set; }
    }

public IActionResult OnPostTeam([FromBody]TeamShort theTeam)
{


    return new JsonResult("succes"); 
}

But the model theTeam is empty

https://i.stack.imgur.com/TwFx0.png

This is the log from the console with theTeam

https://i.stack.imgur.com/ZPpFe.png

CodePudding user response：

Finally solved

https://i.stack.imgur.com/uKoyC.png

The issue was the type of attributes from the class.

The active attribute has the value "on", and this value cannot be converted into "true"

CodePudding user response：

Per my test, when I using var theTeam = {Id: "1", Name: "name1", Description: "desc", MachineId: "MachineId",Active: "false", Color: "red"}; as the parameter, it will lead reproduce the issue.

When I use var theTeam = {Id: "1", Name: "name1", Description: "desc", MachineId: "MachineId",Active: false, Color: "red"}; it worked for me.

The issue may relate to the model type public bool? Active { get; set; }.

So in my idea, when we want to send ajax request in Razor Pages, we may choose to write request like:

$.ajax({
    type: "POST",
    url: "https://localhost:7036",
    data: {
        Id:1,
        Name:"name1",
        Description: "desc",
        MachineId:"MachineId",
        Active:false,
        Color:"red"
    },
    headers: {
        RequestVerificationToken:
            $('input:hidden[name="__RequestVerificationToken"]').val()
    },
    success:function(res){
        console.info(res);
    }
})

//don't need [FromBody] here
public IActionResult OnPost(TeamShort team)
{
    return new JsonResult("succes");
}