Model 未绑定到 JSON

Question

It looks like my model is not bingding correctly and the fields are all nulls. I have looked online and it seems that none of the solution worked for me. All my properties have setters and getters, the property name of the JSON matches the Model and I am stringifying it. I am setting my headers correctly. Perhaps there is something simple I am not setting. Maybe a missing package? Calling something incorrectly?

On the frontend this is how I am posting my JSON

fetch("/Admin/SaveUser", {
    method: "Post",
    headers: {
        "Content": "application/json",
        'Accept': 'application/json;charset=utf-8'
    },
    body: JSON.stringify(userData)
}).then(response => {
    response.json().then(result => {
        UpdateDisplay();
    });
});

the content of userData

{"UserId":"4dd9f40e-a9ad-418e-9954-e9459c5db1af","FirstName":"Jack","LastName":"","EmployeeCode":"",
 "PhoneNumber":"","Email":"jthor@stackoverflow.com"}

my controller method

 [HttpPost]
 public JsonResult SaveUser(UserModel user)
 {
    UserModel.UpdateUser(user);
    return Json(false);
 }

my Model

 public class UserModel
{
    public Guid UserId { get; set; }
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public string PhoneNumber { get; set; }
    public string EmployeeCode { get; set; }
    public List<string> UserRoleIds { get; set; }
    public List<string> UserRoleNames { get; set; }
    public List<SelectListItem> Roles { get; set; }

    public UserModel()
    {
        UserRoleIds = new List<string>();
        UserRoleNames = new List<string>();
        Roles = new List<SelectListItem>();
    }
}

Answer 1

I've had this problem before and I was able to fix it by adding the [FromBody] attribute.

[HttpPost]
 public JsonResult SaveUser([FromBody] UserModel user)
 {
    UserModel.UpdateUser(user);
    return Json(false);
 }

Answer 2

Try changing the Content header to "Content-Type", it works for me.

As follows:

fetch("/Admin/SaveUser", {
method: "Post",
headers: {
    "Content-Type": "application/json",
    'Accept': 'application/json;charset=utf-8'
},
body: JSON.stringify(userData)
}).then(response => {
    response.json().then(result => {
        UpdateDisplay();
    });
});

Answer 3

I figured it out. Instead of manually creating the form using HTML I used the html helper html.beginform and that worked. IDK why that worked but it did.