Category Archives: ASP.NET MVC

New Month’s Resolutions: November 2013

Time to review my October resolutions:

– Give a talk about PHP and Node.js [complete] see post and PHP/Node repo and PageJs repo at PHP Dev Argentina 2013
– Give a talk about TDD with ASP.NET MVC [complete] see repo
– Give a talk about Scala implementation [complete] see slides and simple samples
– Give a talk about Python in JavaScript [complete] see repo and slides at PyCon 2013 Argentina
– Give a talk about Smalltalk in JavaScript and C# [complete] see repo and slides at Smalltalks 2013

This new month’s resolution:

– Start compiler reduced Python to C, using JavaScript
– Give a talk about Ruby in C#
– Start Ruby to JavaScript compiler
– Complete variable scope in Mass language
– Give a talk about compiling languages to JavaScript (to be confirmed)
– Write web framework for AjTalkJs (to be used in Node.js) (plain? MVC?)
– Improve NPM modules in AjTalkJs and AjTalk
– Improve unit test support in AjTalkjs and AjTalk
– Improve match and data structure in AjErl

More fun is coming 😉

Keep tuned!

Angel “Java” Lopez

Social Online Games Programming (Part 5) New Azure Toolkit

Previous Post
Next Post

Two weeks ago, a new version of Windows Azure Toolkit for Social Games was released. See @ntotten posts:

Windows Azure Toolkit for Social Games Version 1.1.1
Windows Azure Toolkit for Social Games Version 1.1

The new version implements two simple HTML5 games: tic-tac-toe and four-in-a-row, backed up by ASP.NET MVC views, WCF Web API services, ACS federated security, and Azure Storage. You can play them online at:

I think this is a more clear example than the previous one (Tankster) that was great but a bit overwhelming ;-). Let’s dive into some implementation details of this new example.

Totten wrote:

The biggest change we have made in this release is to separate the core toolkit from the Tankster game. After we released the Tankster sample game we received a lot of feedback asking for a simpler game that developers could use to learn. To meet this need we developed two simple games, Tic-Tac-Toe and Four in a Row, and included in the toolkit. The Tankster game is now available separately as a sample built on top of the toolkit.

While the new games included in the toolkit are much simpler than Tankster, they still show the same core concepts. You can easily use these samples as a starting point to build out any number of types of games. Additionally, you will find that many of the core components of the game such as the leaderboard services, game command services can be used without any modification to the server side or client side code.

In my previous post, I mentioned a minor but important change in game action processing: any game logic was removed from server code. Adopting this approach, you can write new games without changing the ASP.NET MVC code. You still can add server side code if you want (to have more control over the actions, to avoid player cheating, etc..) but it is interesting to have a base code with game-agnostic code.

Opening the solution in Visual Studio, you will find Javascript files used by the two games. You can write a new game, reusing these files:

The games are implemented as areas:

You could add new games and publish them as NuGet packages.

Visually, the client Javascript code is organized as:

Each game X (TicTacToe, FourInARow, yours) has:

XGame: the game logic

XBoard: to draw board on canvas and to detect click events on it

XViewModel: containing the player and other data to be used at view rendering (the example uses knockout.js, an MVC in Javascript)

XController: to process new events and to coordinate the above elements

The generic part:

UserService: methods related to users: login, get friends, etc.

GameService:  play moves, receives new moves, other actions.

ServerInterface: Ajax calls (using GET, POST, JSONP, Azure storage…) that are used by the implemention of User and Game Service.

Topics for next posts: analyze the Javascript code, the use of Canvas, Javascript tests using QUnit, communication with server using Ajax, change the Game Service (Javascript) to use a Node.js server.

Keep tuned!

Angel “Java” Lopez

Social Online Games Programming (Part 4) Processing arbitrary Game Actions

Previous Post
Next Post

There is a new release of Windows Azure Toolkit for Social Games:

Let examine a key change in this version. There is a new entry at Tankster.GamePlay\Services\IGameService.cs:

[WebInvoke(Method = "POST", UriTemplate = "command/{gameId}")]
HttpResponseMessage Command(Guid gameId, HttpRequestMessage request);
[WebInvoke(Method = "POST", UriTemplate = "command/v2/{gameId}")]
HttpResponseMessage Command2(Guid gameId, HttpRequestMessage request);

There are TWO entry points to send game commands from client. Why? Having two URIs the server can be used by old clients and new ones. Note the “v2” in the UriTemplate.

The new Command2 (partial) code at implementation (GameService.cs):

// Add gameAction
var gameAction = new GameAction
    Id = Guid.NewGuid(),
    Type = commandType,
    CommandData = commandData,
    UserId = this.CurrentUserId,
    Timestamp = DateTime.UtcNow
// Cleanup game actions lists
for (int i = 0; i < game.GameActions.Count(); i++)
    if (game.GameActions[i].Timestamp < DateTime.UtcNow.AddSeconds(-10))
return SuccessResponse;

If you compare the old code (Command method) with the above code, the main difference is:

– The server doesn’t manage the logic of “who is the next player in turn”

– The server doens’t distribute the received command via a GameActionProcessor

And another change: game action type is an int, now. In the previous release, it was an enum, reflecting a fixed set of action types.

It still updates the game status blob adding the new game command (it could be a chat message, or a new shot). In this new way, THE SERVER CODE is more independent from game logic: the client code has the responsibility of select the next player. The notion of turn is leave to game client development. Now, the server code could be used for other multi-players games. Yes, we could have our own Social game! 😉

Windows Azure and worker/web roles are in charge of federated authentication, the formation of  new games, etc. But the engine is more “game agnostic” in this new release.

The client code sends commands:


1- Client code sends a new Game Action in JSON (i.e.: shot information (position, angle, force)).

2- A web role instance receives the Game Action and updates the list of actions in the corresponding game blob status (saving the actions of the last 10 seconds)

3- The other players are polling the game status, until they notice a new game action that implies turn change.

Client code could manage the case of timeout of its player, or the “going offline” of one the other browsers.


– Server code is more generic, and it could be used for other games


– The client code could be cheated (no server control, validation over game actions)

– More complexity (turn logic, timeout management, offline and latency issues, cheat control) at client code.

The litmus test: implementing a new game using the same server code. Some points to polish: skirmish mode is still hardcoded to a maximum of 5 players; the 10 seconds windows for game actions is arbitrary. Possible solutions: each game client code creates a new game (waiting for other players) specifying the minimum, maximum number of players and a timeout in seconds, and time window for game action status.

But remember, the example code is still in beta. A new version is coming.

Keep tuned!

Angel “Java” Lopez

Social Online Games Programming (Part 3) Tankster, Blob Storage and JSONP

Previous Post
Next Post

In my previous post I wrote about the Windows Azure Social Gaming Toolkit, and its example multi-player online game Tankster. See:

There are two interesting posts by @ntotten about the inner guts of the game:

Architecture of Tankster – Introduction to Game Play (Part 1)
Architecture of Tankster– Scale (Part 2)

It’s worth to mention Nathan’s text here:

Before we begin with an explanation of the implementation, it is important to know what our goals where for this game. We had three primary goals when building this game.

  1. The game must scale to handle several hundred thousand concurrent users.*
  2. The architecture must be cost effective.
  3. The architecture must be flexible enough for different types of games.

* This is the goal, but there are still some known limitations in the current version that would prevent this. I will be writing more about that later.

Now, I want to write about the use and implementation of blob storage in Tankster.

Why to use blob storage? If you play Tankster in practice mode, the Javascript client doesn’t use the Azure backend. Javascript can access web role and blob storage via Ajax/JSON calls. But in multi-player game (there is one kind of game, named Skirmish), each player client code polls the blob storage to get the game status (tank shots, chat messages, other status). But again, why blob storage? There are money reasons (cost of each access to Web Role service API vs. cost of read a blob), but I don’t know about Azure prices (you know, MVPs don’t touch the money ;-). But there is another reason: to spread the workload, given some air to web role instances.

There is an AzureBlobContainer class in Tankster.Common library project:

public class AzureBlobContainer<T> : IAzureBlobContainer<T>
    private readonly CloudBlobContainer container;
    private readonly bool jsonpSupport;
    private static JavaScriptSerializer serializer;
    public AzureBlobContainer(CloudStorageAccount account)
        : this(account, typeof(T).Name.ToLowerInvariant(), false)
    public AzureBlobContainer(CloudStorageAccount account, bool jsonpSupport)
        : this(account, typeof(T).Name.ToLowerInvariant(), false)
    public AzureBlobContainer(CloudStorageAccount account, string containerName)
        : this(account, containerName.ToLowerInvariant(), false)


The class use generics. Type T could be a Game, GameQueue or another .NET type. You can reuse this class in other projects: it’s “game agnostic” code. The many constructors add flexibility for testing purpose.

This is the code to save a typed object to a blob:

public void Save(string objId, T obj)
    CloudBlob blob = this.container.GetBlobReference(objId);
    blob.Properties.ContentType = "application/json";
    var serialized = string.Empty;
    serialized = serializer.Serialize(obj);
    if (this.jsonpSupport)
		serialized = this.container.Name + "Callback(" + serialized + ")";

The object (type T) is serialized to JSON. AND not only JSON: note that a there is a Callback (you could remove this part if you don’t need this feature in your project). Then, a game object is saved as (I stolen …errr… borrowed 😉 this code from Nathan’s post):


Why the callback? To support JSONP:

JSONP or “JSON with padding” is a complement to the base JSON data format, a pattern of usage that allows a page to request data from a server in a different domain. As a solution to this problem, JSONP is an alternative to a more recent method called Cross-Origin Resource Sharing.

Under the same origin policy, a web page served from cannot normally connect to or communicate with a server other than An exception is the HTML <script> element. Taking advantage of the open policy for <script> elements, some pages use them to retrieve Javascript code that operates on dynamically-generated JSON-formatted data from other origins. This usage pattern is known as JSONP. Requests for JSONP retrieve not JSON, but arbitrary JavaScript code. They are evaluated by the JavaScript interpreter, not parsed by a JSON parser.

If you are a newbie to JSON and JSONP, this is a short tutorial/example using JQuery (the same library used by Tankster client code):

Cross-domain communications with JSONP, Part 1: Combine JSONP and jQuery to quickly build powerful mashup

But (you know, there is a “but” in every software project 😉 Azure blob storage doesn’t support the JSONP URL (that has a randomly generated callback id):

Query JSON data from Azure Blob Storage with jQuery

There is a proposed solution in that Stack Overflow thread. Agent Maxwell Smart would say: ah! the “old trick” of having the callback in the blob!


You can read a more detailed description of problem/solution with example code at @woloski’s post (good practice Matthew! write a post!):

Ajax, Cross Domain, jQuery, WCF Web API or MVC, Windows Azure

One problem to point: note that the callback name is “hardcoded” in blob storage. The gamesCallback present in game status blob should be the name of a global function. But you can change the blob text to whatever valid Javascript code.

And the client code? You can study the gskinner code at Tankster.GamePlay web project, under src\ui\net\ServerDelegate.js:

(function (window) {

    var ServerDelegate = function () {
        throw new Error('ServerDelegate cannot be instantiated.');

    var p = ServerDelegate;

    p.BASE_API_URL = "/";
    p.BASE_BLOB_URL = "";
    p.BASE_ASSETS_URL = "";
    p.load = function (type, data, loadNow) {
        var req;
        if (p.CLIENT_URL == null) {
            p.CLIENT_URL = window.location.toString();

There is an interesting switch:

switch (type) {
    //Local / config calls
    case 'strings':
        req = new ServerRequest('locale/en_US/strings.js',
		   null, 'jsonp', null, 'stringsCallback'); break;
    //Game calls
    case 'endTurn':
        req = new ServerRequest(apiURL+'Game/EndTurn/',
		    null, 'xml'); break;
    case 'leaveGame':
        req = new ServerRequest(apiURL+'Game/Leave/',
		    {reason:data.reason}, 'xml', ServerRequest.POST); break;
    case 'playerDead':
        req = new ServerRequest(apiURL+'Game/PlayerDead/',
		    null, 'json'); break;
    case 'gameCreate':
        req = new ServerRequest(apiURL+'Game/Queue', data,
		    'xml', ServerRequest.POST); break;
    case 'usersGame':
        req = new ServerRequest(blobURL+'sessions/'+data,
		    null, 'jsonp', null, 'sessionsCallback'); break;
    case 'gameStatus':
        req = new ServerRequest(blobURL+'games/'+data,
		    null, 'jsonp', null, 'gamesCallback'); break;
    case 'gameQueueStatus':
        req = new ServerRequest(blobURL+'gamesqueues/'+data,
		    null, 'jsonp', null, 'gamesqueuesCallback'); break;
    case 'notifications':
        req = new ServerRequest(blobURL+'notifications/'+data,
		    null, 'jsonp'); break;

    //User calls
    case 'verifyUser':

See the ‘gameStatus’ polling: it uses ‘jsonp’ as format. My guess: the ‘gamesCallback’ parameter is not needed: you can use any other name, the function to call resides in the blob content.

I think there are alternatives to game status. The blob reflects the Game entity (see Tankster.Core\Entities\Game.cs). But it could be implemented in two blobs by game:

– One, having the initial status (players, positions,etc…) and the list of ALL the history of the game (think about to implement a chess or go game, you need to save the history).

– Another one, having the “news” (last 10 seconds of game actions). So, the data to poll should be shorter.

The price to pay: web role service should update both. But that update only occurs when a player sends a move (shot, chat…). The poll of game status occurs in every client, triggered by a repeated timeout. Actually, the game blob keeps the last 10 seconds actions AND initial status, weapons, etc…. Each client polls that info. In case a client disconnects and reconnects, it could poll the “complete game” blob to be in sync again.

The separation of that info in two blobs should improve the scalability of the solution. But you know: premature optimization is the root of all evil ;-). If you take that way of store and retrieve games, you should run some stress or/and load tests to have a really measure of such decision impact.

More Tankster code analysis, patterns, and social game dev in general: coming soon.

Some links:

WAT is to Social Gaming, as Windows Azure is to… | Coding4Fun Blog | Channel 9

Thanks! They mention my post 😉

Episode 52 – Tankster and the Windows Azure Toolkit for Social Games | Cloud Cover | Channel 9

Microsoft tailors Azure cloud services to social game developers | VentureBeat

Windows Azure Toolkit for Social Games Released to CodePlex – ‘Tankster’ Social Game Built for Windows Azure

Tankster, a Social Game Built for Windows Azure | Social Gaming on Windows Azure | Channel 9

Social Gaming on Windows Azure | Channel 9

Build Your next Game with the Windows Azure Toolkit for Social Games

Microsoft delivers early build of Windows Azure toolkit for social-game developers | ZDNet

Keep tuned!

Angel “Java” Lopez

Social Online Games Programming (Part 2) Tankster and Windows Azure Toolkit For Social Games

Previous post
Next post

Yesterday, July 20th, Microsoft released a preview version of Windows Azure Toolkit for Social Games, and published a beta version (with code) of a first demo game.

You can download the code from Codeplex:

You can play the game at:

The current solution main projects:

Tankster.GamePlay is a Web Role. The only worker role is Tankster.WorkerRole. Tankster.Core is a class library. There are interesting code at Tankster.Common: Azure utilities to access repositories, a job engine; all its code is game-agnostic.

These are my first short comments about the code and implemented features (remember, is a beta! Some of these features/implementations could change in the next release):

– Client technology: HTML5, Javascript, EaselJs (for canvas programming).
– Server technology: ASP.NET MVC 3, some Razor test views (interesting topic: how to test the game without the REAL game), WCF Web API (another interesting topic to discuss: alternative technologies to received the game activity)
– There is a client game model and entities in Javascript. See src/model, src/game.

– There is a server game model (see Tankster.Core class library project)

– You can play in single player mode, but you can choose multi-player online. Then, the game uses ACS Portal to login using Federated Authentication:

– The client code resides in a single page: index.html (with lot of referenced javascript files)
– Client code sends JSON data (commands) to WCF Web API endpoints, using Ajax/JQuery. There are services published, exposing a REST-like interface


– Most of the game activity is send to game/command service. The service updates the game status residing in a blob at Azure Storage. Code excerpt:

// Add gameAction
var gameAction = new GameAction
    Id = Guid.NewGuid(),
    Type = commandType,
    CommandData = commandData,
    UserId = this.CurrentUserId,
    Timestamp = DateTime.UtcNow
// Cleanup game actions lists
for (int i = 0; i < game.GameActions.Count(); i++)
    if (game.GameActions[i].Timestamp < DateTime.UtcNow.AddSeconds(-10))

– The game status is polled by javascript clients from blob storage. In this way, the ASP.NET MVC web role has less workload.

– The blob resides in the same domain, so no cross-domain JSON call is needed. But the game is prepared to use cross-domain Ajax call, replacing the XmlHttpRequest object by a Flash component.

– The Skirmish game mode (five players in a game) is made queuing the new players in a Game Queue, managed at worker role.

– The Statistics are processed at worker role: some game actions are sent to Azure queue, so the statistics process doesn’t disturb the client game.

– User status, Game status, Skirmish Game Queue status are blobs.

– Statistics data uses SQL Azure.

– There only worker role use a Job Engine to process many tasks, example:

// Game Queue for Skirmish game
    .SetupContext((message, context) =>
         context.Add("userId", message.UserId);
        new SkirmishGameQueueCommand(userRepository,
            gameRepository, workerContext))

There are a lot of points to comment and discuss, feed for upcoming posts. Surely, the solution will evolve and new versions will be published (this week? next week?). But it is interesting to have a published game online AND the code to analyzes it.

Keep tuned!

Angel “Java” Lopez

AjModel: Model by Code (Part 2) Models and Repositories

Previous Post

I was working on my AjModel project. You can download the source code from my AjCodeKatas Project under trunk/AjModel. I added a Model class, and enhanced Entity Model and Property Model:

The model refers all the entity models I want to have in the coded model. AjModel enrich the already coded classes of your model, adding information like human descriptions, legends, etc. The idea is to generate automatically a UI for the coded model, for different technologies. The enhanced model could have nothing new, and AjModel should generate the initial UI, at runtime. The enhanced model could be consumed from differents UI technologies: the “proof of concept” application is an ASP.NET MVC one.

There is a fluent interface for EntityModel, and PropertyModel. There are extension methods, and wrappers/builders, like:

Some usage examples, borrowed from my tests:

EntityModel<Customer> model = new EntityModel<Customer>();
FluentEntityModel<Customer> fluentModel = new FluentEntityModel<Customer>(model);
    .Descriptor("Business Customer")
    .SetDescriptor("Business Customers");
Model model = new Model();
var entityModel = model.ForEntity<Customer>();
entityModel.Descriptor("Business Customer")
    .SetDescriptor("Business Customers");
Model model = new Model();
    c => c.Name,
    pm => pm.Descriptor("Customer Name")
            .Description("The Customer Name")

Where pm is a FluentPropertyModel.

In the UI process, I want to retrieve an entity by its identity. Or I need to get a list of entities to build a grid. Then, I need something to manage the entities, as a list. I implemented repositories in a context, to be implemented by different technologies. The current implementation is an in-memory list:

I’m planning to write adapter examples to NHibernate, Entity Framework, but those ideas are still in blueprints 😉

Usage examples:

this.entityModel = new EntityModel<Customer>();
this.domain = new SimpleDomain();
this.repository = new Repository<Customer>(this.entityModel, this.domain.Customers);

Note that the repository is a typed one, using generics. And it needs an entity model, and (in the current implementation) an IList to manage. The context contains a list of repositories:

var entityModel = new EntityModel<Customer>();
var domain = new SimpleDomain();
var repository = new Repository<Customer>(entityModel, domain.Customers);
var context = new Context();
var repo = context.GetRepository("Customer");

SimpleDomain is a class I created for tests:

public class SimpleDomain
    public SimpleDomain()
        this.Customers = new List<Customer>();
        for (int k = 1; k <= 10; k++)
            Customer customer = new Customer()
                Id = k,
                Name = string.Format("Customer {0}", k)
    public IList<Customer> Customers { get; set; }
    public ProductList Products { get; set; }

A model can be created using a class like SimpleDomain. It discovers IList public properties:

var model = new Model(typeof(SimpleDomain));
var entityModel = model.GetEntityModel("Customer");
entityModel = model.GetEntityModel("Product");

I plan to add all types in an assembly that satisfied a predicate, like having “Entities” in their namespaces.

Entities can be added and retrieved to/from a repository:

Customer entity = new Customer() { Id = 1000 };
Customer newEntity = this.repository.GetEntity(1000);

And they can be removed, too.

Entity model has the info to create new entities from values: a feature I will use in the UI:

EntityModel<Person> model = new EntityModel<Person>();
IDictionary<string, object> values = new Dictionary<string, object>()
    { "Id", 1 },
    { "FirstName", "Joe" },
    { "LastName", "Doe" },
    { "Age", "30" }
object entity = model.NewEntity(values);

In the next posts, I will discuss MVC UI implementation. All is work in progress, but the project is taking shape. And I having fun coding it 😉

Keep tuned!

Angel “Java” Lopez

Writing An Application Using TDD (Part 5) Adding Views

Previous Post
Next Post

Now I have some tests in place, I add some MVC views in this step. You can download the code from my AjCodeKatas Google Project, under trunk/AppTdd/Step04. So, this post has few new tests: it shows how we can build the interface AFTER the tests, and WITHOUT having a database or service layer, yet.

First, I added a new Site.master master page and style.css (borrowed from another ASP.NET MVC project)

I added a new Home controller:

Then, I added a view using the context menu over the Index method:


I modified the master page code, to have a new entry in its menu:

I added a new view associated to Index action in Subject controller:

I selected the “List” view content, and “Subject” as the type to use in the model.

But the controller method is:

public ActionResult Index()
    return View(subjects);

It uses a subject list, that is injected in the constructor by the tests:

public SubjectController(IList<Subject> subjects)
    this.subjects = subjects;

But wait! That list is injected by the tests. Now, I should inject in the normal process of the controller, in its parameter-less constructor:

public SubjectController()
    : this(Domain.Instance.Subjects)

I added a Domain.Instance to use as our in-memory domain:

public class Domain
    private static Domain instance = new Domain();
    private Domain()
        this.Subjects = new List<Subject>()
            new Subject() { Id = 1, Name = "Mathematics" },
            new Subject() { Id = 2, Name = "Physics" },
            new Subject() { Id = 3, Name = "Biology" },
            new Subject() { Id = 4, Name = "Literature" }
    public static Domain Instance { get { return instance; } }
    public IList<Subject> Subjects { get; set; }

I changed the links generated in the Index view from:

to use the Id property as primary key:

This is the result:

I created the other views using the Visual Studio “Add View…” wizard:

I had some missing actions, I wrote a new:

public ActionResult Edit(int id)
    var model = this.subjects.Where(s => s.Id == id).FirstOrDefault();
    return View(model);

With tests! 😉

public void GetSubjectForEdit()
    IList<Subject> subjects = GetSubjects();
    SubjectController controller = new SubjectController(subjects);
    ActionResult result = controller.Edit(1);
    Assert.IsInstanceOfType(result, typeof(ViewResult));
    ViewResult viewResult = (ViewResult)result;
    Assert.IsInstanceOfType(viewResult.ViewData.Model, typeof(Subject));
    Subject model = (Subject)viewResult.ViewData.Model;
    Assert.AreEqual(1, model.Id);
    Assert.AreEqual("Mathematics", model.Name);

Curiously, I detected a “bad” test. I had written in my AddSubject test:

Assert.IsTrue(subjects.Any(s => s.Name == "Chemistry"));
Assert.AreEqual(4, subject.Id);

But the new id should be 5 (our testable list has 4 predefined subjects):

Assert.IsTrue(subjects.Any(s => s.Name == "Chemistry"));
Assert.AreEqual(5, subject.Id);

I fixed the code and the controller action, run the web application, and voila!

Main points:

– I am using an in-memory domain.

– The views run over the already tested actions

No service layer or persistence yet. Next steps: add more classes to domain (Books), service layer (using test), and some persistence.

Interesting related post about development with TDD without a database (or adding it after the tests) by @RonJeffries:

But We Need a Database … Don’t We? |

See? We Don’t Need a Database … Yet |

Keep tuned!

Angel “Java” Lopez