storing and updating a 2d array in application state in Asp.Net MVC 3

Question

I plan to create a simple browser game based on ajax requests. I have a map that consists of 10x10 divs on the client. On the server I have an array[10,10] that represents the state of my divs, so for example if the client clicks on the certain div, an ajax request is sent in the background updating my array and inserting a number 1 into the proper array position. Based on this idea I want all the clients to see the same map so I was thinking storing my map array in the application state (unless there is a better way to do this) because as we all know application state is shared among all clients. So my question is how would I do this, or how do I actually get to the application state in Asp.Net MVC. I searched a lot and couldn't find the proper way of inserting data in application state in Asp.Net MVC 3 especially a two dimentional array which makes things a little bit harder. My code so far works more or less without the use of application state. What I mean is that everytime I create new instance of the map array and I return that instance from the server to the client which is wrong, because I simply want to instanciate one map and to return that same map to everyone, and this is the part that i'm stack on.

//when user visits my site

 public class HomeController : Controller
{

    public MapModel mapModel = new MapModel();

    public ActionResult Index()
    {

        return View(mapModel);
    }

}

//Ajax request when user clicks on a div (map tile)

$(".mapTile").click(function () {
        var xx = $(this).attr("y");
        var yy = $(this).attr("x");

        $("#info").text($(this).attr("x"));
        var tile = {
            X: xx,
            Y: yy,
            Value: 1
        };

        $.ajax({
            beforeSend: function () { ShowAjaxLoader(); },
            url: "/Game/ShowTiles",
            type: "POST",
            contentType: "application/json;charset=utf-8",
            dataType: "json",
            data: JSON.stringify(tile),
            success: function (data) {
                HideAjaxLoader(), $.each(data, function (index, item) {
                    if (item.Value === 1) {                       
                        var xCordinate = item.X;
                        var yCordinate = item.Y;
                        $("#" + yCordinate + xCordinate).css("background-color", "red");
                    }
                });
            },
            error: function () { showErrorMsg(); }
        });
    });

//My models

// Map Model

public class MapModel
{

    private TileModel[,] mapTilesArray;

    public TileModel[,] MapTilesArray
    {
        get
        {
            return mapTilesArray;
        }
        set
        {
            mapTilesArray = value;
        }

    }
    public MapModel()
    {
        MapTilesArray = new TileModel[10,10];
        for (int i = 0; i < 10; i++)
        {
            for (int j = 0; j < 10; j++)
            {
                MapTilesArray[i, j] = new TileModel();
            }
        }
    }

}

//Tile Model

public class TileModel
    {
        public int X{ get; set; }
        public int Y{ get; set; }
        public int Value { get; set; }

    }

//My Game controller

 [HttpPost]
    public JsonResult ShowTiles(TileModel tile)
    {
        MapModel map = new MapModel();
        map.MapTilesArray[tile.X, tile.Y].Value = 1;
        map.MapTilesArray[tile.X, tile.Y].X = tile.X;
        map.MapTilesArray[tile.X, tile.Y].Y = tile.Y;

        return Json(map.MapTilesArray);
    }

Answer 1

Make your MapModel variable static. It'll persist on different requests and you will be able can share the same information to all the users.

Change this line

public MapModel mapModel = new MapModel();

with this

private static MapModel mapModel = new MapModel();

and don't return a new map with each ajax request, just return your static variable.