JSON.stringify Passing Into Razor-Page As Null

Question

I have a asp.net core razor-page where I am trying to read the data off of a table and pass it into a my controller so that I can process changes made in the table. I've checked other similar questions on this site like this one: MVC model is null when posting json in ASP.Net Core but I keep getting a null value in the razor-page. I'm posting the relevant code below. If there is something else that you need to see please let me know.

Ajax Call Below:

 //--------------------------------------------------------------------
 // Load Up An Array and Pass the Data To The Razor Page
 //--------------------------------------------------------------------
 $('#UpdateScoresButton').click(function () {
   // Store Data in an Array
    var enteredScores = new Array();
   // Loops through whole table
   $("#table tbody tr").each(function () {
     // Grabs Each Row
       var row = $(this);
       var score = {};
       score.DeputyID = row.find("td").eq(0).html();
       score.DivisionID = row.find("td").eq(1).html();
       score.QuarterID = row.find("td").eq(2).html();
       score.PrimaryModelID = row.find("td").eq(3).html();
       score.SecondaryModelID = row.find("td").eq(4).html();
       score.ShotgunModelID = row.find("td").eq(5).html();
       score.RifleModelID = row.find("td").eq(6).html();
       score.PrimaryFirstScoreID = row.find("td").eq(7).html();
       score.PrimarySecondScoreID = row.find("td").eq(8).html();
       score.PrimaryThirdScoreID = row.find("td").eq(9).html();
       score.SecondaryScoreID = row.find("td").eq(10).html();
       score.ShotgunScoreID = row.find("td").eq(11).html();
       score.RifleScoreID = row.find("td").eq(12).html();

       enteredScores.push(score);
});    

$.ajax(
    {
        url: '/EnterScores/Enter_Shooter_Scores?handler=InsertUpdateAndReloadData',
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        type: 'POST',
        dataType: 'application/json; charset=utf-8',
        data: JSON.stringify(enteredScores),
        success: function (result) {
            if (result.pass != undefined) {
                document.forms[0].submit();
            }
        },
        error: function (result, exception) {
            console.log(result);
            // Your error handling logic here..
        },
    });
});

Here is the razor-page code:

public JsonResult OnPostInsertUpdateAndReloadData([FromBody] List<EnteredScores> enteredScores)
{
  var test = enteredScores;            
  return new JsonResult(new { pass = "Pass" }); ;
}

My EnteredScores Class :

 public class EnteredScores
{
    public int DeputyID { get; set; }
    public int DivisionID { get; set; }
    public int QuarterID { get; set; }
    public int PrimaryModelID { get; set; }
    public int SecondaryModelID { get; set; }
    public int ShotgunModelID { get; set; }
    public int RifleModelID { get; set; }
    public int PrimaryFirstScoreID { get; set; }
    public int PrimarySecondScoreID { get; set; }
    public int PrimaryThirdScoreID { get; set; }
    public int SecondaryScoreID { get; set; }
    public int ShotgunScoreID { get; set; }
    public int RifleScoreID { get; set; }     
}

Answer 1

Since the properties in EnteredScores are int type.You need to pass int type data to handler.Try to change

       score.DeputyID = row.find("td").eq(0).html();
       score.DivisionID = row.find("td").eq(1).html();
       score.QuarterID = row.find("td").eq(2).html();
       score.PrimaryModelID = row.find("td").eq(3).html();
       score.SecondaryModelID = row.find("td").eq(4).html();
       score.ShotgunModelID = row.find("td").eq(5).html();
       score.RifleModelID = row.find("td").eq(6).html();
       score.PrimaryFirstScoreID = row.find("td").eq(7).html();
       score.PrimarySecondScoreID = row.find("td").eq(8).html();
       score.PrimaryThirdScoreID = row.find("td").eq(9).html();
       score.SecondaryScoreID = row.find("td").eq(10).html();
       score.ShotgunScoreID = row.find("td").eq(11).html();
       score.RifleScoreID = row.find("td").eq(12).html();

to

        score.DeputyID = parseInt(row.find("td").eq(0).html());
        score.DivisionID = parseInt(row.find("td").eq(1).html());
        score.QuarterID = parseInt(row.find("td").eq(2).html());
        score.PrimaryModelID = parseInt(row.find("td").eq(3).html());
        score.SecondaryModelID = parseInt(row.find("td").eq(4).html());
        score.ShotgunModelID = parseInt(row.find("td").eq(5).html());
        score.RifleModelID = parseInt(row.find("td").eq(6).html());
        score.PrimaryFirstScoreID = parseInt(row.find("td").eq(7).html());
        score.PrimarySecondScoreID = parseInt(row.find("td").eq(8).html());
        score.PrimaryThirdScoreID = parseInt(row.find("td").eq(9).html());
        score.SecondaryScoreID = parseInt(row.find("td").eq(10).html());
        score.ShotgunScoreID = parseInt(row.find("td").eq(11).html());
        score.RifleScoreID = parseInt(row.find("td").eq(12).html());

And since you passed data is json type,you need to add contentType: "application/json", to your ajax like this:

$.ajax(
    {
        url: '/EnterScores/Enter_Shooter_Scores?handler=InsertUpdateAndReloadData',
        beforeSend: function (xhr) {
            xhr.setRequestHeader("XSRF-TOKEN",
                $('input:hidden[name="__RequestVerificationToken"]').val());
        },
        type: 'POST',
        contentType: "application/json",
        dataType: 'application/json; charset=utf-8',
        data: JSON.stringify(enteredScores),
        success: function (result) {
            if (result.pass != undefined) {
                document.forms[0].submit();
            }
        },
        error: function (result, exception) {
            console.log(result);
            // Your error handling logic here..
        },
    });

result:

Answer 2

Your issue is likely due to model binding failing. Looking over this code, the first issue I'd address is the difference been the Javascript object names [that you're passing up to your C#/MVC action] and the "EnteredScores" model/class properties. The easiest refactor would be to edit your Javascript code like so:

score.DeputyID = row.find("td").eq(0).html();
score.DivisionID = row.find("td").eq(1).html();
score.QuarterID = row.find("td").eq(2).html();
etc.

Change the above [your orginal code] to the below [my refactor of that code], just make sure you update all fields so they match.

DeputyID = row.find("td").eq(0).html();
DivisionID = row.find("td").eq(1).html();
QuarterID = row.find("td").eq(2).html();
etc.