In this post we will go through how to create the game using ASP.NET MVC, jQuery and jQuery UI.

The screenshot below shows the game running.

The code used for creating the game in ASP.NET MVC, jQuery and jQuery UI can be downloaded here.

Getting Started

Instead of three animals used in the demo, the game now contains fourteen. I’ve created a repository which returns the animals. To keep things simple there’s no database here, instead the animals are hard coded.

using System.Linq;
using GameUsingAspNetMVCandJQueryUI.Core.Models;

namespace GameUsingAspNetMVCandJQueryUI.Core.Repository
{
    public class AnimalsRepository : IAnimalsRepository
    {
        public IQueryable<Animal> GetAll()
        {
            return new Animal[]
                       {
                           new Animal(){Name = "Cow"},
                           new Animal(){Name = "Cat"},
                           new Animal(){Name = "Chicken"},
                           new Animal(){Name = "Dog"},
                           new Animal(){Name = "Elephant"},
                           new Animal(){Name = "Giraffe"},
                           new Animal(){Name = "Hippo"},
                           new Animal(){Name = "Lion"},
                           new Animal(){Name = "Monkey"},
                           new Animal(){Name = "Mouse"},
                           new Animal(){Name = "Owl"},
                           new Animal(){Name = "Penguin"},
                           new Animal(){Name = "Pig"},
                           new Animal(){Name = "Sheep"},
                       }
                .AsQueryable();
        }
    }
}

Command Query Separation

One of the features I have added is to ensure a correct answer for the current game could not be the correct answer in the next. As the repository class was responsible for getting animals, having it contain any logic would violate good design principles.

So the logic goes into the service layer which returns a data transfer object for animals and the correct answer.

using System.Linq;
using GameUsingAspNetMVCandJQueryUI.Core.ExtensionMethods;
using GameUsingAspNetMVCandJQueryUI.Core.Models;
using GameUsingAspNetMVCandJQueryUI.Core.Repository;

namespace GameUsingAspNetMVCandJQueryUI.Core.Service
{
    public class AnimalsService : IAnimalsService
    {
        private readonly IAnimalsRepository _animalsRepository;

        public AnimalsService(IAnimalsRepository animalsRepository)
        {
            _animalsRepository = animalsRepository;
        }

        public AnimalsDto GetAnimalsForGameWithCorrectAnswer(int numberOfAnimals, string previousAnimal)
        {
            AnimalsDto animalsDto = new AnimalsDto();
            animalsDto.Animals = _animalsRepository
                .GetAll()
                .Where(a => a.Name != previousAnimal)
                .Shuffle()
                .Take(numberOfAnimals);

            animalsDto.CorrectAnswer = animalsDto.Animals.Shuffle().First().Name;

            return animalsDto;
        }
    }
}

This also makes testing easier because the tests can focus on making sure the service is doing what it should like this

using System;
using System.Linq;
using GameUsingAspNetMVCandJQueryUI.Core.Models;
using GameUsingAspNetMVCandJQueryUI.Core.Repository;
using GameUsingAspNetMVCandJQueryUI.Core.Service;
using NBehave.Spec.NUnit;
using NUnit.Framework;
using Rhino.Mocks;

namespace GameUsingAspNetMVCandJQueryUI.Tests
{
    [TestFixture]
    public class AnimalsServiceTests
    {
        private IAnimalsService _animalsService;
        private IAnimalsRepository _animalsRepository;

        private readonly IQueryable<Animal> _animalsStub = new Animal[]
                           {
                               new Animal(){Name = "Cow"},
                               new Animal(){Name = "Pig"},
                               new Animal(){Name = "Sheep"},
                           }.AsQueryable();

        [SetUp]
        public void SetUp()
        {
            _animalsRepository = MockRepository.GenerateStub<IAnimalsRepository>();
            _animalsService = new AnimalsService(_animalsRepository);
        }

        [Test]
        public void Should_Exclude_Previous_Animal_When_Previous_Animal_Is_Passed_In()
        {
            // Arrange
            _animalsRepository.Stub(a => a.GetAll()).Return(_animalsStub);
            var previousAnimal = _animalsStub.First();

            // Act
            var result = _animalsService.GetAnimalsForGameWithCorrectAnswer(3, previousAnimal.Name);

            // Assert
            result.Animals.Count(a => a.Name == previousAnimal.Name).ShouldEqual(0);
        }

        [Test]
        public void Should_Return_All_Animals_When_No_Previous_Animal_Is_Passed_In()
        {
            // Arrange
            _animalsRepository.Stub(a => a.GetAll()).Return(_animalsStub);
            string previousAnimal = String.Empty;

            // Act
            var result = _animalsService.GetAnimalsForGameWithCorrectAnswer(3, previousAnimal);

            // Assert
            result..Animals.Count().ShouldEqual(3);
        }

        [Test]
        public void Should_Return_All_Animals_When_No_Previous_Animal_Is_Null()
        {
            // Arrange
            _animalsRepository.Stub(a => a.GetAll()).Return(_animalsStub);
            string previousAnimal = null;

            // Act
            var result = _animalsService.GetAnimalsForGameWithCorrectAnswer(3, previousAnimal);

            // Assert
            result.Animals.Count().ShouldEqual(3);
        }

        [Test]
        public void Correct_Answer_Should_Not_Be_Empty()
        {
            // Arrange
            _animalsRepository.Stub(a => a.GetAll()).Return(_animalsStub);            

            // Act
            var result = _animalsService.GetAnimalsForGameWithCorrectAnswer(3, null);

            // Assert
            result.CorrectAnswer.ShouldNotBeEmpty();
        }
    }
}

The LINQ Shuffle

Even though we have removed the previous answer, if the animals were returned as they are the answer would just be the next one in the list. So to keep the game exciting, a shuffle extension method is used to shuffle the answers.

using System;
using System.Collections.Generic;
using System.Linq;

namespace GameUsingAspNetMVCandJQueryUI
{
    public static class GameExtensions
    {
        public static IEnumerable<T> Shuffle<T>(this IEnumerable<T> items)
        {
            var rnd = new Random();
            IEnumerable<int> numbers = Enumerable.Range(0, items.Count()).OrderBy(r => rnd.Next());
            var randomItems = new List<T>();
            foreach (int number in numbers)
            {
                randomItems.Add(items.Skip(number).First());
            }
            return randomItems;
        }
    }
}

This can be unit tested as shown below

using System.Collections.Generic;
using System.Linq;
using GameUsingAspNetMVCandJQueryUI.Core.Models;
using NUnit.Framework;

namespace GameUsingAspNetMVCandJQueryUI.Tests
{
    [TestFixture]
    public class GameExtensionsTests
    {
        [Test]
        public void Can_Shuffle_Animals()
        {
            List<Animal> animals = new List<Animal>()
                           {
                               new Animal(){Name = "Cow"},
                               new Animal(){Name = "Pig"},
                               new Animal(){Name = "Sheep"},
                           };
            IList<Animal> result = animals.Shuffle().ToList();
            Assert.IsFalse(
                animals[0].Equals(result[0]) &&
                animals[1].Equals(result[1]) &&
                animals[2].Equals(result[2]),
                "Animals should have been shuffled");
        }
    }
}

What happens when a player opens the game in their browser?

When the page loads an Ajax call is made using jQuery to an Asp.Net MVC action method which returns a JsonResult.

   $.getJSON("/Game/GetAnimals",
            { numberOfAnimals: numberOfItemsToGet, previousAnimal: correctAnswer.text() },
            function(data) {
                addItems(data);
                $("#droppable").droppable(droppableOptions);
                assignDraggables();
                hideItemsForLevel();
                setUpSlider();
                setTimeout(function() {
                    instructions.text(instructionsText);
                    items.show();
                }, 1000);
            });

Two parameters are passed to the action method, one for the previous answer and the other for the number of animals required. The reason for this is because we don’t want to transfer more data over the wire than required, why return fourteen animals when only six are required?

The ‘GetAnimals’ Asp.Net MVC action method shown below serializes the view model returned by the service layer into JSON.

using System.Web.Mvc;
using GameUsingAspNetMVCandJQueryUI.Core.Service;

namespace GameUsingAspNetMVCandJQueryUI.Controllers
{
    [HandleError]
    public class GameController : Controller
    {
        private readonly IAnimalsService _animalsService;

        public GameController(IAnimalsService animalsService)
        {
            _animalsService = animalsService;
        }

        public ActionResult Index()
        {
            return View("Index");
        }

        [OutputCache(NoStore = true, Duration = 0, VaryByParam = "*")]
        public JsonResult GetAnimals(int numberOfAnimals, string previousAnimal)
        {
            return Json(_animalsService.GetAnimalsForGameWithCorrectAnswer(numberOfAnimals,previousAnimal));
        }
    }
}

Notice how I have to be explicit about how I do NOT want the JsonResult to be cached. If you don’t add this Internet Explorer will cache the result and you will get the same animals.

Using the jQuery and jQuery UI in the ASP.NET MVC View

The JavaScript used the demo was good enough to perform the dragging and dropping of pictures so the good news is we can use it again here.

An additional feature I have added is to allow the player to change the difficulty of the game by choosing how many animals are shown on the screen.

To do this I used the jQuery UI slider and jQuery fade functionality. The reason I used fade rather show/hide in jQuery was because I didn’t want the animals to move position when a user changed the difficulty as this would have resulted in a poor user experience by confusing the player.

Currently the message which tells the player if they have selected an incorrect answer is shown when the user stops dragging the animal. This is a problem because if the user drags a correct animal but doesn’t drop it on the droppable a message isn’t shown. If I find a fix for this I’ll update the code and this post.

Jag Reehal’s Final Thought on ‘Creating the animals game using Asp.Net MVC, jQuery and jQueryUI’

I’ve been using jQuery for a while now and I still love it.

The jQuery UI library is very good and the jQuery UI team have done a fantastic job creating demos and documentation.

I really like how you can create your own custom javascript file which only contains the features you require from the library.

No doubt some people will question why the service is returning a data transfer object. I could have returned a collection of animals to the ASP.NET MVC controller and have it create an object to pass to the view. The reason I didn’t do this is because I know the data transfer object will be used by another user interface layer (Silverlight) and because this would have bloated the controller and that’s not good. A best practice for ASP.NET MVC is to have skinny controllers.

The images for the animals used in the game are from http://www.openclipart.org.

It must be a good approach because Microsoft are implementing Templated Helpers to do what I’m showing you today in ASP.NET MVC 2. See Ben Scheirmans’ post A First Look at ASP.NET MVC 2 for more information.

In this post I want to show you two view implementations based on adapted versions of the Account Controller and LogOn view which are created whenever you do File > New > Project > ASP.NET MVC Web Application.

The slimmed down AccountController looks like this

using System;
using System.Web.Mvc;

namespace AspNetMvcViewBestPractices.Controllers
{
    public class AccountController : Controller
    {
        public ActionResult LogOn()
        {
            return View();
        }

        [AcceptVerbs(HttpVerbs.Post)]
        public ActionResult LogOn(string UserName, string Password, bool RememberMe)
        {
            if (!ValidateLogOn(UserName, Password))
            {
                return View();
            }

            return RedirectToAction("Index", "Product");
        }

        private bool ValidateLogOn(string userName, string password)
        {
            if (String.IsNullOrEmpty(userName))
            {
                ModelState.AddModelError("UserName", "You must specify a username.");
            }
            if (String.IsNullOrEmpty(password))
            {
                ModelState.AddModelError("Password", "You must specify a password.");
            }
            if (!(userName == "admin" && password == "password"))
            {
                ModelState.AddModelError("_FORM", "The username or password provided is incorrect.");
            }

            return ModelState.IsValid;
        }
    }
}

The LogOn view is shown below

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage" %>

<asp:Content ID="loginContent" ContentPlaceHolderID="MainContent" runat="server">
    <h2>Log On</h2>

    <%= Html.ValidationSummary("Login was unsuccessful. Please correct the errors and try again.") %>

    <% using (Html.BeginForm()) { %>
        <div>
            <fieldset>
                <legend>Account Information</legend>
                <p>
                    <label for="UserName">UserName</label>
                    <%= Html.TextBox("UserName") %>
                    <%= Html.ValidationMessage("UserName") %>
                </p>
                <p>
                    <label for="Password">Password</label>
                    <%= Html.Password("Password") %>
                    <%= Html.ValidationMessage("Password") %>
                </p>
                <p>
                    <%= Html.CheckBox("RememberMe") %> <label class="inline" for="RememberMe">Remember me?</label>
                </p>
                <p>
                    <input type="submit" value="Log On" />
                </p>
            </fieldset>
        </div>
    <% } %>
</asp:Content>

There are two problems I have this view. The first is that everything is tightly coupled using what are known as magic strings. For example if you change the line

<%= Html.TextBox("UserName") %>

to

<%= Html.TextBox("Username") %>

the UserName argument in the LogOn form post action no longer gets populated when the form is submitted. This is because the name for the id in the form and name in the method signature need to be the same.

The other is the amount of html you have to manually write. Sometimes Visual Studio can tell you if have made a typo in your html mark up, but not always. For example it can’t detect an error like this

<input type="sumbit" />

As I mentioned in my previous post unless you go through the laborious process of creating front end tests, the first time you will notice is when you view the website in a browser or one of your customers tell you.

How I would create the LogOn view

1. Create a LogOnForm data transfer object (DTO)

namespace AspNetMvcViewBestPractices.Models
{
    public class LogOnForm
    {
        public string UserName { get; set; }
        public string Password { get; set; }
        public bool RememberMe { get; set; }
    }
}

2. Change the signature of the Account controllers’ LogOn post action to take in the LogOnForm DTO. This model will be populated by the ASP.NET MVC model binders using the form values.

[AcceptVerbs(HttpVerbs.Post)]
public ActionResult LogOn(LogOnForm logOnForm)
{
    if (!ValidateLogOn(logOnForm.UserName, logOnForm.Password))
    {
        return View(logOnForm);
    }

    return RedirectToAction("Index", "Product");
}

3. Add a reference to the MvcContrib.FluentHtml assembly.

4. Change the view so it inherits from ‘MvcContrib.FluentHtml.ModelViewPage‘.

<%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="MvcContrib.FluentHtml.ModelViewPage<LogOnForm>" %>

5. Use the MvcContrib.FluentHtml assembly to create the html in the view

            <fieldset>
                <legend>Account Information</legend>
                <p>
                   <%=this.TextBox(m => m.UserName).Label("UserName")%>
                   <%=this.ValidationMessage(m => m.UserName)%>
                </p>
                <p>
                   <%=this.TextBox(m => m.Password).Label("Password")%>
                   <%=this.ValidationMessage(m => m.Password )%>
                </p>
                <p>
                    <%=this.CheckBox(c => c.RememberMe).LabelAfter(" Remember me?","inline")%>
                </p>
                <p>
                    <%=this.SubmitButton("Log On") %>
                </p>
            </fieldset>

Now there is less chance of any html typos in the view and we no longer have magic strings for the ids of the input fields. The MvcContrib.FluentHtml assembly can generate the ids from the property names in the view model for you automatically.

This means you no longer have to search for strings in views if you change the name of a property.

If you’re at all worried about the html generated by the MvcContrib.FluentHtml assembly don’t be, it’s as good if you had written it yourself.

For more information about the MvcContrib.FluentHtml assembly check out blog posts below:

• MvcFluentHtml – Fluent HTML Interface For MS MVC
• Editing a Variable Length List Of Items With MvcContrib.FluentHtml – Take 2
• Eliminate Magic Strings In Javascript With MvcContrib.FluentHtml

What about ASP.NET MVC 2?

In ASP.NET MVC 2 the DisplayFor html helper can be used to create the html for the model like this

<%= Html.DisplayFor(m => m.Password) %>

What it can’t do (at the time of writing) is any chaining for things like labels e.g.

<%=this.TextBox(m => m.Password).Label("Password")%>

Jag Reehal’s Final Thought on ‘ASP.NET MVC View Best Practices – Save time creating views with MvcContrib.FluentHtml’

in this post I wanted to demonstrate the why at this moment in time I use the MvcContrib.FluentHtml assembly for creating html in my views.

It will definitely save you time and you will be more productive because you’re no longer going to write as much html plumbing code.

One of the easiest mistakes is to implement logic in their views.

It’s no surprise developers such as Rob Conery have advised against having conditional code in ASP.NET MVC views. Before you know it a view that was simple and easy to understand becomes a complex monster intertwined with html and logic.

The code used in this post can be downloaded here.

The fact is ASP.NET MVC views which contain logic will ultimately end up being a nightmare to maintain and test.

Here is an example of what I mean. When displaying product information, our client wants to show to the number of units in stock. The background colour should reflect the stock level as shown below (along with the css class name)

This could be implemented by creating the view like this

<div class="stockLevel
   <%=Model.UnitsInStock == 0 ? " stockLevelNone" : String.Empty%>
   <%=Model.UnitsInStock > 0 && Model.UnitsInStock <= 20 ? " stockLevelLow" : String.Empty%>
   <%=Model.UnitsInStock > 20 ? " stockLevelHigh" : String.Empty%>
   ">
    <span>Number Of Units In Stock: <%=Model.UnitsInStock %></span>
</div>

Because there is logic in the ASP.NET MVC view, you have to go through the laborious process of creating front end tests or creating a product, setting the number in stock and then checking the correct class is used by viewing the page source for each condition. And if that wasn’t difficult enough, imagine doing that every time you do a release.

So what if I said there are alternative methods which could:

• reduce the chance of typos in your html
• clean up your view
• be testable
• be reused so you can follow the “Don’t Repeat Yourself (DRY)” principle which will save you so much time!

Option1 – Move the logic for choosing the css class into a helper method

The conditional logic in the ASP.NET MVC view can be replaced by a method which takes in the number of units in stock and returns the appropriate css class as shown below.

using System;

namespace AspNetMvcViewBestPractices.Helpers
{
    public static class ProductCssHelper
    {
        public const string STOCK_LEVEL_NONE_CSS_CLASS = "stockLevelNone";
        public const string STOCK_LEVEL_LOW_CSS_CLASS = "stockLevelLow";
        public const string STOCK_LEVEL_HIGH_CSS_CLASS = "stockLevelHigh";

        public static string GetCssClassForUnitsInStock(int unitsInStock)
        {
            if (unitsInStock == 0)
            {
                return STOCK_LEVEL_NONE_CSS_CLASS;
            }
            if (unitsInStock > 0 && unitsInStock <= 20)
            {
                return STOCK_LEVEL_LOW_CSS_CLASS;
            }
            if (unitsInStock > 20)
            {
                return STOCK_LEVEL_HIGH_CSS_CLASS;
            }
            return String.Empty;
        }
    }
}

In the view the number of units in stock is passed to the css helper method

<div class="stockLevel <%=ProductCssHelper.GetCssClassForUnitsInStock(Model.UnitsInStock)%>">
    <span>Number Of Units In Stock: <%=Model.UnitsInStock %></span>
</div>

And the css helper method can now be unit tested as shown below

using System;
using AspNetMvcViewBestPractices.Helpers;
using NUnit.Framework;

namespace AspNetMvcViewBestPractices.Tests
{
    [TestFixture]
    public class ProductCssHelperTests
    {
        [Test]
        public void Will_Return_StockLevelNone_Css_Class_If_There_Are_No_Units_In_Stock()
        {
            // Arrange
            int unitsInStock = 0;

            // Act
            string cssClass = ProductCssHelper.GetCssClassForUnitsInStock(unitsInStock);

            // Assert
            Assert.AreEqual(ProductCssHelper.STOCK_LEVEL_NONE_CSS_CLASS,cssClass);
        }

        [Test]
        public void Will_Return_StockLevelLow_Css_Class_If_Units_In_Stock_Is_Between_One_And_Twenty(
            [Range(1, 20)] int unitsInStock)
        {
            // Arrange        

            // Act
            string cssClass = ProductCssHelper.GetCssClassForUnitsInStock(unitsInStock);

            // Assert
            Assert.AreEqual(ProductCssHelper.STOCK_LEVEL_LOW_CSS_CLASS, cssClass);
        }

        [Test]
        public void Will_Return_StockLevelHigh_Css_Class_If_Units_In_Stock_Is_Over_Twenty()
        {
            // Arrange
            int unitsInStock = 21;

            // Act
            string cssClass = ProductCssHelper.GetCssClassForUnitsInStock(unitsInStock);

            // Assert
            Assert.AreEqual(ProductCssHelper.STOCK_LEVEL_HIGH_CSS_CLASS, cssClass);
        }

        [Test]
        public void Will_Return_EmptyString_If_Units_In_Stock_Is_Less_Then_Zero()
        {
            // Arrange
            int unitsInStock = -1;

            // Act
            string cssClass = ProductCssHelper.GetCssClassForUnitsInStock(unitsInStock);

            // Assert
            Assert.AreEqual(String.Empty, cssClass);
        }
    }
}

Option 2 – Create a method to build the html for displaying the number of units in stock

I first saw this approach in Mike Hadlows’ Suteki Shop. Here an html helper method takes in the number of units in stock and returns an html string

using System;

namespace AspNetMvcViewBestPractices.Helpers
{
    public static class ProductHtmlHelper
    {
        public const string STOCK_LEVEL_NONE_CSS_CLASS = "stockLevelNone";
        public const string STOCK_LEVEL_LOW_CSS_CLASS = "stockLevelLow";
        public const string STOCK_LEVEL_HIGH_CSS_CLASS = "stockLevelHigh";
        public const string UNITS_IN_STOCK_HTML = @"<div class=""stockLevel {0}""><span>Number Of Units In Stock: {1}</span></div>";

        public static string GetHtmlForUnitsInStock(int unitsInStock)
        {
            if (unitsInStock == 0)
            {
                return String.Format(UNITS_IN_STOCK_HTML,STOCK_LEVEL_NONE_CSS_CLASS,unitsInStock);
            }
            if (unitsInStock > 0 && unitsInStock <= 20)
            {
                return String.Format(UNITS_IN_STOCK_HTML, STOCK_LEVEL_LOW_CSS_CLASS, unitsInStock);
            }
            if (unitsInStock > 20)
            {
                return String.Format(UNITS_IN_STOCK_HTML, STOCK_LEVEL_HIGH_CSS_CLASS, unitsInStock);
            }
            return String.Format(UNITS_IN_STOCK_HTML, String.Empty, unitsInStock);
        }
    }
}

In the view a call is made to the html helper method passing the number of units in stock

<%=ProductHtmlHelper.GetHtmlForUnitsInStock(Model.UnitsInStock)%>

The html helper can be unit tested like this

using System;
using AspNetMvcViewBestPractices.Helpers;
using NUnit.Framework;

namespace AspNetMvcViewBestPractices.Tests
{
    [TestFixture]
    public class ProductHtmlHelperTests
    {
        [Test]
        public void Will_Return_StockLevelNone_Html_If_There_Are_No_Units_In_Stock()
        {
            // Arrange
            int unitsInStock = 0;
            string expectedResult = @"<div class=""stockLevel stockLevelNone""><span>Number Of Units In Stock: 0</span></div>";

            // Act
            string html = ProductHtmlHelper.GetHtmlForUnitsInStock(unitsInStock);

            // Assert
            Assert.AreEqual(expectedResult,html);
        }

        [Test]
        public void Will_Return_StockLevelLow_Html_If_Units_In_Stock_Is_Between_Zero_And_Twenty(
            [Range(1, 20)] int unitsInStock)
        {
            // Arrange
            string expectedResult = String.Format(@"<div class=""stockLevel stockLevelLow""><span>Number Of Units In Stock: {0}</span></div>", unitsInStock);

            // Act
            string html = ProductHtmlHelper.GetHtmlForUnitsInStock(unitsInStock);

            // Assert
            Assert.AreEqual(expectedResult, html);
        }

        [Test]
        public void Will_Return_StockLevelHigh_Html_If_Units_In_Stock_Is_Over_Twenty()
        {
            // Arrange
            int unitsInStock = 21;
            string expectedResult = @"<div class=""stockLevel stockLevelHigh""><span>Number Of Units In Stock: 21</span></div>";

            // Act
            string html = ProductHtmlHelper.GetHtmlForUnitsInStock(unitsInStock);

            // Assert
            Assert.AreEqual(expectedResult, html);
        }

        [Test]
        public void Will_Return_Html_With_NoStockLevelIndicator_If_Units_In_Stock_Is_Less_Then_Zero()
        {
            // Arrange
            int unitsInStock = -1;
            string expectedResult = @"<div class=""stockLevel ""><span>Number Of Units In Stock: -1</span></div>";

            // Act
            string html = ProductHtmlHelper.GetHtmlForUnitsInStock(unitsInStock);

            // Assert
            Assert.AreEqual(expectedResult, html);
        }
    }
}

Option 3 – Use a Product data transfer object with a css class name property

Instead of passing the product model into the view, we could map it into a data transfer object that has a property for the css class name. For this to work the controller needs to perform the mapping before returning a model to the view. I will be covering the why you should avoid using domain models directly into views in a future blog post.

The view model/data transfer object is shown below

namespace AspNetMvcViewBestPractices.Models
{
    public class ProductDto
    {
        public Product Product { get; set; }
        public string UnitsInStockCssClassName { get; set; }
    }
}

The mapping class looks like this

using AspNetMvcViewBestPractices.Helpers;
using AspNetMvcViewBestPractices.Models;

namespace AspNetMvcViewBestPractices.Mappers
{
    public static class ProductDtoMapper
    {
        public static ProductDto Map(Product product)
        {
            ProductDto productDto = new ProductDto();
            productDto.Product = product;
            productDto.UnitsInStockCssClassName =  ProductCssHelper.GetCssClassForUnitsInStock(product.UnitsInStock);
            return productDto;
        }
    }
}

And can be unit tested like this

using AspNetMvcViewBestPractices.Mappers;
using AspNetMvcViewBestPractices.Models;
using NUnit.Framework;

namespace AspNetMvcViewBestPractices.Tests
{
    [TestFixture]
    public class ProductDtoMapperTests
    {
        [Test]
        public void Can_Map_Product_to_ProductDto()
        {
            // Arrange
            Product product = new Product();
            product.UnitsInStock = 10;

            // Act
            ProductDto productDto = ProductDtoMapper.Map(product);

            // Assert
            Assert.AreEqual(product, productDto.Product);
        }
    }
}

The controller uses the Product mapper as shown below

public ActionResult DisplayProductUsingMapper()
{
    Product product = new Product();
    Random random = new Random();
    product.UnitsInStock = random.Next(0, 30);

    ProductDto productDto = ProductDtoMapper.Map(product);
    return View(productDto);
}

Now the view does not need to make any method calls and only uses properties in the view model

<div class="stockLevel <%=Model.UnitsInStockCssClassName%>">
    <span>Number Of Units In Stock: <%=Model.Product.UnitsInStock %></span>
</div>

Option 4 – When you need to show all css options in the view

I created this option after a comment I received. If you’re working with designers and/or want to show the css classes in the view this option will be to go for. Similar to first option we can use a css helper but this time we pass in the the number of units in stock and the css classes as shown below

using System;

namespace AspNetMvcViewBestPractices.Helpers
{
    public static class ProductCssHelper
    {
        public static string SelectCssClassForUnitsInStock(int unitsInStock, string stockLevelNone, string stockLevelLow, string stockLevelHigh)
        {
            if (unitsInStock == 0)
            {
                return stockLevelNone;
            }
            if (unitsInStock > 0 && unitsInStock <= 20)
            {
                return stockLevelLow;
            }
            if (unitsInStock > 20)
            {
                return stockLevelHigh;
            }
            return String.Empty;
        }
    }
}

In the view the number of units in stock and the css classes are passed to the css helper method

<div class="stockLevel <%=ProductCssHelper.SelectCssClassForUnitsInStock(Model.UnitsInStock,"stockLevelNone","stockLevelLow","stockLevelHigh")%>">
    <span>Number Of Units In Stock: <%=Model.UnitsInStock %></span>
</div>

And can be unit tested like this

using System;
using AspNetMvcViewBestPractices.Helpers;
using NUnit.Framework;

namespace AspNetMvcViewBestPractices.Tests
{
    [TestFixture]
    public class ProductCssHelperTests
    {
        [Test]
        public void SelectCssClassForUnitsInStock_Returns_First_Css_Class_If_There_Are_No_Units_In_Stock()
        {
            // Arrange
            int unitsInStock = 0;

            // Act
            string cssClass = ProductCssHelper.SelectCssClassForUnitsInStock(unitsInStock,"a","b","c");

            // Assert
            Assert.AreEqual("a", cssClass);
        }

        [Test]
        public void SelectCssClassForUnitsInStock_Returns_Second_Css_Class_If_Units_In_Stock_Is_Between_One_And_Twenty(
            [Range(1, 20)] int unitsInStock)
        {
            // Arrange        

            // Act
            string cssClass = ProductCssHelper.SelectCssClassForUnitsInStock(unitsInStock, "a", "b", "c");

            // Assert
            Assert.AreEqual("b", cssClass);
        }

        [Test]
        public void SelectCssClassForUnitsInStock_Returns_Third_Css_Class_If_Units_In_Stock_Is_Over_Twenty()
        {
            // Arrange
            int unitsInStock = 21;

            // Act
            string cssClass = ProductCssHelper.SelectCssClassForUnitsInStock(unitsInStock, "a", "b", "c");

            // Assert
            Assert.AreEqual("c", cssClass);
        }

        [Test]
        public void SelectCssClassForUnitsInStock_Returns_Empty_String_If_Units_In_Stock_Is_Less_Then_Zero()
        {
            // Arrange
            int unitsInStock = -1;

            // Act
            string cssClass = ProductCssHelper.SelectCssClassForUnitsInStock(unitsInStock, "a", "b", "c");

            // Assert
            Assert.AreEqual(String.Empty, cssClass);
        }
    }
}

Jag Reehal’s Final Thought on ‘ASP.NET MVC View Best Practices – Keep logic out of your views’

I like my views to contain html but not logic so I prefer options 1, 3 and 4. Because the html is hidden in option 2 finding out what method rendered what html could be like finding a needle in a haystack. In addition the the unit tests for the html helper method are difficult to maintain as you have to check the entire html string is correct.

If you’re working with a designer you should choose option 4.

Yesterday I went to Scott Gu’s demo of ASP.NET MVC 2 (using the preview 2 release) in London and got to meet Mr ASP.NET MVC

I’m not going to cover everything that’s coming in ASP.NET MVC 2 in any depth because Scott Gu and Ben Scheirman’ First Look at ASP.NET MVC 2 do a good job of that.

It’s interesting to see that Microsoft is taking rapid web development and templating so seriously. Using the new UI helpers you can create html for labels, inputs and validation with just one line of code in your view instead of three.

This will save you time and mean there is less chance of having any html typos. It will also make it easier to refactor because everything is strongly typed! If you wanted to do this now you could create an html helper extension.

What you can’t do now (not easily anyway) is just have the UI helpers create the label, input and validation for an entire model with one line of code. This will save you even more time and means you don’t have to manually edit html in views just because you have added new properties to your view model.

Amazing I think you will agree, however I can’t help thinking it’s not going to be testable and could potentially lead to inadvertently displaying something you didn’t want to show.

Scott also showed how to use System.ComponentModel.DataAnnotations for validation and the client side validation which uses the jQuery validation framework. If you want that functionality now checkout Steve Sanderson’s excellent xVal framework.

I asked Scott if there was a possibility of not having ‘magic strings’ in action links and the render partial methods. He said they were working on it, so hopefully we could see something in preview 3.

As for release dates, Scott Gu suggested ASP.NET MVC 2 should be ready early next year.

I have no doubt that ASP.NET MVC 2 will make it even better to develop web sites with.

If you want to see a recording of Scott Guthrie talking about ASP.NET MVC 2 it’s available on Channel 9.

In this post we’re looking at why your ASP.NET MVC controllers should be ‘skinny’.

The code used in this post can be downloaded here.

I’ve heard Jeffrey Palermo say if you can’t see a ASP.NET MVC action method on a screen without having to scroll, you have a problem. In most cases the problem is the controller has multiple responsibilities.

The code in this post is adapted from a code sample I saw in an ASP.NET MVC book.

The controller looks like this

using System;
using System.Linq;
using System.Web.Mvc;
using TestingMvcControllers.Interfaces;
using TestingMvcControllers.Models;

namespace TestingMvcControllers.Controllers
{
    public class AnimalsController : Controller
    {
        public int PageSize = 4;
        private readonly IAnimalsRepository _animalsRepository;

        public AnimalsController(IAnimalsRepository animalsRepository)
        {
            _animalsRepository = animalsRepository;
        }

        public ViewResult List(string category, int page)
        {
            var animalsInCategory = (category == null)
                                        ? _animalsRepository.Animals
                                        : _animalsRepository.Animals.Where(x => x.Category == category);

            int numberOfAnimals = animalsInCategory.Count();
            ViewData["TotalPages"] = (int)Math.Ceiling((double)numberOfAnimals / PageSize);
            ViewData["CurrentPage"] = page;
            ViewData["CurrentCategory"] = category;

            return View(animalsInCategory
                            .Skip((page - 1) * PageSize)
                            .Take(PageSize)
                            .ToList()
                );
        }
    }
}

This approach will work, but what if you wanted to implement paging for another user interface? You would not be able to reuse the paging functionality in the controller and have to repeat yourself. This goes against the ‘Don’t Repeat Yourself (DRY) principle.

At this point some of you maybe be saying you ain’t gonna need it (YAGNI). Maybe… but let’s have a look at impact paging logic in the controller has when it comes to the unit testing the ASP.NET MVC controller.

using System.Collections.Generic;
using NUnit.Framework;
using Rhino.Mocks;
using TestingMvcControllers.Controllers;
using TestingMvcControllers.Interfaces;
using TestingMvcControllers.Models;

namespace TestingMvcControllers.Tests
{
    [TestFixture]
    public class AnimalsControllerTests
    {
        private IAnimalsRepository _animalsRepository;
        private AnimalsController _controller;

        [SetUp]
        public void SetUp()
        {
            _animalsRepository = MockRepository.GenerateStub<IAnimalsRepository>();
            _controller = new AnimalsController(_animalsRepository);
        }

        [Test]
        public void List_Presents_Correct_Page_Of_Animals()
        {
            // Arrange
            _controller.PageSize = 3;

            // Act
            _animalsRepository.Stub(a => a.Animals).Return(AnimalsStub.Animals);
            var result = _controller.List(null, 2);

            // Assert
            Assert.IsNotNull(result, "Didn't render view");
            var Animals = result.ViewData.Model as IList<Animal>;
            Assert.AreEqual(2, Animals.Count, "Got wrong number of animals");
            Assert.AreEqual(2, (int)result.ViewData["CurrentPage"], "Page number was wrong");
            Assert.AreEqual(2, (int)result.ViewData["TotalPages"], "Page count was wrong");
            Assert.AreEqual("Iguana", Animals[0].Name);
            Assert.AreEqual("Loin", Animals[1].Name);
        }

        [Test]
        public void List_Includes_All_Animals_When_Category_Is_Null()
        {
            // Arrange
            _controller.PageSize = 10;            

            // Act
            _animalsRepository.Stub(a => a.Animals).Return(AnimalsStub.Animals);
            var result = _controller.List(null, 1);

            // Assert
            Assert.IsNotNull(result, "Didn't render view");
            var Animals = (IList<Animal>)result.ViewData.Model;
            Assert.AreEqual(5, Animals.Count, "Should have got 5 animals");
        }

        [Test]
        public void List_Filters_By_Category_When_Requested()
        {
            // Arrnage
            _controller.PageSize = 10;

            // Act
            _animalsRepository.Stub(a => a.Animals).Return(AnimalsStub.Animals);
            var result = _controller.List("Reptile", 1);

            // Assert
            Assert.IsNotNull(result, "Didn't render view");
            var Animals = (IList<Animal>)result.ViewData.Model;
            Assert.AreEqual(3, Animals.Count, "Should have got 3 animals");
            Assert.AreEqual("Crocodile", Animals[0].Name);
            Assert.AreEqual("Snake", Animals[1].Name);
            Assert.AreEqual("Iguana", Animals[2].Name);
            Assert.AreEqual("Reptile", result.ViewData["CurrentCategory"]);
        }
    }
}

Because the controller is also responsible for paging, you have to write unit tests for paging logic on top of the unit tests you should be writing for the controller. This means you will either ending up not testing enough and/or too much and find the tests a nightmare to maintain in the future. See my post about How to Unit Test ASP.NET MVC Controllers.

How I would refactor

I would move the paging functionality into a new layer. Yes I know adding another layer is always the solution to any problem in software development

The animal service layer looks like this

using System;
using System.Linq;
using TestingMvcControllers.Interfaces;
using TestingMvcControllers.Models;

namespace TestingMvcControllers.Services
{
    public class AnimalsService : IAnimalsService
    {
        private readonly IAnimalsRepository _animalsRepository;
        public int PageSize = 4;

        public AnimalsService(IAnimalsRepository animalsRepository)
        {
            _animalsRepository = animalsRepository;
        }

        public AnimalsDto GetAnimals(string category, int page)
        {
            AnimalsDto animalsDto = new AnimalsDto();

            var animalsInCategory =  (category == null)
                            ? _animalsRepository.Animals
                            : _animalsRepository.Animals.Where(x => x.Category == category);

            int numberOfAnimals = animalsInCategory.Count();
            animalsDto.CurrentCategory = category;
            animalsDto.CurrentPage = page;
            animalsDto.TotalPages = (int)Math.Ceiling((double)numberOfAnimals / PageSize);
            animalsDto.Animals = animalsInCategory
                .Skip((page - 1)*PageSize)
                .Take(PageSize)
                .ToList();

            return animalsDto;
        }
    }
}

Notice how a ‘Dto’ object is returned from the service. While this should be done using an AutoMapper, it’s not the focus of this test. The total number of pages can now be returned to the view as part of the model, rather than as a dictionary entry in ViewData.

The controller now looks clean and simple

using System.Web.Mvc;
using TestingMvcControllers.Interfaces;

namespace TestingMvcControllers.Controllers
{
    public class BetterAnimalsController : Controller
    {
        private readonly IAnimalsService _animalsService;

        public BetterAnimalsController(IAnimalsService animalsService)
        {
            _animalsService = animalsService;
        }

        public ViewResult List(string category, int page)
        {
            var animalsDto = _animalsService.GetAnimals(category, page);
            return View("List",animalsDto);
        }
    }
}

The unit tests for the controller are about testing the controller and nothing more!

using MvcContrib.TestHelper;
using NUnit.Framework;
using Rhino.Mocks;
using TestingMvcControllers.Controllers;
using TestingMvcControllers.Interfaces;
using TestingMvcControllers.Models;

namespace TestingMvcControllers.Tests
{
    [TestFixture]
    public class BetterAnimalsControllerTests
    {
        private IAnimalsService _animalsService;
        private BetterAnimalsController _controller;

        [SetUp]
        public void SetUp()
        {
            _animalsService = MockRepository.GenerateStub<IAnimalsService>();
            _controller = new BetterAnimalsController(_animalsService);
        }

        [Test]
        public void The_List_Action_Returns_AnimalsDto_To_The_View()
        {
            // Arrange
            _animalsService.Stub(a => a.GetAnimals(null,0))
                .IgnoreArguments()
                .Return(new AnimalsDto());

            // Act
            var result = _controller.List(null, 0);

            // Assert
            result.AssertViewRendered().WithViewData<AnimalsDto>();
        }

        [Test]
        public void The_List_Action_Returns_List_View()
        {
            // Arrange
            _animalsService.Stub(a => a.GetAnimals(null, 0))
                .IgnoreArguments()
                .Return(new AnimalsDto());

            // Act
            var result = _controller.List(null, 0);

            // Assert
            result.AssertViewRendered().ForView("List");
        }
    }
}

Jag Reehal’s Final Thought on ‘Skinny ASP.NET MVC Controllers’

There is of course more than one way to skin a cat. This solution could have been refactored in many different ways.

The refactoring done in the post means:

• The ASP.NET MVC controller is skinnier with less responsibility which means it’s easier to read and maintain
• The controller unit tests can focus on the ‘subject under test’
• The paging functionality can be used by multiple user interfaces

I want to show examples of good unit tests for ASP.NET MVC controllers and what to avoid so you don’t end up testing more than you should.

The code used in this post can be downloaded here.

Let me start off by discussing what types of unit tests you should be creating for MVC controllers.

• Tests to check the correct action result is returned from a controller action. This includes information about the action result, such as the testing the correct view is returned for a view result.
• Tests to check if the view model is what you expected. If you have a strongly typed view which expects class foo and you pass class bar to your view model, your code will compile, would result in a runtime error like the one shown below.

If you are testing anything more than this your controller is doing too much. One of the fundamental design practices for MVC controllers is too have skinny controllers. You should you should be able to view a controller method without having to scroll. This will be the focus of my next blog. On that subject you will notice examples in this post don’t include action filters, I think they should be tested separately and is something for a future blog post.

In the unit tests examples below you will see one version using the MvcContrib.TestHelper assembly, and another without it. I can’t recommend this enough because it saves you from writing as many extension methods and test helpers in tests to keep you code clean, readable and maintainable. This is even more important when it comes to doing test driven development because it allows you to concentrate on writing better unit tests without having write more lines of code than you need to.

Also notice how I create a variable for the expected view and route names for the unit tests not using the MvcContrib.TestHelper. Now if I decide to rename the view or route name I only have to change the code in one place.

If you’re new to mocking frameworks and stubs, check out my beginners guide to mocking frameworks.

Unit tests to check an ASP.NET MVC controller returns the correct view

When a controller has no conditional logic i.e. single code path that only returns a single action result, the unit test is straightforward.

Controller Action:

public ActionResult Index()
{
    return View("Index");
}

Unit Test:

[Test]
public void Default_Action_Returns_Index_View()
{
    // Arrange
    const string expectedViewName = "Index";
    var customersController = new CustomerController(null);

    // Act
    var result = customersController.Index() as ViewResult;

    // Assert
    Assert.IsNotNull(result, "Should have returned a ViewResult");
    Assert.AreEqual(expectedViewName, result.ViewName, "View name should have been {0}", expectedViewName);
}

[Test]
public void Default_Action_Returns_Index_View_Using_MvcContrib_TestHelper()
{
    // Arrange
    var customersController = new CustomerController(null);

    // Act
    var result = customersController.Index();

    // Assert
    result.AssertViewRendered().ForView("Index");
}

Unit tests to check an ASP.NET MVC controller sets ViewData (and TempData) values

Testing if a controller sets ViewData or TempData values is simple enough. In the example below the page number and page size are passed to the controller, but need to be passed back to the view. Afterall ASP.NET MVC web sites should to be stateless. In another blog post where controller best practices will be covered, I’ll show you how and why details such as the page number and page size should be properties in the model passed to the view, rather than as ViewData dictionary values and entering magic string territory.

Controller Action:

public ViewResult List(int? pageNumber, int? pageSize)
{
    IList<Customer> customers = _customerService.Get(pageNumber, pageSize);

    ViewData["PageNumber"] = pageNumber;
    ViewData["PageSize"] = pageSize;

    return View("List", customers);
}

Unit Test:

[Test]
public void The_List_Action_Returns_The_Page_Number_And_Size_In_ViewData()
{
    // Arrange
    const int pageNumber = 1;
    const int pageSize = 10;
    var customerService = MockRepository.GenerateStub<ICustomerService>();
    var customersController = new CustomerController(customerService);

    // Act
    var result = customersController.List(pageNumber, pageSize);

    // Assert
    Assert.AreEqual(pageNumber, result.ViewData["pageNumber"], "Page Number Was Incorrect");
    Assert.AreEqual(pageSize, result.ViewData["pageSize"], "Page Size Was Incorrect");
}

Unit tests to check an ASP.NET MVC controller returns the correct type of object to a strongly typed view model

It’s good practice to use strong typed views so you need to ensure the MVC controller returns the model the view is expecting. Once written this unit test can be a useful regression test just in case a colleague changes what model a controller passes to a view.

Controller Action:

public ViewResult List(int? pageNumber, int? pageSize)
{
    IList<Customer> customers = _customerService.Get(pageNumber, pageSize);

    ViewData["PageNumber"] = pageNumber;
    ViewData["PageSize"] = pageSize;

    return View("List", customers);
}

Unit Test:

[Test]
public void The_List_Action_Returns_IList_Customers_To_The_View()
{
    // Arrange
    var customerService = MockRepository.GenerateStub<ICustomerService>();
    var customersController = new CustomerController(customerService);

    // Set up result for customers service
    customerService.Stub(c => c.Get(null, null))
        .IgnoreArguments()
        .Return(new List<Customer>());

    // Act
    var result = customersController.List(null, null);

    // Assert
    var model = result.ViewData.Model as IList<Customer>;
    Assert.IsNotNull(model, "Model should have been type of IList<Customer>");
}

[Test]
public void The_List_Action_Returns_IList_Customers_To_The_View_Using_MvcContrib_TestHelper()
{
    // Arrange
    var customerService = MockRepository.GenerateStub<ICustomerService>();
    var customersController = new CustomerController(customerService);

    // Set up result for customers service
    customerService.Stub(c => c.Get(null, null))
        .IgnoreArguments()
        .Return(new List<Customer>());

    // Act
    var result = customersController.List(null, null);

    // Assert
    result.AssertViewRendered().WithViewData<IList<Customer>>();
}

Unit tests to check an ASP.NET MVC controller returns the expected action result depending on the model state e.g. unit testing the Post-Redirect-Get pattern

When validating a users input you want your controller to return the appropriate action result depending the model state. For this you should follow the Post-Redirect-Get pattern where a valid form submission results in a RedirectToRouteResult, and an invalid form submission should return a ViewResult. The example below shows how to unit test the Post-Redirect-Get pattern for a MVC controller.

Pay attention to how you can add an error to the model state collection. This means you don’t have to worry about what makes a model invalid.

However to ensure you pass in a valid model I would use a test stub which could be used whenever you need an instance of a valid model.

public ActionResult Create(Customer customer)
{
    if (ModelState.IsValid)
    {
        _customerService.Save(customer);
        return RedirectToRoute("CustomerCreated");
    }
    return View("Create", customer);
}

Unit Tests:

[Test]
public void The_Add_Customer_Action_Returns_RedirectToRouteResult_When_The_Customer_Model_Is_Valid()
{
    // Arrange
    const string expectedRouteName = "CustomerCreated";
    var customer = CustomerStub.ValidCustomer;
    var customerService = MockRepository.GenerateStub<ICustomerService>();
    var customersController = new CustomerController(customerService);

    // Act
    var result = customersController.Create(customer) as RedirectToRouteResult;

    // Assert
    Assert.IsNotNull(result, "Should have returned a RedirectToRouteResult");
    Assert.AreEqual(expectedRouteName, result.RouteName, "Route name should have been {0}", expectedRouteName);

}

[Test]
public void The_Add_Customer_Action_Returns_RedirectToRouteResult_When_The_Customer_Model_Is_Valid_Using_MvcContrib_TestHelper()
{
    // Arrange
    var customer = CustomerStub.ValidCustomer;
    var customerService = MockRepository.GenerateStub<ICustomerService>();
    var customersController = new CustomerController(customerService);

    // Act
    var result = customersController.Create(customer);

    // Assert
    result.AssertActionRedirect().RouteName.ShouldBe("CustomerCreated");
}

[Test]
public void The_Add_Customer_Action_Returns_ViewResult_When_The_Customer_Model_Is_Invalid()
{
    // Arrange
    const string expectedViewName = "Create";
    var customer = new Customer();
    var customerService = MockRepository.GenerateStub<ICustomerService>();
    var customersController = new CustomerController(customerService);
    customersController.ModelState.AddModelError("A Error", "Message");

    // Act
    var result = customersController.Create(customer) as ViewResult;

    // Assert
    Assert.IsNotNull(result, "Should have returned a ViewResult");
    Assert.AreEqual(expectedViewName, result.ViewName, "View name should have been {0}", expectedViewName);
}

[Test]
public void The_Add_Customer_Action_Returns_ViewResult_When_The_Customer_Model_Is_Invalid_Using_MvcContrib_TestHelper()
{
    // Arrange
    var customer = new Customer();
    var customerService = MockRepository.GenerateStub<ICustomerService>();
    var customersController = new CustomerController(customerService);
    customersController.ModelState.AddModelError("A Error", "Message");

    // Act
    var result = customersController.Create(customer);

    // Assert
    result.AssertViewRendered().ViewName.ShouldBe("Create");
}

Behaviour tests for ASP.NET MVC controllers

So far I have only covered state based testing. You can write unit tests for your controller to check if a methods was called. For example when a valid model has been passed to a controller the save method should be called. However when an invalid model is passed to a controller the save method should not be called.

public ActionResult Create(Customer customer)
{
    if (ModelState.IsValid)
    {
        _customerService.Save(customer);
        return RedirectToRoute("CustomerCreated");
    }
    return View("Create", customer);
}

Unit Tests:

[Test]
public void The_CustomerService_Save_Method_Is_Called_When_The_Customer_Model_Is_Valid()
{
    // Arrange
    var customer = CustomerStub.ValidCustomer;
    var customerService = MockRepository.GenerateMock<ICustomerService>();
    var customersController = new CustomerController(customerService);

    // Act
    customersController.Create(customer);

    // Assert
    customerService.AssertWasCalled(c => c.Save(customer));
}

[Test]
public void The_CustomerService_Save_Method_Is_NOT_Called_When_The_Customer_Model_Is_Invalid()
{
    // Arrange
    var customer = new Customer();
    var customerService = MockRepository.GenerateMock<ICustomerService>();
    var customersController = new CustomerController(customerService);
    customersController.ModelState.AddModelError("A Error", "Message");

    // Act
    customersController.Create(customer);

    // Assert
    customerService.AssertWasNotCalled(c => c.Save(customer));
}

Jag Reehal’s Final Thought on ‘How to Unit Test ASP.NET MVC Controllers’

Hopefully you can use the examples I’ve shown here as templates for your ASP.NET MVC controller unit tests.

You can of course combine the tests above and have multiple assertions such as testing the view name and view model in a single test. Just be aware unit test best practices say you should only have one assertion per test. If you have multiple assertions just make sure you output a message for each assertion. This way you will know which assertion failed, like in the example for testing view data above.

Check out my post about ASP.NET MVC best practices for more examples on good ASP.NET MVC controller unit tests.