NCharlie Task Board – MVC Version

It’s unfortunate that paid work has to take precedence over fun blog projects like this… but that’s life!  I have an hour or so tonight, so I’m jumping back in to this task board project.

Last time (February, ‘10!) I wrote about the Webforms implementation of the task board.  That was a good exercise for me, because I’ll be able to take many of the patterns and tools from that little project directly into my “for pay” projects, which are still all Webforms.

This MVC version will take up more than one post; I will try to keep the posts a bit shorter, and I want to record the implementation details with enough depth that I’ll be able to use these notes later to quickly ramp up my team on MVC projects when we get there.

This (image at right) is the initial project tree from Solution Explorer.  You can see some of the same elements from the Webforms version (AutoMapper, StructureMap, a Master page, an NHibernate configuration file and TransactionBoundaryModule that implements the “Session per Request” pattern for data access operations.)  This UI.Mvc project references the same “Core” project that the Webforms project references.

To quickly get started with the “Model-View-Controller” pattern in this project, I created the TaskBoardController class and added one ActionResult method named “Index”:

public ActionResult Index()
{
    var board = new Board("My hard coded test board", 1, 1);
    var column = new Column("Col1", board);
    var task = new Task("task1", column);

    var model = new[] { Mapper.Map<Board, BoardViewModel>(board) };
    return View(model);
}

You can see it just creates a new, hard-coded task board entity, maps it to the BoardViewModel class, and returns it.

To quickly create a View page that will accept this ActionResult, I right-click on the method name “Index” and choose “New View”:

This brings up the Add View wizard, in which I can create a new ASPX view file that is strongly typed to my BoardViewModel class, uses the Master page for my project, and puts in some initial code to display the data:

I chose “List” as the View content type, because that selection assumes I will be returning an enumerable list of models, and puts a “foreach” loop into the ASPX page (I’ll use that code later as I build up the task board… where I used the ASP Repeater control in the Webforms project, I’ll use “foreach” to create the correct HTML in this MVC view page.  This is pure code-generated quick and dirty programming… which I think is dangerous if you don’t use it correctly, but valuable for quickly understanding the ingredients in an MVC web app and getting started with a screen quickly.  Even though this view of the BoardViewModel doesn’t look anything like a task board yet, I think it is useful as an exercise:

To see the generated code, check out the HTML in the Index.aspx file that creates this view.  I tagged this code in source control as “MVC quick start”.  Next, I’ll do things right and create some tests that define a set of actions and expected behavior for the TaskBoardController.