Prototyping UI with ASP.NET MVC

The ASP.NET MVC framework is an incredibly useful tool that changes the application design paradigms for ASP.NET. It simplifies the separation of concerns by insisting the view logic, business logic and model objects aren’t all in the same class!

I’m not going to go into the details of what MVC is, but what I want to tell you about is the power of the tools that come with ASP.NET MVC, the integration with Visual Studio and how you can use them to rapidly prototype a user interface with only a vague understanding of what the underlying data will be.

What Visual Studio gives you that allows rapid prototyping is:

1. The ability to quickly create pages (views) based on methods in a class (controller)
2. Being able to make these new views based on properties of a class (model)
3. The ability to generate controllers with standard methods to view / edit the model
4. A lot of default functionality created with a new project
5. Customizable and downloadable themes giving you control over default design

Once the framework’s downloaded and installed, putting it to use is easy. After creating a new project you get a couple of bits of functionality right out of the box; log in and registration forms, a home page, an about page and a master page to hold the UI together.

Let’s start of our new prototype by creating a couple of classes, these will be our model objects that we’ll use to automagically generate html content for our views later. You’ll need to compile the project anytime you modify these classes, or the generation tools won’t detect them. For my prototype I’m going to make a blog, so here’s my post class:

public class BlogPost
{
    public string Title { get; set; }
    public string Body { get; set; }
    public string Author { get; set; }
    public [class]DateTime[/class] PostDate { get; set; }
}

You’ll also need some data, since this is just a prototype I’m just going to create a static class and give it some default data:

public static class [class]BlogPostDB[/class]
{
    public static [class]BlogPost[/class][] GetPosts()
    {
        return new [class]BlogPost[/class][] {
            new [class]BlogPost[/class] { Title = "Post 1 title",
                Body = "Post 1 body",
                Author = "Phil",
                PostDate = new [class]DateTime[/class](2009, 3, 17, 12, 0, 0)},
            new [class]BlogPost[/class] { Title = "Post 2 title",
                Body = "Post 2 body",
                Author = "Phil",
                PostDate = new [class]DateTime[/class](2009, 3, 17, 13, 0, 0)}
        };
    }
}

Next up is deciding on how we want to be able to manipulate our data. We need to create a controller and we can do right clicking on the controllers folder within the solution explorer, and selecting Add -> Controller.

Here you’ll get the option to add some default action methods from which you’ll be able to generate your views later on, these default methods give you the base view list, view detail, edit and create functionality. With the controller generated, you can add extra action methods (any function that returns an ActionResult) to generate your views from.

Now we use the BlogPost class we wrote earlier to create our list page. Right click within the Index action method and click “Add View”. Choose “Create a strongly-typed view” and select the BlogPost class from the first drop down and List from the second.

Before you’ll be able to see your new view you’ll need to pass the list of posts to the view from the controller, like so:

public [class]ActionResult[/class] Index()
{
    return View([class]BlogPostDB[/class].GetPosts());
}

After a quick hack of the master page to link to our new view we can finally see our blog post index in all its glory:

Okay, sure it’s not that pretty, but from having nothing a minute ago to the base for a site you can really see how after another minute or two you could have a pretty reasonable prototype. And following similar steps above to create edit and create pages as well as any other custom pages you’ll need you can see how deep the functionality can be with very little effort.

So the next time your boss asks you to throw together a prototype, or you’re trying to get a feeling for how your new site will fit together, download the ASP.NET MVC framework, and throw together a site in seconds.

Phil

• ASP.NET MVC Framework Home
• Download ASP.NET MVC RC2
• Scott Hanselman’s on MVC