Arrange Act Assert » Asp.Net MVC

How to deploy ASP.NET MVC applications to AppHarbor

Jag Reehal — Wed, 13 Apr 2011 01:59:46 +0000

I’ve already blogged about how awesome AppHarbor is.

So to back up my opinion I’ve decided to write a tutorial about how to deploy an ASP.NET MVC application to AppHarbor.

The application we’ll be deploying will be the ASP.NET MVC Music Store (created by James Senior, Jon Galloway and Scott Hanselman) which uses ASP.NET MVC 3 with Razor syntax and data access via Entity Framework 4.

Click here to a deployed version of the ASP.NET MVC Music Store running on AppHarbor.

To follow along with the tutorial you’ll need to have the following installed:

If you’re also going to use the ASP.NET MVC Music Store please ensure you change the ..\Views\Shared\_Layout.cshtml to include HTML to indicate the site is a sample available from codeplex and a noindex robots meta tag.

This is a ASP.NET MVC sample application which can be downloaded at http://mvcmusicstore.codeplex.com

@{Html.RenderAction("GenreMenu", "Store");}

@RenderBody()

Let’s get started

I can browse around the store and add things to my cart but can’t log in as an administrator

That’s because you can only have one database per application… something I didn’t know when I started this series.

As AppHarbor doesn’t support file storage (yet) you can’t use the ASPDBNET.MDF database which the music store uses for ASP.NET Membership. See this AppHarbor support entry for more details.

You can of course workaround this by adding membership tables etc. to the existing SQL Server database by via an alternative membership provider which includes using another application hosted on AppHarbor.

How to add a ASP.NET MVC solution to a Git repository

Jag Reehal — Wed, 13 Apr 2011 01:59:05 +0000

In this tutorial we’ll be looking at how to add a ASP.NET MVC solution to a Git repository.

This tutorial is part of a series about how to deploy ASP.NET MVC applications to AppHarbor.

If you haven’t installed Git yet use this guide to get you started.

Before you initialize you git repository it’s a good idea to have a .gitignore file in root of the repository which instructs Git what files to ignore.

As you can see in the example below it excludes things which you don’t need to version control such as output directories and anything created by ReSharper.

*git
#ignore thumbnails created by windows
Thumbs.db
#Ignore files build by Visual Studio
*.obj
*.exe
*.pdb
*.user
*.aps
*.pch
*.vspscc
*_i.c
*_p.c
*.ncb
*.suo
*.tlb
*.tlh
*.bak
*.cache
*.ilk
*.log
[Bb]in
[Dd]ebug*/
*.lib
*.sbr
obj/
[Rr]elease*/
_ReSharper*/
[Tt]est[Rr]esult*

In the directory containing your ASP.NET MVC solution, right click and start Git Bash, or start Git Bash and navigate to the directory.

If this is the first time you’re using Git I recommended executing the following commands to set your user name and email address in the git.config which are used to track commits in the Git repository.

git config --global user.name jagreehal
git config --global user.email jag.reehal@gmail.com

To initialise a repository execute the following command

git init

Because we’ve used a gitignore file we can use the following Git command to add all files in the directory (and sub directories) into the repository.

git add .

Alternatively you could have added each file individually like this (for those who want total control)

git add

The final step is to commit your changes. The –m option allows you to add a message (otherwise you’ll be promoted for one)

git commit -m "Initial commit"

In the next part of the series we’ll be looking at how to push your ASP.NET MVC Git repository to AppHarbor.

How to push a ASP.NET MVC Git repository to AppHarbor

Jag Reehal — Wed, 13 Apr 2011 01:58:52 +0000

In this tutorial I’ll be showing you how to push a Git repository for a .NET solution site to AppHarbor.

This follows on from the tutorial for adding a ASP.NET MVC solution to a Git repository.

The first steps are to create an AppHarbor account if you haven’t got one, and then create an application

on the following page keep a note of the URLs where you’ll be pushing your Git repository to

In the directory containing your ASP.NET MVC solution start Git Bash, or start Git Bash and navigate to the directory.

Execute the following commands (substituting your URLs) to push your ASP.NET MVC solution to AppHarbor.

git remote add appharbor https://jagreehal@appharbor.com/MvcMusicStoreDemo.git
git push appharbor master

When you’re prompted to enter your password, use the same one for your AppHarbor account.

Next go to the build page on AppHarbor to see the status of your app.

If you’re following along with the example to deploy the ASP.NET MVC Music Store to AppHarbor you’ll see the site doesn’t work yet.

That’s because you can’t use MDF database files in AppHarbor yet so the next step is create the ASP.NET MVC Music Store SQL Server database in AppHarbor.

How To Create a SQL Server Database in AppHarbor

Jag Reehal — Wed, 13 Apr 2011 01:58:31 +0000

In the last part of the tutorial about how to deploy ASP.NET MVC applications to AppHarbor we pushed an ASP.NET MVC site to AppHarbor.

Although the build was successful an error occured when viewing the site becuase it couldn’t connect to the attached database.

To fix this we need to create a SQL Server Database in Appharbor.

On the AppHarbor application management page click the link to ‘Add database’

Next choose SQL Server as the database type, enter a connection string name and click the create button.

I used the same connection string name used by Entity Framework 4 in the ASP.NET MVC Music Store application.

The following screen shows you what connection string should be used in your config file and information about how to connect to the Appharbor database from Microsoft SQL Server Managemnt Studio.

When you connect to the database in Microsoft SQL Server Managemnt Studio you’ll see the database is empty.

In the Assets/Data folder in the ASP.NET MVC Music Store you’ll find a ‘MvcMusicStore-Create.sql’ SQL script which can be used to create and populate the tables required by the application.

Before running the script delete the first line that looks like this

USE [C:\USERS\JON\DOCUMENTS\JON-SHARE\MVCMUSICSTORE-MVC3\MVCMUSICSTORE\MVCMUSICSTORE\APP_DATA\MVCMUSICSTORE.MDF]

When the script has been completed successfully the tables will have been created and populated

In the next step of this tutorial we will see how to configure ASP.NET MVC to use a SQL Server database in AppHarbor.

How to configure ASP.NET MVC to use a SQL Server database in AppHarbor

Jag Reehal — Wed, 13 Apr 2011 01:58:20 +0000

In this tutorial about how to deploy ASP.NET MVC applications to AppHarbor is to update the ASP.NET MVC web.config file, commit the change and push the Git repository to AppHarbor.

Modify the connection string in the ASP.NET MVC web.config to use the AppHarbor database created in last tutorial.

In the directory containing your ASP.NET MVC solution, right click and start Git Bash, or start Git Bash and navigate to the directory.

Execute the following commands to commit the updated web.config file in the git repository and push to AppHarbor

git add MvcMusicStore/web.config
git commit –m "Now using AppHarbor SQL Server"
git push appharbor master

Once the appliation has been built you should have a working ASP.NET MVC Music store running in AppHarbor.

Why I’m using AppHarbor to host my ASP.NET MVC sites

Jag Reehal — Thu, 07 Apr 2011 08:00:14 +0000

About two months ago I heard about Heroku, a hosting service which can host Ruby apps in the cloud for free.

I was envious that Ruby folk could do away with traditional hosting solutions and move to a cloud platform that was fresh, modern and simple to use.

Without paying a penny you get one dyno which handles concurrent HTTP requests which you can easily scale up by adding additional web or background processors without breaking the bank.

Used in conjunction with Jekyll, a static web site generator, one dyno should be adequate for most people’s needs.

So I started putting together a site for my new company.

This was great except I needed to do some custom tasks which meant creating Ruby extensions… which meant I had to learn Ruby.

Then a colleague mentioned AppHarbor.

App Harbor

AppHarbor is like Heroku for .Net developers, providing a free platform to host .Net applications in the cloud.

Similar to Heroku you can scale up but with the added bonus of a free 20mb instance of Sql Server.

I haven’t been so excited by something like this in the .Net world for a while, and am so impressed by what the team have achieved.

There’s plenty of good documentation on how to get started on the web already, so check out

for more information.

Still not impressed?

What if I said that you could push code up to AppHarbor and see changes on your live site within minutes or that AppHarbor only deploys changes to your live site if the build and unit tests are successful?

It’s clever stuff, you’ve effectively got a free continuous integration server in the cloud!

You can even go back and deploy old versions if you ever need to.

AppHarbor is still new so they are missing a couple of useful features at the moment. But they are getting better all the time.

Questions in the support forum and answered quickly, and they really do seem to be listening to the community.

I’ve already moved my company ASP.NET MVC site over and will be writing more about AppHarbor next week.

Using Html.Raw in ASP.NET MVC Razor Views

Jag Reehal — Mon, 13 Dec 2010 12:00:14 +0000

With the release of ASP.NET MVC 3 Release Candidate 2 (RC2) you can finally use Html.Raw when you don’t your output to be encoded.

So this means you don’t have to use

@MvcHtmlString.Create(ViewBag.HtmlOutput)

@(new HtmlString(ViewBag.HtmlOutput))

or anything else to output a string containing HTML in ASP.NET MVC.

An example of using Html.Raw in ASP.NET MVC 3 using Razor

The code below shows the HTML string to be outputted being added the dynamic ViewBag collection.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        StringBuilder htmlOutput = new StringBuilder();
        htmlOutput.Append("The image below is from " );
        htmlOutput.Append("Wikimedia Commons");
        htmlOutput.Append("");
        htmlOutput.Append("");
        ViewBag.HtmlOutput = htmlOutput.ToString();
        return View();
    }
}

Which can be used in a view like this

@{
    ViewBag.Title = "Index";
}

@Html.Raw(ViewBag.HtmlOutput)

to show the following output in a browser

For more information check out Scott Gu’s post Announcing ASP.NET MVC 3 (Release Candidate 2).

When to use Html.RenderPartial and Html.RenderAction in ASP.NET MVC Razor Views

Jag Reehal — Mon, 13 Dec 2010 10:00:45 +0000

In this blog post I want to show examples when to use Html.RenderPartial and Html.RenderAction when creating web sites in ASP.NET MVC using the Razor view engine.

Some background information on Html.RenderAction and Html.RenderPartial

Html.RenderAction is a somewhat contentious feature because it invokes a controller action.

This means each time it’s called a new request (which has to go through the ASP.NET MVC pipeline) is made.

As shown below ASP.NET MVC requests are routed to a controller. It’s the controller that decides what view to call and what data (model) to pass to it.

A view has one responsibility and that’s to render HTML. It’s supposed to be simple, it doesn’t know (or care) where the data in the model comes from.

The thing MVC traditionalists frown upon is the fact that Html.RenderAction can execute child actions in ASP.NET MVC views.

However given that Html.RenderAction just like an AJAX request is a form of sub request, the case against seems somewhat outdated and doesn’t take into the account using Html.RenderAction will allow you to separate concerns of models and controllers as we will see later in this post.

For Html.RenderPartial the content of the partial view is added to content of the host view, either directly to the response output (or by using a StringWriter if you use or Html.Partial).

Examples of when to use Html.RenderPartial and Html.RenderAction

The mockup below shows a blog post with comments and a list of categories in a side bar.

When to use Html.RenderPartial (or Html.Partial)

For the page we’re designing I would create a view to show the blog post and call Html.RenderPartial to output the comments

@model WhenToUseRenderActionAndRenderPartial.Models.ShowPostViewModel
@{
    ViewBag.Title = Model.Post.Title;
}


    
        
            @Model.Post.Title
        Posted on | 
           @Model.Post.DatePublished.ToLongDateString()
         | @Model.Comments.Count() Comments
        
        @Html.Raw(Model.Post.Content)
    

@{Html.RenderPartial("_Comments", Model.Comments);}

The partial view for comments would look like this

@model IEnumerable

    
        
            Comments
    
    @foreach (var comment in Model)
    {
        
            
                @comment.Author on
                
                    @comment.DateCreated.ToLongDateString()
                
            
            
            
                @comment.Content
            
        
    }

This means the ShowPost action in the Blog controller

using System;
using System.Collections.Generic;
using System.Web.Mvc;
using WhenToUseRenderActionAndRenderPartial.Models;

namespace WhenToUseRenderActionAndRenderPartial.Controllers
{
    public class BlogController : Controller
    {
        public ActionResult ShowPost()
        {
            ShowPostViewModel viewModel = new ShowPostViewModel();
            viewModel.Post = new Post
                            {
                                Title = "Blog Title",
                                Content = "Lorem ipsum dolor sit amet",
                                DatePublished = new DateTime(2010, 10, 5)
                            };
            viewModel.Comments = new List()
                                             {
                                                 new Comment()
                                                     {
                                                         Author = "Andrew",
                                                         Content = "I think",
                                                         DateCreated = new DateTime(2010, 10, 5)
                                                     },
                                                new Comment()
                                                     {
                                                         Author = "Bill",
                                                         Content = "I reckon",
                                                         DateCreated = new DateTime(2010, 10, 5)
                                                     },
                                                new Comment()
                                                     {
                                                         Author = "Chris",
                                                         Content = "My opinion",
                                                         DateCreated = new DateTime(2010, 10, 6)
                                                     }
                                             };
            return View(viewModel);
        }
    }
}

needs to pass a model with properties for the blog post and its comments to the view.

public class Post
{
    public string Title { get; set; }
    public string Content { get; set; }
    public DateTime DatePublished { get; set; }
}

public class Comment
{
    public string Content { get; set; }
    public string Author { get; set; }
    public string ImageUrl { get; set; }
    public DateTime DateCreated { get; set; }
}

public class ShowPostViewModel
{
    public Post Post { get; set; }
    public IEnumerable Comments { get; set; }
}

When to use Html.RenderAction (or Html.Action)

So while we could add a property for categories to the ShowPostViewModel used for the ShowPost page and use Html.RenderPartial to display them, we have to add a category property to every model in our solution where categories are shown.

public class ShowPostViewModel
{
    public Post Post { get; set; }
    public IEnumerable Comments { get; set; }
    public IEnumerable Categories { get; set; }
}

public class AnotherViewModel
{
    public string StringToOutput { get; set; }
    public IEnumerable Categories { get; set; }
}

public class Category
{
    public int Id { get; set; }
    public string Name { get; set; }
}

And using a base class with a categories property and have ViewModel classes inherit from it would just be bloating models with unrelated data and concerns.

public class ViewModelBase
{
    public IEnumerable Categories { get; set; }
}

public class ShowPostViewModel : ViewModelBase
{
    public Post Post { get; set; }
    public IEnumerable Comments { get; set; }
}

So if you want to display the same information on multiple pages and the data doesn’t necessarily depend on or isn’t related to the rest of the page, something like a widget to display categories then I would use Html.RenderAction.

As shown in the markup below Html.RenderAction is called from the layout page for the blog post.




    @ViewBag.Title
    
    


    @RenderBody()
    @{Html.RenderAction("Show", "Category");}

Jag Reehal’s Final Thought on ‘When to use Html.RenderPartial and Html.RenderAction in ASP.NET MVC Razor Views’

In cases where a model for the page is already populated with all the information required I would use Html.RenderPartial.

If the same information is shown on multiple pages it’s likely that the data needs to be in its own model so I would use Html.RenderAction. As shown in this post I would say layout pages are going to the most common place Html.RenderAction will be used.

ASP.NET MVC Razor View Best Practices – Keep logic out of your Razor views

Jag Reehal — Mon, 02 Aug 2010 00:11:25 +0000

Last year I wrote a blog post about how you could keep logic out of your ASP.NET MVC views.

Now with the introduction of the Razor view engine for ASP.NET MVC, I thought it would be a good idea to do a ‘Razor’ version.

The code used in this post can be downloaded here.

If you recall the reasons you should not have logic in your views are because they will become difficult to read, maintain and test at the very least.

How to decide what CSS class to use for the stock level in a Razor view

The screenshot below shows the three possible messages displayed to the user depending on the number of units in stock.

An example of a Razor view with conditional logic

We could select the CSS class for the corresponding number of units in stock using multiple if statements like this

@inherits System.Web.Mvc.WebViewPage
@using KeepLogicOutOfYourRazorViews.Helpers

@{
	View.Title = "Index";
	LayoutPage = "~/Views/Shared/_Layout.cshtml";
}


@if(Model.UnitsInStock == 0){
								
									Number Of Units In Stock: @Model.UnitsInStock
								
							}
@if(Model.UnitsInStock > 0 && Model.UnitsInStock <= 20)
							{
								
									Number Of Units In Stock:	@Model.UnitsInStock
								
							}
@if(Model.UnitsInStock > 20){
								
									Number Of Units In Stock: @Model.UnitsInStock
								
							}

but there are better ways to achieve our goal.

So what are the alternatives?

We could:

Move the logic for choosing the CSS class into a helper method
Create a method to build the HTML for displaying the number of units in stock
Use a Product data transfer object with a CSS class name property
Pass all the CSS classes to a method which will return the CSS class to use

As I want to concentrate on showing code for Razor view engine, if you want to see the methods, unit tests and discussion about the advantages and disadvantages of each option please refer to the original post.

What the view would look like if we used a method to get the CSS class in a Razor view

The code below shows how we could achieve the same result by calling a method which returns the CSS class for the number of units in stock.

@inherits System.Web.Mvc.WebViewPage
@using KeepLogicOutOfYourRazorViews.Helpers

@{
	View.Title = "Index";
	LayoutPage = "~/Views/Shared/_Layout.cshtml";
}


	
		Number Of Units In Stock: @Model.UnitsInStock

What the view would look like if we passed the CSS classes to a method in a Razor view

Alternatively, a more designer friendly way would be to pass the CSS classes to a method which returns the appropriate CSS class to use for the stock level.

@inherits System.Web.Mvc.WebViewPage
@using KeepLogicOutOfYourRazorViews.Helpers

@{
	View.Title = "Index";
	LayoutPage = "~/Views/Shared/_Layout.cshtml";
}


	
		Number Of Units In Stock: @Model.UnitsInStock

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

Razor does a fantastic job of cleaning up your views, but to keep them even cleaner the best practice to keep logic out of yours view still applies.

Creating the animals game using Asp.Net MVC, jQuery and jQueryUI

Jag Reehal — Wed, 02 Dec 2009 09:36:50 +0000

A few weeks ago we had some fun creating a demo for a game using the jQuery and jQuery UI libraries in the ‘Having fun with jQuery UI’ blog post.

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 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 _animalsStub = new Animal[]
                           {
                               new Animal(){Name = "Cow"},
                               new Animal(){Name = "Pig"},
                               new Animal(){Name = "Sheep"},
                           }.AsQueryable();

        [SetUp]
        public void SetUp()
        {
            _animalsRepository = MockRepository.GenerateStub();
            _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 Shuffle(this IEnumerable items)
        {
            var rnd = new Random();
            IEnumerable numbers = Enumerable.Range(0, items.Count()).OrderBy(r => rnd.Next());
            var randomItems = new List();
            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 animals = new List()
                           {
                               new Animal(){Name = "Cow"},
                               new Animal(){Name = "Pig"},
                               new Animal(){Name = "Sheep"},
                           };
            IList 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.