Phil.Wheeler Phil.Wheeler - 6 months ago 17
JSON Question

Angular Web API PUT Model Not Recognised

I'm having trouble PUTting a reasonably complex data model to a Web API controller using Angular.

Here's what we have so far:

Angular Controller:

$scope.saveDelivery = function () {
var val = $('#run-value', $element)[0].value;
console.info("Batsman: " + $scope.striker.Name + ", Shot: " + $scope.shot + " for " + val + " runs. ");

if ($scope.game.Overs[$scope.over - 1].Deliveries == null) {
$scope.game.Overs[$scope.over - 1].Deliveries = [];
}

console.info("Over: " + $scope.over + ", Delivery: " + $scope.delivery);
if ($scope.delivery > 6) {
$scope.over++;
$scope.delivery = 1;
}
else {
$scope.delivery++;
}

if ($scope.striker == undefined) {
alert("No batsman selected");
}
else {

var shot = {};

shot.Id = 0;
shot.Runs = $scope.runs;
shot.Stroke = $scope.shot;
if ($scope.runs == -5) {
shot.Dismissal = $scope.shot;
}
else {
shot.Dismissal = null;
}

var delivery = {};
delivery.Id = 0;
delivery.Number = $scope.delivery;
delivery.Batter = $scope.striker;
delivery.Bowler = $scope.nonstriker;
delivery.Shot = shot;


$scope.game.Overs[$scope.over - 1].Deliveries.push(delivery);
console.info($scope.game);

$http.put('/api/games/:id', { id: $scope.game.Id, game: $scope.game }).success(function (data, status, headers, config) {
console.info(data);
});
//$http.post('/score/testing', { Test: "This is a test" }).success(function (data, status, headers, config) {
// console.info(data);
//});
}
}


API Controller:

// PUT: api/Games/5
[HttpPut("{id}")]
public IActionResult PutGame(int id, [FromBody] Game game)
{
if (!ModelState.IsValid)
{
return HttpBadRequest(ModelState);
}
... etc...


The raw JSON data I'm grabbing in Fiddler looks like this (sorry for the formatting):

{"id":1,"game":{"Id":1,"Date":"2016-04-20T20:30:00","Team":{"Id":"a5abca2a-0e05-11e6-8596-4f0c9eb370be","Name":"Yellow Duckies","Players":null},"Opposition":"Miller Studios","Overs":[{"Id":1,"Number":1,"Innings":0,"Deliveries":[{"Id":0,"Number":2,"Batter":{"Id":"1a903e4a-0f8a-11e6-99ad-b3c19db370be","Email":"phil@email.address.here","Name":"Phil"},"Bowler":{},"Shot":{"Id":0,"Runs":2,"Stroke":2,"Dismissal":null}}]},{"Id":2,"Number":2,"Innings":0,"Deliveries":null},{"Id":3,"Number":3,"Innings":0,"Deliveries":null},{"Id":4,"Number":4,"Innings":0,"Deliveries":null},...


If I change the Web API PUT parameter to plain
object
, it will pick up the body just fine, so I'm guessing there's a problem with how the object is being parsed, however I'm damned if I can see where that problem sits. Here's the C# model:

namespace IndoorCricket.Models
{
public enum Innings { Batting, Bowling }

public class Game
{
public int Id { get; set; }
public DateTime Date { get; set; }
public virtual Team Team { get; set; }
public string Opposition { get; set; }

public virtual ICollection<Over> Overs { get; set; }
}


public class Over
{
public int Id { get; set; }
public int Number { get; set; }
public Innings Innings { get; set; }

//public virtual Game Game { get; set; }
public virtual ICollection<Delivery> Deliveries { get; set; }
}

public class Delivery
{
public int Id { get; set; }
public int Number { get; set; }
public virtual Shot Shot { get; set; }

public virtual Player Bowler { get; set; }
public virtual Player Batter { get; set; }
}

public class Shot
{
public int Id { get; set; }
public int Runs { get; set; }
public Stroke Stroke { get; set; }
public Dismissal Dismissal { get; set; }
}

public enum Stroke
{
Out = -5,
Dotball = 0,
Single = 1,
Two = 2,
Three = 3,
Four = 4,
Five = 5,
Seven = 7
}

[Flags]
public enum Dismissal
{
Caught = 1,
Bowled = 2,
Runout = 4,
Stumped = 8,
Mankad = 16,
LBW = 32
}
}


Anyone have better eyes that can spot the problem?

Answer

The issue was eventually resolved by changing the API parameter type from strongly-typed "Game" object to a vanilla object. From there, I used JSON.Net to deserialise the object and inspect what was being sent through.

Because I had a reasonable degree of depth in my nested JSON objects, I could see that a property that expected a value was getting null passed to it instead.

I've left it like this for the time being (although it feels icky and I will want to work this through further):

    public IActionResult PutGame(int id, [FromBody] object game)
    {
        JObject obj = JsonConvert.DeserializeObject<JObject>(game.ToString());
        Game g = obj.Root.First.Value<JToken>().First.ToObject<Game>();
    ...