Bdtjtk

I've been trying to send an array of objects to a controller method using AJAX, but even after trying various methods I still won't get my desired result. This is my current code:

View

function SaveGame() {

if ('@Session["Username"]' == '@Model.Player1.Username') {

    p1 = true;

}

else {

    p1 = false;

}

var characters = document.getElementsByClassName("char");

var chardata = ;

for (var i = 0; i < characters.length; i++) {

    var id = characters[i].id;

    var state = characters[i].classList[1];

    chardata.push(id, state);

}

console.log(chardata);

$.ajax({

    url: '@Url.Action("SaveGame", "Game")',

    type: 'GET',

    data: JSON.stringify({ 'character': chardata }),

        cache: false,

        contentType: 'application/JSON',

        success: function (result) {

            alert("Game Saved");

        }

    });

}

Gamecontroller/SaveGame

public bool SaveGame(JsonDecode character)

{

    ViewGame game = (ViewGame)TempData["game"];

    TempData["game"] = game;

    return true;

    //return charLayer.SaveCharacters(game.Id, ids, states, isPlayer1);

}

character will just be null

JsonDecode

public class JsonDecode

{

    public object chardata { get; set; }

}

Your current code is using GET as the type for the $.ajax call. jQuery ajax will issue a GET request to the endpoint with the data appended to the querystring of the URL it is making the call to. When you want to send simple values, it is fine, but when you want to send a complex object like what you want to send, you should use POST type.

Also, for model binding to work, the structure of the data should be similar to your view model structure and property names. Based on the data you want to send, looks like you need a view model like this.

public class GameStateVm

{

    public int Id { set;get;}

    public string State { set;get;}

}

public class SaveGameVm

{

    public GameStateVm Character { set;get;}

    public bool PFlag { set;get;}

}

which you can use as the parameter of your HttpPost action method.

[HttpPost]

public ActionResult SaveGame(SaveGameVm characters)

{   

    //  I am simply returning the posted data as it is, for testing

    //  You may return a boolean value if you want that.      

    return Json(characters);

}

and now in your client side code, make sure your JS object has similar strucutre and property names.

// JS object with same structure as our SaveGameVm

var d = { PFlag: false, character:}; 



d.PFlag = true;  // to do : Set the value based on your condition



// dummy code to add 2 items to the array.

// to do : replace with your code to populate the array

for (var i = 0; i < 2; i++) {

   var id =i;  // to do : replace hard coded values

   var state = 'active';

   d.character.push({ id: id, state: state});

}



$.ajax({

         url: '@Url.Action("SaveGame", "Game")',

         type: 'POST',

         data: JSON.stringify(d),

         contentType: 'application/JSON',

         success: function (result) {

             console.log(result);

         }

});