Stephen Walther on ASP.NET MVC : ASP.NET MVC

ASP.NET MVC Design Gallery at www.ASP.net

swalther — Thu, 18 Dec 2008 17:16:34 GMT

We just launched a new Design Gallery for ASP.NET MVC websites at:

http://www.ASP.net/mvc/gallery

You can vote on the designs that you like and that you don't like. You also can contribute new designs of your own.

After you download a design from the gallery, you can use the design by following these steps:

1) Copy the files from DesignTemplateCS or DesignTemplateVB folder into your project (use DesignTemplateCS for C# projects and DesignTemplateVB for VB.NET projects)

2) Do a search and replace the string [YourProjectName]. Replace [YourProjectName] with the actual name of your project as displayed in the Solution Explorer window.

This last step is necessary to get the namespaces right. Most of the templates use helper methods to render the menu items so that the selected menu item is correctly displayed.

Microsoft also is hosting a design competition to encourage members of the community to submit new designs. Submit a new design before January 31, 2009. ScottGu will be selecting the best three designs and announcing them on his blog. Learn more about the ASP.NET MVC Design Competition here:

http://www.asp.net/mvc/gallery/competition/

Essential Visual Studio Tips & Tricks that Every Developer Should Know

swalther — Tue, 21 Oct 2008 16:04:06 GMT

In this blog entry, I list the essential tips and tricks that every developer who uses Visual Studio 2008 should know. I wanted to keep this list brief. I also wanted to focus on only those tips and tricks that I use on a daily basis. Almost all of these tips and tricks are just as useful regardless of whether you are building an ASP.NET Web Forms or ASP.NET MVC application.

Tip #1 – You don’t need to select a line to copy or delete it

I always cringe whenever I see someone select an entire line of code in the Visual Studio code editor before copying the line or deleting the line (see Figure 1). You don’t need to do this.

Figure 1

If you want to copy a line of code then you can simply press CTRL-c to copy the line and press CTRL-v to paste the line. If you want to delete a line, don’t select it first, just press CTRL-x. You’ll be surprised how much time this one tip will save you.

Tip #2 – You can add a namespace automatically by pressing CTRL-.

In the old days, before Visual Studio 2008, if you used a class in your code that was not a member of any of the existing namespaces imported in your code then you had no choice but to look up the class in the documentation and enter a using statement to import the new namespace.

Visual Studio 2008 is smart enough to import namespaces for you automatically. If you type the name of a class that inhabits a namespace that has not been imported then Visual Studio displays a red bar beneath the class in the editor (see Figure 2). You can press CTRL-. to display a dialog box for picking the right namespace to import. Finally, just press the ENTER key to select a namespace (see Figure 3).

Figure 2

Figure 3

Tip #3 – Never create properties by hand

Never type property declarations by hand. It takes forever! Instead, just type prop + TAB + TAB. When you type prop + TAB + TAB, you get a code snippet (template) for entering a property. Use TAB to move between the template parameters. Press the ENTER key when you are finished creating the property (see Figure 4). This tip has saved me from many days of tedious property typing.

Figure 4

Tip #4 – You can remove and sort unnecessary using statements

Whenever I finish creating a class, I always clean up the list of using statements that appear at the top of the class file. I like to remove any unused using statements to reduce the amount of visual clutter in my classes. You can remove using statements that are not required by your code by right-clicking the top of your code file, selecting the menu option Organize Usings, and select Remove and Sort.

Figure 5

Tip #5 – Use CTRL-k+c to comment out code

If you need to temporarily disable a block of code, or a section of an ASP.NET page, then you can comment out the region by pressing CTRL-k+c. I always do this when I want to rewrite an existing section of code, but I am afraid to delete the old code before writing the new code.

For example, Figure 6 illustrates commented out code in the code editor.

Figure 6

You can use the very same key combination to comment out code almost anywhere. For example, you can comment out code in ASP.NET pages, web.config files, and JavaScript files (see Figure 7).

Figure 7

You can perform the opposite operation, and uncomment out code, by using the keyboard combination CTRL-k+u.

Tip #6 – You can close all documents except the current one

After working in Visual Studio for an extended period of time, I end up with a lot of open documents. I like to quickly switch between open documents by hitting the keyboard combination CTRL-TAB (you can also use CTRL-TAB to shift focus to different tool windows). If you have too many documents open, using CTRL-TAB becomes more difficult because you must hunt through the set of open documents.

There are two ways that you can close open documents. You can use the menu option Window, Close All Documents. Better yet, you can right click a tab that corresponds to an open document and select the menu option Close All But This. Selecting this latter option closes all open documents except the document corresponding to the tab (see Figure 8).

Figure 8

Tip #7 – You can open a database by double-clicking the database file in App_Data

After you add a user instance of a SQL Express database to a project (a RANU database), you can quickly connect to the database by double-clicking the .mdf file in the App_Data folder. Double-clicking the database opens the Server Explorer/Database Explorer window and expands the objects in the database automatically.

Tip #8 – You can copy a file or folder into a project by dragging and dropping

I’m always composing new Visual Studio projects from bits and pieces of previous Visual Studio projects. For example, I might need to add a folder from a previous project or a set of files. You can add existing files to Visual Studio by right-clicking in the Solution Explorer window and selecting the menu option Add, Existing Item. But, this method of adding files is slow. Furthermore, you can’t add folders using this method.

The best method of adding files and folders to Visual Studio project is to just drag the files or folder into the Solution Explorer window (or copy and paste the files or folder). For example, I am constantly adding my MoviesDB.mdf movies SQL Express database to new projects. I keep this file on my desktop and drag it into the App_Data folder whenever I need the database in a new Visual Studio project.

Tip #9 – Use CTRL-SPACE to perform statement completion

This tip is particularly relevant for developers who build applications by using test-driven development. When doing test-driven development, you write a unit test first and then write code that satisfies the unit test. When writing the unit test, you often have to fight with statement auto-completion.

There is an easy solution to this problem. Disable automatic statement completion by selecting Tools, Options, Text Editor, All Languages and uncheck the Auto list members checkbox (see Figure 9).

Figure 9

After you disable auto list members, you can still display suggestions for statement completion by using the keyboard combination CTRL-SPACE.

Tip #10 – Add new items by pressing CTRL-N or CTRL-SHIFT+A

In general, using the mouse to perform an action in Visual Studio is slower than entering a keyboard combination. The fastest way to add a new item into a Visual Studio project is to hit the keyboard combination CTRL-n or the keyboard combination CTRL-SHIFT+A. The first keyboard combination works in ASP.NET Websites and the second keyboard combination works in both Website and ASP.NET MVC Web Application projects.

This keyboard combination opens the Add New Item dialog box (see Figure 10).

Figure 10

You can use the TAB and arrow keys to select an item from the dialog box and navigate to the Open button. Press the ENTER key to invoke the Open button.

Tip #11 – You don’t need to type file extensions when adding a file

This tip is related to the previous one. After using the TAB key to navigate to the Name textbox in the Add New Item dialog box, you can enter the name of the new item. When typing the name of a new item, you don’t need to include the file extension. Visual Studio can determine the file extension from the selected template.

For example, when adding a new Web Form named MyPage.aspx, you can simply type MyPage. When adding a new Master Page named Site.master, you can simply type Site.

You might think that avoiding typing a couple of characters would not matter. But, if you add dozens of files to a Visual Studio project, the number of characters that you can avoid typing quickly adds up.

Summary

If you have a tip or trick for Visual Studio 2008, please share it in the comments. However, nothing obscure please. I want to focus on only those tips and tricks that matter on a daily basis.

A Guide to Learning ASP.NET MVC Beta 1

swalther — Fri, 17 Oct 2008 15:18:32 GMT

Now that ASP.NET MVC Beta 1 is out, how do you learn how to use it? How do you learn how to build ASP.NET MVC applications? Here are my recommendations.

The main website for all information related to ASP.NET MVC is located at:

http://www.ASP.net/mvc

This website contains a large number of videos, tutorials, and links to blogs and documentation. Here is how I would suggest navigating all of this material.

First, I would recommend watching the video Creating a Tasklist Application with ASP.NET MVC located at:

http://www.asp.net/learn/mvc-videos/video-395.aspx

In this 38 minute video, I walk through creating a very basic MVC application from start to finish. The sample application is nothing fancy. The goal of the video is to give you an overall sense of the different parts of an ASP.NET MVC application.

If you want to learn how to build a more complex application then I would recommend that you watch the series of Pair Programming videos that I created with Paul Litwin. In these videos, we build a Workout Log application. This is a simple database driven application that includes form validation. You can view this series of videos here:

http://www.asp.net/learn/mvc-videos/#MVCPairProgramming

If you are interested in watching a series of videos that really dive into the advanced features of building an ASP.NET MVC application, then I would suggest that you watch Rob Conery’s series of videos on building an e-commerce application:

http://www.asp.net/learn/mvc-videos/#MVCStorefrontStarterKit

Next, to get a better understanding of each of the different features of ASP.NET MVC, I would recommend that you take a look at the preview of the ASP.NET MVC Quickstarts. The Quickstarts provide you with basic documentation on each of the different features of the ASP.NET MVC framework:

http://quickstarts.asp.net/previews/mvc/

Next, take advantage of the ASP.NET MVC tutorials and videos located at:

http://www.ASP.net/mvc

The tutorials and videos are cross-linked. You can choose to either watch the video or read the corresponding tutorial. The written tutorials are available in both VB.NET and C#. Here’s a list of the current tutorials available at the www.ASP.net/mvc website:

Creating a Tasklist Application with ASP.NET MVC

Stephen Walther builds an entire ASP.NET MVC application from start to finish. This tutorial is a great introduction for people who are new to the ASP.NET MVC Framework and who want to get a sense of the process of building an ASP.NET MVC application.

Understanding Models, Views, and Controllers

Confused about Models, Views, and Controllers? In this tutorial, Stephen Walther introduces you to the different parts of an ASP.NET MVC application.

Understanding Controllers, Controller Actions, and Action Results

In this tutorial, Stephen Walther introduces you to ASP.NET MVC controllers. You learn how to create new controllers and return different types of action results.

Understanding Views, View Data, and HTML Helpers

What is an ASP.NET MVC View and how does it differ from a HTML page? In this tutorial, Stephen Walther introduces you to Views and demonstrates how you can take advantage of View Data and HTML Helpers within a View.

An Introduction to URL Routing

In this tutorial, Stephen Walther demonstrates how browser requests get mapped to controller actions through URL Routing. You also learn how to create a custom route that displays different blog entries depending on the date passed in a URL.

Preventing JavaScript Injection Attacks

Prevent JavaScript Injection Attacks and Cross-Site Scripting Attacks from happening to you. In this tutorial, Stephen Walther explains how you can easily defeat these types of attacks by HTML encoding your content.

Creating Unit Tests for ASP.NET MVC Applications

Learn how to create unit tests for controller actions. In this tutorial, Stephen Walther demonstrates how to test whether a controller action returns a particular view, returns a particular set of data, or returns a different type of action result.

Creating Custom HTML Helpers

Create new HTML Helpers to make it easier to generate view content. Stephen Walther demonstrates two simple methods of creating new HTML Helpers.

Creating Model Classes with LINQ to SQL

Learn how to create data access classes by taking advantage of Microsoft LINQ to SQL. In this video tutorial, you learn how to use a LINQ to SQL DataContext class directly within a controller. You also learn how to use the Repository Pattern to create testable and flexible database-driven applications.

Displaying a Table of Database Data

Need to display a set of database records in an MVC view? Learn two methods of displaying records in an HTML table. You learn how to perform all of the formatting inline. You also learn how to create a template with an MVC partial.

Using ASP.NET MVC with Different Versions of IIS

In this tutorial, you learn how to use ASP.NET MVC, and URL Routing, with different versions of Internet Information Services. You learn different strategies for using ASP.NET MVC with IIS 7.0 (classic mode), IIS 6.0, and earlier versions of IIS.

Creating Page Layouts with View Master Pages

By taking advantage of view master pages, you can create a common layout for the pages in your ASP.NET MVC application. In this tutorial, Stephen Walther introduces you to view master pages. You learn how to create a two-column page layout.

Passing Data to View Master Pages

In this tutorial, Stephen Walther explains how you can pass database data to a view master page. He demonstrates how to create an Application controller that modifies the view data returned by every controller action within an ASP.NET MVC application.

Understanding Action Filters

In this tutorial, you are introduced to action filters. You learn how action filters work and how to implement custom action filters. We create a custom action filter that logs the stages of processing a controller action and action result to the Visual Studio Output window.

Finally, there is a lot of really great ASP.NET MVC information in blogs. These are the blogs that I would read on a daily basis:

ScottGu’s Blog – Scott Guthrie’s blog is the best place to get the latest ASP.NET MVC announcements. He also writes really clearly written walkthroughs that describe how to build basic MVC applications.

Haacked – Phil Haack is the Program Manager for ASP.NET MVC.

Stephen Walther on ASP.NET MVC – My blog on ASP.NET MVC. I’ve written over 40 tips on building applications with ASP.NET MVC. I’ve also been building two complete sample applications.

Computer Zen – Scott Hanselman’s web log. Scott is another member of my team. His blog is a great source for all technical information on .NET.

WekeRoad – Rob Conery has been building an entire ecommerce application with ASP.NET MVC.

Hope these resources help! If you have any other recommendations for sources of information on ASP.NET MVC, then please leave a comment. Remember that you can always find the latest ASP.NET MVC information by visiting the primary Microsoft ASP.NET MVC site:

http://www.ASP.net/mvc

jQuery in ASP.NET Talk at PDC

swalther — Wed, 15 Oct 2008 13:24:54 GMT

Mark your calendars and come to my jQuery in ASP.NET talk at PDC. It looks like my talk is scheduled for Tuesday (10/28/2008) at 5:15pm. You can still register for the PDC here:

http://www.microsoftpdc.com/

I'm really excited about the new possibilities that jQuery, in combination with the new features of the ASP.NET AJAX framework, opens up for building Ajax applications. My talk discusses using jQuery in the context of both ASP.NET Web Forms and ASP.NET MVC applications.

Here's the talk description:

Introducing jQuery in ASP.NET

jQuery is an open source JavaScript library that has a passionate following among Ajax developers. Microsoft is integrating the open source jQuery library into both the ASP.NET Web Forms and ASP.NET MVC frameworks and providing full product support.

ASP.NET AJAX and jQuery is a powerful combination for building client-side, database-driven web applications. By taking advantage of ASP.NET AJAX client templates and controls, you can create declarative client-side user interfaces. By taking advantage of jQuery’s rich selector and animation support, you can easily select page elements and augment your pages with compelling visual effects.

In this talk, learn how you can use jQuery to build richly interactive client-side Ajax applications when developing either ASP.NET Web Forms or ASP.NET MVC applications. Learn how JQuery works in combination with ASP.NET AJAX to provide the best framework for building Ajax applications.

Looking forward to seeing you at the PDC!

New ASP.NET MVC Tutorials

swalther — Sat, 11 Oct 2008 00:00:03 GMT

I created three new ASP.NET MVC tutorials that were just published at the www.ASP.net/mvc website. There are both C# and VB.NET versions of each tutorial. Here are the direct links and descriptions:

Creating Custom HTML Helpers

Create new HTML Helpers to make it easier to generate view content. Stephen Walther demonstrates two simple methods of creating new HTML Helpers.

Creating Model Classes with LINQ to SQL

Learn how to create data access classes by taking advantage of Microsoft LINQ to SQL. In this video tutorial, you learn how to use a LINQ to SQL DataContext class directly within a controller. You also learn how to use the Repository Pattern to create testable and flexible database-driven applications.

Displaying a Table of Database Data

Need to display a set of database records in an MVC view? Learn two methods of displaying records in an HTML table. You learn how to perform all of the formatting inline. You also learn how to create a template with an MVC partial.

Please let me know if there are specific tutorials that you want to see in the future.

ASP.NET MVC Tip #45 – Use Client View Data

swalther — Wed, 08 Oct 2008 16:44:08 GMT

In this tip, I explore one approach to building Ajax applications with ASP.NET MVC. I show how you can use view data when building Ajax applications with ASP.NET MVC in the same way as you would use view data when building server-side application. I demonstrate how to create a custom HTML Helper that renders client view data.

One of the primary benefits of building an ASP.NET MVC application is that it enables you to build web applications that support a sharp separation of concerns. This sharp separation of concerns enables you to build applications that are highly testable and highly adaptable to future change.

Communication between the different parts of an ASP.NET MVC application is extremely constrained. An MVC view only talks to an MVC controller and never directly to an MVC model class. The only way that a view is allowed to talk to a controller is through view data. These constraints enable the sharp separation of concern.

If you are not careful, you can break this clear separation of concerns when building Ajax applications. In an Ajax application, the browser talks directly to the server. An Ajax request is made against a controller action and the controller action returns a JSON result.

In this tip, I demonstrate how you can use view data to pass data from a controller action to a view in an Ajax application in the very same that you use view data in a non-Ajax application. In this tip, I demonstrate how you can create a custom HTML Helper that renders client view data.

Creating the Client View Data Helper

The code for the client view data HTML Helper is contained in Listing 1. The ClientViewDataHelper class defines an extension method, named ClientViewData(), that extends the AjaxHelper helper class (The AjaxHelper class is exposed as the View.Ajax property in a server-side view).

Listing 1 – MvcAjax\ClientViewDataHelper.cs

using System.Web.Mvc;

namespace MvcAjax
{
    public static class ClientViewDataHelper
    {

        public static string ClientViewData(this AjaxHelper helper)
        {
            var clientViewData = new ClientViewData();
            var context = helper.ViewContext;
            var result = clientViewData.Serialize(context.Controller.ViewData);
            result = "<script type='text/javascript'> var viewData=" + result + "; </script>";
            return result;
        }

    }
}

The ClientViewData() helper renders the current view’s view data into a JavaScript object. The Helper makes the server-side view data available to client-side JavaScript code.

The ClientViewData() HTML Helper calls the ClientViewData.Serialize() method to serialize the server-side view data into the client-side object. The code for the ClientViewData class is contained in Listing 2.

Listing 2 – MvcAjax\ClientViewData.cs

using System.Web.Mvc;
using System.Web.Script.Serialization;

namespace MvcAjax
{
    public class ClientViewData
    {

        public string Serialize(ViewDataDictionary viewData)
        {
            var ser = new JavaScriptSerializer();
            ser.RegisterConverters(new JavaScriptConverter[] { new ViewDataConverter(), new ModelStateConverter() });
            return ser.Serialize(viewData);
        }


    }
}

The ClientViewData class takes advantage of the JavaScriptSerializer class included in the .NET framework. Notice that the JavaScriptSerializer is configured to use two custom JavaScript convertors named ViewDataConverter and ModelStateConverter. These special converters are needed to properly convert the ViewDataDictionary and ModelStateDictionary objects into JavaScript objects (the converters are included in the code download at the end of this blog entry).

A Walkthrough of Client View Data

To demonstrate how you can use the ClientViewData() helper in an ASP.NET MVC Ajax application, let’s do a walkthrough of creating a basic Movie database application. Our application will consist of a single page that contains a dropdown list of movie categories and an HTML table that displays movies that match the selected category (see Figure 1).

Figure 1 – The Movie Database Application

Here’s the cool part. Both the list of movie categories and the list of movies are stored in client view data. When the page is first rendered to the browser, the categories and movies are included in a JavaScript object rendered by the ClientViewData() helper. When you select a new movie category, the client view data is updated with an Ajax call. All interaction between the view (both client-side and server-side) happens through view data. A sharp separation of concerns is maintained.

The view is contained in Listing 3. There’s a lot happening in this view.

Listing 3 – Views\Home\Index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Tip45.Views.Home.Index" %>
<%@ Import Namespace="MvcAjax" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
    
    <style type="text/css">
    
    #movieContainer
    {
        display:none;
    }
    
    td, th
    {
        padding: 5px;
    }
    
    </style>

    <script type="text/javascript" src="../../Content/MicrosoftAjax.debug.js"></script>
    <script type="text/javascript" src="../../Content/MicrosoftAjaxTemplates.debug.js"></script>
    <script type="text/javascript" src="../../Content/jquery-1.2.6.min.js"></script>   
    <script type="text/javascript" src="../../Content/MvcAjax.js"></script> 
    <script type="text/javascript">

        var categoryView;
        var moviesView;

        $(pageReady);

        function pageReady()
        {
            categoryView = $create(Sys.UI.DataView, {}, {}, {}, $get("categories"));
            movieView = $create(Sys.UI.DataView, {}, {}, {}, $get("movies"));
        
            showCategories();
            $("#categories").change(function() { selectCategory($(this).val()); });
        }

        function selectCategory(categoryId)
        {
            if (categoryId)
            {
                $("#movieContainer").hide();
                updateViewData("/Home/Movies/" + categoryId, "movies", showMovies);
            }
        }

        function showCategories()
        {
            categoryView.set_data(viewData.categories);
            $("#categories").prepend( $("<option>Select Category</option>") )[0].selectedIndex = 0;
        }

        function showMovies()
        {
            movieView.set_data(viewData.movies);
            $("#movieContainer").fadeIn("normal");            
        }    
    
    </script>

</head>
<body>
    <div>
    

    <%= Ajax.ClientViewData() %>

    <label for="categories">Category:</label>
    <select id="categories">
    <option value="{{Id}}">{{Name}}</option>
    </select>

    <br /><br />

    <table id="movieContainer">
    <thead>
        <tr>
            <th>Title</th>
            <th>Director</th>
        </tr>
    </thead>
    <tbody id="movies">  
        <tr>
            <td>{{Title}}</td>
            <td>{{Director}}</td>        
        </tr>
    </tbody>
    </table>

    
    </div>
</body>
</html>

The first thing that you should notice is that the ClientViewData() helper method is called in the body of the page. The ClientViewData() helper renders the code in Listing 4.

Listing 4 – Rendered Client View Data

The code in Listing 4 is hard to read, but if you look closely then you’ll notice that the code defines a JavaScript object named viewData. The viewData object has two properties named categories and movies that represent the movie categories and movies.

The view takes advantage of both ASP.NET AJAX and jQuery to render the list of movie categories and movies. When the view is first loaded in the browser, the following code executes:

var categoryView;
var moviesView;

$(pageReady);

function pageReady()
{
   categoryView = $create(Sys.UI.DataView, {}, {}, {}, $get("categories"));
   movieView = $create(Sys.UI.DataView, {}, {}, {}, $get("movies"));
        
   showCategories();
   $("#categories").change(function() { selectCategory($(this).val()); });
}

The jQuery command $(pageReady) causes the pageReady() function to execute after the page DOM is fully loaded. The pageReady() function creates two ASP.NET AJAX client-side controls. Two ASP.NET AJAX DataView controls that represent the dropdown list of categories and HTML table of movies are created.

Next, the showCategories() method is called. This method adds the categories from view data to the dropdown list. The showCategories() function looks like this:

function showCategories()
{
    categoryView.set_data(viewData.categories);
    $("#categories").prepend( $("<option>Select Category</option>") )[0].selectedIndex = 0;
}

This simple function assigns the categories from view data to the categoryView ASP.NET AJAX control with the help of the set_data() method. Next, the function adds a default dropdown list option labeled Select Category.

When you select a new category, the selectCategory() function executes:

function selectCategory(categoryId)
{
    if (categoryId)
    {
        $("#movieContainer").hide();
        updateViewData("/Home/Movies/" + categoryId, "movies", showMovies);
    }
}

This function starts by hiding the HTML table that contains the movies. Next, it calls a method named updateViewData() to invoke a server-side ASP.NET MVC action and get the list of matching movies. The matching movies are assigned to the client view data viewData.movies property. Finally, the updateViewData() method calls the showMovies() method to show the movies represented by the client viewData.movies property in the HTML table.

Here is the code for showMovies():

function showMovies()
{
    movieView.set_data(viewData.movies);
    $("#movieContainer").fadeIn("normal");            
}

Just like the showCategories() method, the showMovies() method retrieves the data from client view data and assigns the data to the DataView. The showMovies() method then fades in the HTML table of movies by taking advantage of a jQuery animation effect.

The final piece of this application is the controller that returns the view and returns the movie data. The controller is contained in Listing 4.

Listing 4 – Controllers\HomeController.cs

using System.Web.Mvc;
using Tip45.Models;

namespace Tip45.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        private IMovieRepository _repository;

        public HomeController()
        {
            _repository = new MovieRepository();
        }

        public ViewResult Index()
        {

            ViewData["categories"] = _repository.ListCategories();          
            ViewData["movies"] = _repository.ListMovies();

            return View("Index");
        }

        public ActionResult Movies(int id)
        {
            return Json(_repository.ListMovies(id));
        }


    }
}

The Home controller is straightforward. It exposes two actions named Index() and Movies(). The Index() action returns the view. Notice that the categories and movies are added to server-side view data before the view is returned. The ClientViewData() helper in the Index view serializes the server-side view data to the client-side viewData JavaScript object.

The Movies() action returns a JsonResult that represents a list of matching movies. The Movies() action is invoked by the client-side code in the selectCategory() method discussed previously.

A Moment of Reflection

The advantage of the approach discussed in this tip is that it enables you to preserve the same clean separation of concerns when building an ASP.NET MVC application as when building a server-side ASP.NET MVC application. By taking advantage of client view data, you can require that all communication between the client view and the server happen through view data.

Another advantage of this approach is that the initial data for the categories dropdown list is available when the page first loads. A separate Ajax request does not need to be performed to retrieve the categories from the server because the categories are already present in the client view data.

One potential disadvantage of the approach discussed in this blog entry is it does not support graceful degradation. If someone attempts to use the Movie database application with JavaScript disabled, then nothing works. The initial dropdown of categories will never be displayed.

If you are building an ASP.NET application for internal use in your company then this drawback, most likely, won’t matter to you. You can require everyone in your company to use a browser that supports JavaScript.

If you are building a public facing website then this JavaScript requirement might be more of a concern. However, it is important to understand that everything in the code used in this tip is compatible with recent browsers (Internet Explorer, Firefox, Chrome). The change of the millennium was 8 years ago now, it is time to start expecting users to have modern browsers.

If you are building a highly interactive web application, then requiring users to use a browser that supports JavaScript seems reasonable. To put things in perspective, it would be crazy to make it a requirement that a desktop application continue to work with C# turned off.

Summary

In this tip, I demonstrated how you can create an HTML Helper that renders client view data. By taking advantage of client view data, you can maintain the same sharp separation of concerns in an ASP.NET MVC Ajax application as you maintain in an ASP.NET MVC server-side application.

I built this application by taking advantage of ASP.NET AJAX client templates used in combination with jQuery. This combination enables you to easily build pure Ajax applications.

I want to emphasize that the approach to building an ASP.NET MVC Ajax application described in this blog entry is only one approach. In future tips, I plan on exploring several approaches to the same problem.

Download the Code

ASP.NET MVC Application Building: Family Video Website #5 – Multiple File Upload with Progress

swalther — Fri, 03 Oct 2008 04:10:58 GMT

In this series of tutorials, I build an entire ASP.NET MVC application from start to finish. In this entry, I add a Silverlight file upload control to make it easier to upload multiple media files.

This blog entry is part of a series of entries on using ASP.NET MVC to build an entire Family Video Website from scratch. Before reading this entry, you might want to read the previous four entries:

Family Video Website #1 – Upload the Videos – In this entry, I create an MVC controller that accepts large file uploads.

Family Video Website #2 –Add the Database – In this entry, I added a database so that I could associate additional information, such as a title and description, with each video.

Family Video Website #3 – Play Videos with Silverlight – In this entry, I added the ASP.NET MediaPlayer Silverlight player to the application.

Family Video Website #4 – Paging, Silverlight, and Flip – In this entry, I add paging to the application and demonstrate how you can encode and upload videos recorded with a Flip video camera.

Accepting File Uploads

The standard HTML <input type=”file” /> element does not work well when you need to upload large files (see Figure 1). It doesn’t display a progress bar. When you initiate the upload, your browser freezes. You have no idea whether something is happening or not.

The standard HTML <input type=”file” /> element also does not provide you with a method of uploading multiple files at once. Typically, I dump a large number of pictures from my camera onto my hard drive and I want to upload several of these pictures to the Family website. The standard HTML file upload element forces you to upload the files, laboriously, one at a time.

Figure 1 – The standard HTML file upload element

For these reasons, I decided to investigate alternatives to the standard HTML file upload element. I investigated both Ajax and Silverlight solutions.

Using Ajax for File Uploads

My first inclination was to implement an Ajax solution for accepting file uploads. Using Ajax, you can continuously poll the server from the browser to check on the progress of uploading a file. In that way, you can display a progress bar.

I found good reviews of different Ajax file upload solutions for ASP.NET in Matt Berseth’s blog and Jon Galloway’s blog at the following addresses:

http://mattberseth.com/blog/2008/07/aspnet_file_upload_with_realti_1.html

http://weblogs.asp.net/jgalloway/archive/2008/01/08/large-file-uploads-in-asp-net.aspx

After reading Matt Berseth’s positive review of two open source Ajax file upload components, named NeatUpload and the ASP.Net File Upload/Download Module, I experimented with using these components in an ASP.NET MVC application. You can download these components from the following URLs:

http://www.brettle.com/neatupload

http://darrenjohnstone.net/2008/07/15/aspnet-file-upload-module-version-2-beta-1/

I made some progress in adapting these components to work in the context of an ASP.NET MVC application. However, after reading Jon Galloway’s blog, I decided to investigate a Silverlight solution to the problem of accepting file uploads.

Using Silverlight for File Uploads

When I need an answer to a Silverlight question, I turn to either Tim Heuer or Jesse Liberty who are the Silverlight gurus on my team. Tim recommended that I look into the following two Silverlight controls:

http://sandbox.inetsolution.com/fileuploadwebsite/FileUploaderTestPage.aspx

http://www.michielpost.nl/Silverlight/MultiFileUploader/

Both of these Silverlight controls enable you to upload multiple files. However, the first control is commercial and the second control is open source (the author says that the control will be released as open source with the Silverlight 2.0 release). Therefore, I decided to use the second control, the Multi File Uploader control, for the Family Videos Website application.

The Multi File Uploader is made of two parts. The user interface for accepting a file upload is created with a Silverlight control. You display the file upload user interface by adding a Silverlight control named mpost.SilverlightMultiFileUpload.xap to your project.

The Silverlight control is embedded in the Create.aspx view in Listing 1. The Create view enables you to upload new videos or pictures to the Family Video Website (see Figure 2). You can use the upload control to upload multiple pictures or videos at the same time.

Figure 2 – Using the Multi File Uploader Silverlight control

Listing 1 – Views\Media\Create.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Create.aspx.vb" Inherits="FamilyVideos.Create" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Add New Media</title>
</head>
<body>
    <div>
    
    <h1>Upload Media</h1>


<%--        
    MaxFileSizeKB:     Maximum file size in KBs. <br />
    MaxUploads:     Maximum number of simultaneous uploads <br />
    FileFilter:    File filter, for example ony jpeg use: FileFilter=Jpeg (*.jpg) |*.jpg <br />
    CustomParam: Your custom parameter, anything here will be available in the WCF webservice <br />
--%>
    <div id="silverlightControlHost">
        <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="500" height="260">
            <param name="source" value="/mpost.SilverlightMultiFileUpload.xap"/>
            <param name="initParams" value="MaxFileSizeKB=50000,MaxUploads=2,FileFilter=,CustomParam=yourparameters" />
            <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
                 <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
            </a>
        </object>
    </div>


    <a href="/Home/Index">Finished Uploading</a>

    
    </div>
</body>
</html>

The Silverlight control is embedded in the Create.aspx view with the help of an HTML <object> tag. The <object> tag includes a source parameter that points to the mpost.SilverlightMultiFileUpload.xap file in the project.

Notice that the <object> tag also contains an initParams parameter. You can use this parameter to configure several options for the Multi File Uploader control such as the maximum allowable size of an uploaded file.

The second part of the Multi File Uploader control is a WCF service. The Silverlight control calls the WCF service to pass the file being uploaded from the browser to the web server.

In order to use the service, you must add a reference to your project to the mpost.FileUploadServiceLibrary.dll assembly. This assembly contains a base WCF service that you can use as the base class for your WCF service.

The WCF service used by the Family Videos application is contained in Listing 2 and the code-behind class for this service is contained in Listing 3.

Listing 2 – SilverlightUploadService.svc

<%@ ServiceHost 
  Language="VB" 
  Debug="true" 
  Service="FamilyVideos.SilverlightUploadService"
  CodeBehind="SilverlightUploadService.svc.vb" %>

Listing 3 – SilverlightUploadService.svc.vb

Imports System.IO
Imports System.Web.Hosting

Public Class SilverlightUploadService
    Inherits mpost.FileUploadServiceLibrary.UploadService


    Protected Overrides Sub FinishedFileUpload(ByVal fileName As String, ByVal parameters As String)
        ' Create new media object
        Dim newMedia As New Media()
        newMedia.Title = "New Media"
        newMedia.FileName = fileName
        newMedia.Description = "No Description"
        newMedia.EntryDate = DateTime.Now

        ' Add new media object to database
        Dim repository As New MediaRepository()
        repository.Insert(newMedia)

        ' Rename file
        Dim oldName = GetFullPath(fileName)
        Dim newName = GetFullPath(newMedia.MediaName)
        File.Move(oldName, newName)
    End Sub

    Protected Overrides Function GetUploadFolder() As String
        Return Globals.UploadPath
    End Function


    Private Function GetFullPath(ByVal fileName As String) As String
        Return HostingEnvironment.ApplicationPhysicalPath + "/" + GetUploadFolder() + "/" + fileName
    End Function



End Class

When you create a service to use with the Multi File Uploader control, you override two methods of the base UploadService class. You override both the GetUploadFolder() and FinishedFileUpload() methods.

The GetUploadFolder() method returns the path to the folder where the file is uploaded. The FinishedFileUpload() method is called after the file is finished uploading. In Listing 3, the FinishedFileUpload() method is used to add a new Media item to the database that represents a newly uploaded file.

Finally, in order to get the Multi File Uploader control to work, you must add configuration information to your web configuration (web.config) file for the WCF service. The Family Videos application uses the system.serviceModel configuration section in Listing 4.

Listing 4 – web.config

    <system.serviceModel>
        <serviceHostingEnvironment aspNetCompatibilityEnabled="true" />
        <behaviors>
            <serviceBehaviors>
                <behavior name="FamilyVideos.SilverlightUploadServiceBehavior">
                    <serviceMetadata httpGetEnabled="true"/>
                    <serviceDebug includeExceptionDetailInFaults="true"/>
                </behavior>
            </serviceBehaviors>
        </behaviors>
        <services>
            <service behaviorConfiguration="FamilyVideos.SilverlightUploadServiceBehavior" 
                name="FamilyVideos.SilverlightUploadService">
                <endpoint address="" binding="basicHttpBinding" contract="mpost.FileUploadServiceLibrary.IUploadService">
                    <identity>
                        <dns value="localhost"/>
                    </identity>
                </endpoint>
                <endpoint address="mex" binding="mexHttpBinding" contract="IMetadataExchange"/>
            </service>
        </services>
    </system.serviceModel>

The Multi File Uploader works quite nicely with Firefox (see Figure 3). This means that the Family Video Website works great with both Internet Explorer and Firefox.

Figure 3 – Multi file Uploader used in Firefox

Summary

I’m very happy with the new method of uploading files described in this blog entry. The Silverlight control solution solves both of the problems associated with the standard HTML file upload element discussed in the beginning of this blog entry. First, the Silverlight control provides you with visual feedback on the progress of a file being uploaded. Second, it enables you to efficiently upload multiple files at a time (for example, all of the pictures that you dump to your hard drive from your digital camera).

There is still more work to do on the Family Videos Website. For example, we still need to tackle missing pieces of the application such as form validation and authentication.

Download the Code

ASP.NET MVC Application Building: Forums #6 – Ajax

swalther — Mon, 22 Sep 2008 07:36:59 GMT

In this series of blog entries, I build an entire MVC Forums application from start to finish. In this entry, I create the user interface for the Forums application by taking advantage of ASP.NET AJAX client templates. I build the entire user interface for the Forums application with a single view and perform all updates to the view with Ajax calls.

A page request is just an excuse for a bad user experience. We are conditioned to expect our web pages to freeze whenever we interact with a website. For example, each and every time we submit a form, we expect the browser to freeze and the clock to tick until the browser updates the page again.

There is no reason to inflict this pain on the users of your web applications. By taking advantage of Ajax, you can create web applications that respond instantly to user interactions. In this blog entry, I demonstrate how you can take advantage of Ajax when building ASP.NET MVC applications.

In particular, I discuss how you can take advantage of a new feature of ASP.NET AJAX arriving with the next version of this technology. I discuss how you can take advantage of ASP.NET AJAX client templates in the context of an ASP.NET MVC application. A preview version of client templates is available now and you can start experimenting with this technology in the applications that you are building today.

In this blog entry, I demonstrate how you can create a single page ASP.NET MVC application. Single page web applications are the holy grail of the Ajax developer. In a single page application, only one page must be requested by the browser. After the single page has loaded, all updates to the page are performed using client-side JavaScript. All new data displayed in the page is retrieved by performing Ajax calls against the server.

An Ajax application takes a little more work to write (yes, you do have to write some JavaScript), but it provides your users with a much better user experience.

The Single Page

The single page (the single view) in our MVC Forums application is contained in Listing 1. Notice that the header of the view contains several JavaScript includes. The view takes advantage of the following JavaScript libraries:

· MicrosoftAjax.js – The main Microsoft AJAX Library. Required for all things AJAX related in the Microsoft universe.

· MicrosoftAjaxTemplates.js – The preview version of the client template library included with the next version of Microsoft AJAX.

· MicrosoftMvcAjax.js – Extensions to the Microsoft AJAX Library for the MVC framework. This script is included with the default MVC Visual Studio project template.

· MvcAjax.js – A JavaScript Library that I wrote which contains useful helper methods for invoking controller actions.

· MvcForums.js – A JavaScript library that contains all of the user-interface logic used by the MVC Forums application.

Listing 1 – Views\Forums\Index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="MvcForums.Views.Forum.Index" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>MVC Forums</title>
    <link href="../../Content/MvcForums.css" rel="stylesheet" type="text/css" />
    <script src="../../Content/MicrosoftAjax.debug.js" type="text/javascript"></script>
    <script src="../../Content/MicrosoftAjaxTemplates.debug.js" type="text/javascript"></script>
    <script src="../../Content/MicrosoftMvcAjax.debug.js" type="text/javascript"></script>
    <script src="../../Content/MvcAjax.js" type="text/javascript"></script>
    <script src="../../Content/MvcForums.js" type="text/javascript"></script>
</head>
<body>
    <div id="banner" class="panel">
        <h1>MVC Forums</h1>
    </div>

    <div id="main">
        <div id="threadsAndMessageContainer">
            <% Html.RenderPartial("~/Partials/Threads.ascx"); %>
            <% Html.RenderPartial("~/Partials/Message.ascx"); %>        
        </div>
    <% Html.RenderPartial("~/Partials/Post.ascx"); %>
    <% Html.RenderPartial("~/Partials/Reply.ascx"); %>
    <% Html.RenderPartial("~/Partials/LoginRegister.ascx"); %>
    </div>
    
    <script type="text/javascript">
        Sys.Application.initialize();
    </script>
</body>
</html>

Notice, furthermore, that the body of the view in Listing 1 consists of a series of calls to the Html.RenderPartial() method. The MVC Forums application contains several forms: a login form, a registration form, a post form, a reply form. Each of these forms is contained in a separate partial. Placing the different forms displayed by the single page Ajax application in different partials makes it easier to manage the application. For example, the partial used to post a new message, named Post.ascx, is contained in Listing 2.

Listing 2 – Partials\Post.ascx

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="Post.ascx.cs" Inherits="MvcForums.Partials.Post" %>
<form id="post" action="" class="panel">

<label for="post.Subject">Subject:</label>
<br />
<input name="post.Subject" />

<br /><br />
<label for="post.Body">Body:</label>
<br />
<textarea name="post.Body" cols="60" rows="8"></textarea>

<br /><br />
<button id="post.Post">Post</button>
<button id="post.Cancel">Cancel</button>


</form>

There is nothing special about the partial in Listing 2. It simply consists of a form for posting a new message to the MVC Forums.

Using Client Templates

By taking advantage of client templates, you can format any array of JavaScript objects. Client templates are included with the next version of the Microsoft AJAX Library. You can download a preview of client templates from the following address:

http://www.codeplex.com/aspnet/Release/ProjectReleases.aspx?ReleaseId=16766

The MVC Forums application uses client templates in two places. First, a client template is used to format the list of message threads (see Figure 1). The list of threads is retrieved from the server with an Ajax call. When the data is returned, the data is formatted with the help of a client template.

Figure 1 – Message threads are rendered with a client template

Second, a client template is used to format a particular thread (see Figure 2). A thread consists of a post and all of the replies to the post. The contents of a thread are also retrieved with an Ajax call from the server.

Figure 2 – A particular thread is rendered with a client template

A client template is a fragment of XHTML. The client template used for formatting the list of threads is contained in Listing 3.

Listing 3 – allThreads template

<ul id="allThreads" class="sys-template"> 
<li>
        {{Author}} &mdash; 
        <a href="" messageid="{{Id}}">{{Subject}}</a> 
</li>
</ul>

There are two things that you should notice about the template in Listing 3. First, notice that the opening tag for the template includes a CSS class attribute that points to the sys-template class. This class is defined in the Forums.css file. The sys-template CSS class sets the display attribute to the value None in order to hide the contents of the template.

Second, notice the expressions {{Author}} and {{Subject}}. These expressions are replaced automatically with the values of these properties. These expressions work very much like the <%# Eval() %> expressions in a server-side ASP.NET page.

The template in Listing 3 is used by a client-side AJAX DataView control. This control is instantiated with the following line of code in the MvcForums.js library:

_allThreadsView = $create(Sys.UI.DataView, {}, {}, {}, $get("allThreads"));

This line of code creates a new client-side DataView control named _allThreadsView that uses the template in Listing 3. After you create a DataView control, you can assign data to the control by using its set_data() property. You can assign any JavaScript array that you want to the DataView by calling set_data(). In the MvcForums application, the array of data is retrieved from the server through an Ajax call which I describe in the next section.

Actions are Invoked with Ajax

The MVC Forums application never performs a normal post to the server. All information is conveyed back and forth between the Index view and the server through Ajax calls. The Ajax calls invoke MVC controller actions asynchronously.

In order to invoke MVC controller actions asynchronously, I had to write some helper methods. The MvcAjax.js file contains the following two helper methods:

· MvcAjax.MvcHelpers.invokeGet(url, succeededCallback, failedCallback)

· MvcAjax.MvcHelpers.invokePost(url, form, succeededCallback, failedCallback)

The first method enables you to invoke MVC controller actions by performing an HTTP GET. The second method enables you to invoke MVC controller actions by performing an HTTP POST.

For example, the list of message threads is retrieved from the following action exposed by the Forum controller:

public JsonResult Threads()
{
    return Json(_repository.SelectThreads());
}

This controller action returns a JSON result that represents all of the message threads. The list of threads is retrieved from the ForumRepository.

The following JavaScript code is used to display the threads:

MvcAjax.MvcHelpers.invokeGet("Forum/Threads", updateAllThreads);

function updateAllThreads(data)
{
    _allThreadsView.set_data(data);
}

The invokeGet() method invokes the Forum controller Threads() action. When this action returns the JSON result, the JSON result is passed to the updateAllThreads() method which assigns the data to the _allThreadsView client-side DataView control. At this point, the data is formatted by the client template and the list of threads is displayed.

Network Traffic is Kept to a Minimum

By taking advantage of client templates, you can reduce your network traffic to the bare minimum necessary to transfer database records between the server and the client. Unlike an UpdatePanel, when you use a client template, you don’t need to ship actual HTML markup between the server and client. The only thing that gets passed between server and client is pure data.

Furthermore, because we are working in the context of an MVC application, there is no view data that needs to be passed between server and client. Because we are building a single page application, there is really no reason for view data to exist. View data enables you to preserve state across postbacks. However, we don’t ever lose any state because we never perform a postback.

Passing only essential information between the server and client improves the responsiveness of the Forums application. The entire page is not reloaded whenever you click a new message thread to view it. Instead, only the message thread itself is transferred across the wire.

Forms Appear Instantly

When you click the New Post link in the MVC Forums application, the form for posting a new message appears instantly (see Figure 3). Unlike a normal web application, the form is not retrieved from the server using a page request. Instead, the Post form is loaded when the first page is loaded. It is hidden (with display:none) until you need to post a new message.

All of the forms in the MVC Forums application work in the same way. The Login, Register, Reply, and Post forms are all shipped to the browser with the first page request. You can post and reply to messages very quickly because these forms do not need to be repeatedly requested from the server.

Figure 3 – Posting a new message

Summary

I created the user interface for the Forums application that I describe in this blog entry as an experiment to test the new client templates functionality coming with the next version of the Microsoft AJAX Library. I discovered that client templates work very well in the context of an ASP.NET MVC application.

ASP.NET MVC enables you to easily build actions that return JSON results. Client-templates enable you to easily format JSON results. ASP.NET MVC and ASP.NET AJAX client templates are the perfect combination for Ajax fanatics like me.

I recommend that you download and play with the MVC Forums application included at the end of this blog entry. I think that you will be surprised by the responsiveness of the application.

Download the Code

ASP.NET MVC Application Building: Family Video Website #4 – Paging, Silverlight and Flip

swalther — Thu, 18 Sep 2008 19:30:37 GMT

(ASP.NET MVC + Silverlight + Flip Video) is a wonderful combination! In this blog entry, I continue building the Family Video Website. I integrate a new Silverlight video player, demonstrate how to upload Flip videos, and add paging.

This blog entry is part of a series of entries on using ASP.NET MVC to build an entire Family Video Website from scratch. Before reading this entry, you might want to read the previous three entries:

Family Video Website #1 – Upload the Videos – In this entry, I create an MVC controller that accepts large file uploads.

Family Video Website #2 –Add the Database – In this entry, I added a database so that I could associate additional information, such as a title and description, with each video.

Family Video Website #3 – Play Videos with Silverlight – In this entry, I added the ASP.NET MediaPlayer Silverlight player to the application.

Using the Silverlight 2 Video Player

In the previous entry in this series, I integrated the ASP.NET Media Player into the Family Video Website. Because you cannot use standard ASP.NET controls in an MVC view, I integrated the Media Player by adding the JavaScript files used by the control and not the control itself.

I got everything to work – but the process seemed a little messy. Fortunately, Tim Heuer stopped by my office at Microsoft recently and explained that there was a better way to show Silverlight videos. Tim Heuer and Jesse Liberty are the two Silverlight experts on my team. I’m really fortunate to be able to get feedback from some really smart people.

Tim explained that I could use the Silverlight 2 Video Player from the CodePlex website to play videos in my application. The Silverlight 2 Video Player can be downloaded from the following URL:

http://www.codeplex.com/sl2videoplayer

There are two versions of this video player – a full version and a light version. Both versions work with Internet Explorer and Firefox. The light version is only around 16K in size. That means that Grandma can watch videos without waiting a long time for the player to download.

Integrating the Silverlight 2 Player was very easy. You just need to add the right <object> tag to a view. The new version of the RenderVideo partial is contained in Listing 1.

Listing 1 – Partials\RenderVideo.ascx

<%@ Control Language="VB" AutoEventWireup="false" CodeBehind="RenderVideo.ascx.vb" Inherits="FamilyVideos.RenderVideo" %>

<div id="silverlightControlHost">
    <object data="data:application/x-silverlight," type="application/x-silverlight-2-b2" width="640" height="480">
        <param name="source" value="/VideoPlayerM.xap"/>
        <param name="background" value="white" />
        <param name="initParams" value="m=<%= ResolveUrl(ViewData.Model.MediaPath) %>" />
        <a href="http://go.microsoft.com/fwlink/?LinkID=115261" style="text-decoration: none;">
             <img src="http://go.microsoft.com/fwlink/?LinkId=108181" alt="Get Microsoft Silverlight" style="border-style: none"/>
        </a>
    </object>
</div>

There are two parameters that you need to set for the <object> tag. First, you need to make sure that the source parameter points to the VideoPlayerM.xap file that you download from the CodePlex website. I located the VideoPlayerM.xap file in the root of my application.

Second, the initParams parameter contains an m parameter that represents the path to the video file that you want to play. In Listing 1, the path to the video file is retrieved from View Data. Notice that I use the ResolveUrl() method to convert an application relative path (~/MediaFiles/MyVideo.wmv) into a proper path (/MyVideoApp/MediaFiles/MyVideo.wmv).

There is a complete list of initParams located at the following address:

http://www.codeplex.com/sl2videoplayer/Wiki/View.aspx?title=initparams&referringTitle=installation%20instructions

For example, you can use additional parameters to control the video thumbnail image and to auto-start the video.

After I integrated the new Silverlight 2 Video Player, the Index view renders the page in Figure 1 (Yes, that is my dog). It is a little hard to notice on the player, but the player does include a full-screen button located at its bottom right.

Figure 1 – The Silverlight 2 Video Player

Uploading Flip Videos

I bought a Flip video camera to make it easier to record family videos. I love this device (see Figure 2). It holds up to 60 minutes of video on 2 Gigabytes of memory. It is the size of a pack of cigarettes. It has a built-in USB “switchblade” that enables you to transfer videos from the camera to a computer easily.

Figure 2 – Flip Video Camera

I first learned about the Flip video camera by reading a review by another member of my team, Scott Hanselman. You can read his full review of the camera here:

http://www.hanselman.com/blog/PureDigitalFlipVideoUltraReview.aspx

(I got the Flip Mini which is a much smaller and therefore better version of the Flip camera than Hanselman bought).

After you record a Flip video, you can plug the Flip into your computer and transfer the AVI file. Next, launch Microsoft Expression Encoder to compress the video (see Figure 3). Click the Import button to the import the AVI file, select a Video Profile setting, and click the Encode button. It is amazing how much you can compress a video with Expression Encoder.

Figure 3 – Compressing with Expression Encoder

The video that is included with the application download at the end of this blog entry was compressed using the Web Server 512K DSL Setting. The 8 second Flip AVI video compressed down to 520KB. The video looks fine even when you play it in full-screen mode with the Silverlight 2 Video Player.

Expression Encoder produces a WMV file. By default, Expression Encoder outputs to the following folder:

\Documents\Expression\Expression Encoder\Output\

You can upload the WMV file to the Family Video Website MVC application in order to view it.

Adding Paging

I made one additional modification to the Family Video Website. I added support for paging. Only one video is displayed on the home page at a time. To see another video, you must either click a particular page number or click the Next page link.

In order to implement paging, I took advantage of the MvcPaging project that I describe in the following tip:

ASP.NET MVC Tip #44 – Create a Pager HTML Helper

Here’s the steps that I followed to implement paging. First, I modified the Index view so that it uses the Html.Pager() Helper. The modified Index view is contained in Listing 2.

Listing 2 – Views\Home\Index.aspx

<%@ Page Language="VB" AutoEventWireup="false" CodeBehind="Index.aspx.vb" Inherits="FamilyVideos.Index" %>
<%@ Import Namespace="MvcPaging" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>Family Videos Home</title>
    <style type="text/css">
    
    html
    {
        font-family: Verdana;
    }
    
    h1
    {
        font: bold 14px Verdana;
    }
    
    div.media
    {
        border-bottom: 1px solid black;
        padding: 10px;
    }

    .pageNumbers
    {
        display: inline;
        margin: 0px;
        padding: 0px;
    }
    
    .pageNumbers li
    {
        display: inline;
        padding: 4px;
        border: solid 2px blue;
        margin: 3px;
    }
    
    .pageNumbers a
    {
        text-decoration: none;
        color: blue;
    }
    
    .selectedPageNumber
    {
        background-color: blue;
        color: white;
        font-weight: bold;
    }
    
    </style>
</head>
<body>
    <div>

    <br /><br />
    <%=Html.Pager(ViewData.Model)%>   
    <br />

    <% For Each m In ViewData.Model%>

    <div class="media">
        <h1><%=Html.Encode(m.Title)%></h1>
        <p>
        <%=Html.Encode(m.Description)%>
        </p>
        
        <% Html.RenderPartial(FamilyVideos.RendererMap.GetRenderer(m.FileName), m)%>        
    </div>
    
    <% Next%>
  
    <br />
    <%=Html.Pager(ViewData.Model)%>   

    <br /><br />
    <%=Html.ActionLink("Add New Media", "Create", "Media")%>
   
    </div>
</body>
</html>

The Html.Pager() method is called twice. The paging user interface is displayed at both the top and bottom of the rendered page (see Figure 4).

Figure 4 – Index view

In Figure 1, you see a link to the first page, second page, and Next page. These links appear at both the top and bottom of the page. The appearance of the paging user interface is styled using the CSS classes that appear in the Index view header.

The Index view is a typed view. The ViewData.Model property is cast to an instance of the IPageOfList class with the code-behind class in Listing 3. You can open the code-behind file for a view by right-clicking the view in the Solution Explorer window and selecting the menu option View Code.

Listing 3 – Views\Home\Index.aspx.vb

Imports MvcPaging

Partial Public Class Index
    Inherits System.Web.Mvc.ViewPage(Of PageOfList(Of Media))

End Class

In order to return database records in pages, I also needed to modify the Home controller. The updated Home controller is contained in Listing 4.

Listing 4 – Controllers\HomeController.vb

<HandleError()> _
Public Class HomeController
    Inherits ControllerBase

    Function Index(ByVal id As Integer?)
        Dim pageIndex = 0
        If Not IsNothing(id) Then
            pageIndex = id
        End If

        Dim media = Repository.SelectRange(pageIndex, 1)
        Return View("Index", media)
    End Function

End Class

The modified Index() action now accepts an Id parameter. The Id parameter is used to represent the current page of records. The Id parameter can be an integer or it can be null (the ? mark indicates that the Id parameter accepts null values).

A range of database records is retrieved by calling the Repository.SelectRange() method. The modified MediaRepository class is contained in Listing 5.

Listing 5 – Models\MediaRepository.vb

Imports System.Data.Linq
Imports System.Web.Configuration
Imports System.Data.Linq.Mapping
Imports System.Web.Hosting
Imports MvcPaging

Public Class MediaRepository

    Private _dataContext As DataContext
    Private _media As Table(Of Media)

    Sub New()
        ' Get connection string from web config
        Dim conSettings As ConnectionStringSettings
        conSettings = WebConfigurationManager.ConnectionStrings("con1")
        If IsNothing(conSettings) Then
            Throw New ConfigurationErrorsException("Missing con1 database connection string.")
        End If

        ' Get XML mapping file
        Dim map = XmlMappingSource.FromUrl(HostingEnvironment.MapPath("~/Models/Media.xml"))

        ' Create DataContext
        _dataContext = New DataContext(conSettings.ConnectionString, map)

        ' Create media table
        _media = _dataContext.GetTable(Of Media)()
    End Sub

    Sub Insert(ByVal mediaToAdd As Media)
        _media.InsertOnSubmit(mediaToAdd)
        _dataContext.SubmitChanges()
    End Sub

    Function SelectAll() As List(Of Media)
        Return _media.ToList()
    End Function

    Function SelectRange(ByVal pageIndex As Integer, ByVal pageSize As Integer) As PageOfList(Of Media)
        Return _media.ToPageOfList(pageIndex, pageSize)
    End Function

End Class

The SelectRange() method takes advantage of the ToPageOfList() extension method defined in the MvcPaging project. This extension method generates an instance of a PageOfList class from a LINQ to SQL query.

Summary

In this blog entry, I modified the video player used by the Family Videos Website. Integrating the new Silverlight 2 Video Player that Tim Heuer recommended was much easier than integrating the ASP.NET Media Player. I also added a paging user interface to the application by taking advantage of the Html.Pager() helper.

There is still more work to do! For example, I still need to implement security (authentication and authorization) for the website. Also, it would be nice if I could find some way to display a progress bar when uploading large video files.

Download the Code

ASP.NET MVC Tip #44 – Create a Pager HTML Helper

swalther — Thu, 18 Sep 2008 07:25:58 GMT

In this tip, I demonstrate how you can create a custom HTML Helper that you can use to generate a user interface for paging through a set of database records. I build on the work of Troy Goode and Martijn Boland. I also demonstrate how you can build unit tests for HTML Helpers by faking the HtmlHelper class.

This week, I discovered that I desperately needed a way of paging through the database records in two of the sample MVC applications that I am building. I needed a clean, flexible, and testable way to generate the user interface for paging through a set of database records.

There are several really good solutions to this problem that already exist. I recommend that you take a look at Troy Goode’s discussion of his PagedList class at the following URL:

http://www.squaredroot.com/post/2008/07/08/PagedList-Strikes-Back.aspx

Also, see Martijn Boland’s Pager HTML Helper at the following URL:

http://blogs.taiga.nl/martijn/Default.aspx

I used both of these solutions as a starting point. However, there were some additional features that I wanted that forced me to extend these existing solutions:

· I wanted complete flexibility in the way in which I formatted my pager.

· I wanted a way to easily build unit tests for my pager.

Walkthrough of the Pager HTML Helper

Let me provide a quick walkthrough of my Pager Helper solution. Let’s start by creating a controller that returns a set of database records. The Home controller in Listing 1 uses a MovieRepository class to return a particular range of Movie database records.

Listing 1 – Controllers\HomeController.cs

using System.Web.Mvc;
using Tip44.Models;

namespace Tip44.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        private MovieRepository _repository;

        public HomeController()
        {
            _repository = new MovieRepository();
        }

        public ActionResult Index(int? id)
        {
            var pageIndex = id ?? 0;

            var range = _repository.SelectRange(pageIndex, 2); 
            return View(range);
        }
    }
}

The Home controller in Listing 1 has one action named Index(). The Index() action accepts an Id parameter that represents a page index. The Index() action returns a set of database records that correspond to the page index.

The Home controller takes advantage of the MovieRepository in Listing 2 to retrieve the database records.

Listing 2 – Models\MovieRepository.cs

using MvcPaging;

namespace Tip44.Models
{
    public class MovieRepository
    {
        private MovieDataContext _dataContext;

        public MovieRepository()
        {
            _dataContext = new MovieDataContext();
        }

        public IPageOfList<Movie> SelectRange(int pageIndex, int pageSize)
        {
            return _dataContext.Movies.ToPageOfList(pageIndex, pageSize);
        }    
    }

}

A range of movie records is returned by the SelectRange() method. The ToPageOfList() extension method is called to generate an instance of the PageOfList class. The PageOfList class represents one page of database records. The code for this class is contained in Listing 3.

Listing 3 – Models\PageOfList.cs

using System;
using System.Collections.Generic;

namespace MvcPaging
{
    public class PageOfList<T> : List<T>, IPageOfList<T>
    {
        public PageOfList(IEnumerable<T> items, int pageIndex, int pageSize, int totalItemCount)
        {
            this.AddRange(items);
            this.PageIndex = pageIndex;
            this.PageSize = pageSize;
            this.TotalItemCount = totalItemCount;
            this.TotalPageCount = (int)Math.Ceiling(totalItemCount / (double)pageSize);
        }

        public int PageIndex { get; set; }
        public int PageSize { get; set; }
        public int TotalItemCount { get; set; }
        public int TotalPageCount { get; private set; }

    }
}

Finally, the movie database records are displayed in the view in Listing 4. The view in Listing 4 is a strongly typed view in which the ViewData.Model property is typed to an instance of the IPageOfList interface.

Listing 4 – Views\Home\Index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Tip44.Views.Home.Index" %>
<%@ Import Namespace="MvcPaging" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
    <style type="text/css">
    
    .pageNumbers
    {
        display:inline;
        margin:0px;
    }
    
    .pageNumbers li
    {
        display: inline;
        padding:3px;
    }
    
    .selectedPageNumber
    {
        font-weight: bold;
        text-decoration: none;
    }
        
    </style>
</head>
<body>
    <div>
    
    <ul>
    <% foreach (var m in ViewData.Model)
       { %>
    
        <li><%= m.Title %></li>
    
    <% } %>
    </ul>
            
    <%= Html.Pager(ViewData.Model)%>

    
 </div>
</body>
</html>

When the view in Listing 4 is displayed in a web browser, you see the paging user interface in Figure 1.

Figure 1 – Paging through movie records

Notice that the view in Listing 4 includes a Cascading Style Sheet. By default, the Html.Pager() renders the list of page numbers in an unordered bulleted list (an XHTML <ul> tag). The CSS classes are used to format this list so that the list of page numbers appears in a single horizontal line.

By default, the Html.Pager() renders three CSS classes: pageNumbers, pageNumber, and selectedPageNumber. For example, the bulleted list displayed in Figure 1 is rendered with the following XHTML:

</ul>

Notice that the 4^th page number is rendered with the selectedPageNumber CSS class.

Setting Pager Options

There are several options that you can set when using the Pager HTML Helper. All of these options are represented by the PagerOptions class that you can pass as an additional parameter to the Html.Pager() method. The PagerOptions class supports the following properties:

· IndexParameterName – The name of the parameter used to pass the page index. This property defaults to the value Id.

· MaximumPageNumbers – The maximum number of page numbers to display. This property defaults to the value 5.

· PageNumberFormatString – A format string that you can apply to each unselected page number.

· SelectedPageNumberFormatString – A format string that you can apply to the selected page number.

· ShowPrevious – When true, a previous link is displayed.

· PreviousText – The text displayed for the previous link. Defaults to <.

· ShowNext – When true, a next link is displayed.

· NextText – The text displayed for the next link. Defaults to >.

· ShowNumbers – When true, page number links are displayed.

Completely Customizing the Pager User Interface

If you want to completely customize the appearance of the pager user interface then you can use the Html.PagerList() method instead of the Html.Pager() method. The Html.PagerList() method returns a list of PagerItem classes. You can render the list of PagerItems in a loop.

For example, the revised Index view in Listing 5 uses the Html.PagerList() method to display the page numbers.

Listing 5 – Views\Home\Index.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="Tip44.Views.Home.Index" %>
<%@ Import Namespace="MvcPaging" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
    <style type="text/css">
    
    .pageNumbers
    {
        display:inline;
        margin:0px;
    }
    
    .pageNumbers li
    {
        display: inline;
        padding:3px;
    }
    
    .selectedPageNumber
    {
        font-weight: bold;
        text-decoration: none;
    }
        
    </style>
</head>
<body>
    <div>
    
    <ul>
    <% foreach (var m in ViewData.Model)
       { %>
    
        <li><%= m.Title %></li>
    
    <% } %>
    </ul>
            
    <%-- Show Page Numbers --%>

    <% foreach (PagerItem item in Html.PagerList(ViewData.Model))
       { %>    
       <a href='<%= item.Url %>' class='<%=item.IsSelected ? "selectedPageNumber" : "pageNumber" %>'><%= item.Text%></a> &nbsp;
    <% } %>

    
 </div>
</body>
</html>

Figure 2 – Custom pager user interface

The main reason that I added the Html.PagerList() method to the PagerHelper class is to improve the testability of the class. Testing the collection of PageItems returned by Html.PagerList() is easier than testing the single gigantic string returned by Html.Pager(). Behind the scenes, the Html.Pager() method simply calls the Html.PagerList() method. Therefore, building unit tests for the Html.PagerList() method enables me to test the Html.Pager() method as well.

Testing the Pager HTML Helper

I created a separate test project for unit testing the PagerHelper class. The test project has one test class named PagerHelperTests that contains 10 unit tests.

One issue that I ran into almost immediately when testing the PagerHelper class was the problem of faking the MVC HtmlHelper class. In order to unit test an extension method on the HtmlHelper class, you need a way of faking of the HtmlHelper class.

I decided to extend the MvcFakes project with a FakeHtmlHelper class. I used the FakeHtmlHelper class in all of the PagerHelper unit tests. The FakeHtmlHelper is created in the following test class Initialize method:

[TestInitialize]
public void Initialize()
{
    // Create fake Html Helper
    var controller = new TestController();
    var routeData = new RouteData();
    routeData.Values["controller"] = "home";
    routeData.Values["action"] = "index";
    _helper = new FakeHtmlHelper(controller, routeData);

    // Create fake items to page through
    _items = new List<string>();
    for (var i = 0; i < 99; i++)
        _items.Add(String.Format("item{0}", i));
}

Notice that I need to pass both a controller and an instance of the RouteData class to the FakeHtmlHelper class. The RouteData class represents the controller and action that generated the current view. These values are used to generate the page number links.

The Intialize() method also creates a set of 100 fake data records. These data records are used in the unit tests as a proxy for actual database records.

Here’s a sample of one of the test methods from the PagerHelperTests class:

[TestMethod]
public void NoShowNext()
{
    // Arrange
    var page = _items.AsQueryable().ToPageOfList(0, 5);

    // Act
    var options = new PagerOptions { ShowNext = false };
    var results = PagerHelper.PagerList(_helper, page, options);

    // Assert
    foreach (PagerItem item in results)
    { 
        Assert.AreNotEqual(item.Text, options.NextText);
    }
}

This test method verifies that setting the ShowNext PagerOption property to the value false causes the Next link to not be displayed.

In the Arrange section, an instance of the PageOfList class is created that represents a range of records from the fake database records.

Next, in the Act section, the PagerOptions class is created and the PagerHelper.PagerList() method is called. The PagerHelper.PagerList() method returns a collection of PagerItem objects.

Finally, in the Assert section, a loop is used to iterate through each PagerItem object to verify that the Next link does not appear in the PagerItems. If the text for the Next link is found then the test fails.

Using the PagerHelper in Your Projects

At the end of this blog entry, there is a link to download all of the code for the PagerHelper. All of the support classes for the PagerHelper are located in the MvcPaging project. If you want to use the PagerHelper in your MVC projects, you need to add a reference to the MvcPaging assembly.

Summary

Creating a good Pager HTML Helper is difficult. There are many ways that you might want to customize the user interface for paging through a set of database records. Attempting to accommodate all of the different ways that you might want to customize a paging user interface is close to impossible.

Working on this project gave me a great deal of respect for the work that Troy Goode and Martijn Boland performed on their implementations of pagers. I hope that this tip can provide you with a useful starting point, and save you some time, when you need to implement a user interface for paging through database records.

Download the Code

ASP.NET MVC Application Building: Forums #5 – Membership

swalther — Fri, 12 Sep 2008 16:22:40 GMT

In this series of blog posts, I build an entire ASP.NET MVC Forums application from start to finish. In this post, I explain how to test and implement authentication and authorization for the Forums application.

Before you read this blog post, you should read the previous posts in this series:

ASP.NET MVC Application Building: Forums #1 – Create the Perfect Application – In this first entry, I explain the overall goals of the ASP.NET MVC Forums application. I emphasize the importance of Software Design Principles and justify my choice to use test-driven development.

ASP.NET MVC Application Building: Forums #2 – Create the First Unit Test – In the second entry, I build the first unit test and create the Index() action which returns a collection of messages.

ASP.NET MVC Application Building: Forums #3 – Post Messages – In the third entry, I add the unit tests and functionality required to post new messages and replies.

What about the fourth entry in this series? The fourth (and fourth ½ posts) were devoted to the subject of validation. I keep revisiting this topic because it is so important to get it right. In the first half of this post, I revisit the issue of validation (yet again). In the second half of this post, I address the issue of authenticating and authorizing users.

Validation Revisited, Again

I decided to modify the Forums application so that it uses the validation attributes from the System.ComponentModel.DataAnnotations namespace. These are the same set of validation attributes that are used in ASP.NET Dynamic Data applications. In order to use these attributes, you must have Visual Studio Service Pack 1 installed and you must add a reference to the System.ComponentModel.DataAnnotations assembly (located in the Global Assembly Cache).

If you want to learn more about using these attributes, please read the following blog post:

ASP.NET MVC Tip #43 – Use Data Annotation Validators

Right now, my validation needs are minor. I need to validate that when a user posts a new message, the user supplies both a message subject and message body. In order to perform this type of validation, I can take advantage of the Data Annotations Required attribute in my Message class. The modified Message class in Listing 1 uses the Required attribute.

Listing 1 – Message.cs

using System;
using MvcValidation;
using System.Collections.Generic;
using System.Data.Linq;
using System.Web.Mvc;
using System.ComponentModel.DataAnnotations;

namespace MvcForums.Models.Entities
{
    public class Message 
    {
        private DateTime _entryDate = DateTime.Now;

        public Message()
        { }

        public Message(int id, int? parentThreadId, int? parentMessageId, string author, string subject, string body)
        {
            this.Id = id;
            this.ParentThreadId = parentThreadId;
            this.ParentMessageId = parentMessageId;
            this.Author = author;
            this.Subject = subject;
            this.Body = body;
        }

        public int Id { get; set; }
        public int? ParentThreadId { get; set; }
        public int? ParentMessageId { get; set; }
        public string Author { get; set; }

        [Required(ErrorMessage="You must enter a message subject.")]
        public string Subject { get; set; }

        [Required(ErrorMessage="You must enter a message body.")]        
        public string Body { get; set; }
        
        public DateTime EntryDate 
        {
            get { return _entryDate; }
            set { _entryDate = value; }  
        }

    }
}

Notice that I have supplied an ErrorMessage for both of the Required attributes.

I modified the ForumRepository class so that it accepts a class that implements the IValidation interface in its constructor. In other words, a particular validation framework is injected into the ForumRepository class using dependency injection.

I modified the AddMessage() method in my ForumsRepository class so that it calls _validation.Validate() before inserting a new Forums message into the database. The new version of the ForumRepository class is contained in Listing 2.

Listing 2 – Models\ForumRepository.cs

using MvcFakes;
using System.Linq;
using System.Data.Linq;
using LinqToSqlExtensions;
using Microsoft.Web.Mvc;
using System.Collections.Generic;
using MvcForums.Models.Entities;
using MvcValidation;

namespace MvcForums.Models
{
    public class ForumRepository : IForumRepository
    {
        private IDataContext _dataContext;
        private IValidation _validation; 

        public ForumRepository()
            : this(new DataContextWrapper("conForumsDB", "~/Models/ForumsDB.xml"), new Validation())
        { }
        
        public ForumRepository(IDataContext dataContext, IValidation validation)
        {
            _dataContext = dataContext;
            _validation = validation;
        }

        public IList<Message> SelectThreads()
        {
            var messages = _dataContext.GetTable<Message>();
            var threads = from m in messages
                          where m.ParentThreadId == null
                          select m;
            return threads.ToList();
        }

        public IList<Message> SelectMessages(int threadId)
        {
            var messages = _dataContext.GetTable<Message>();
            var threads = from m in messages
                          where (m.Id == threadId || m.ParentThreadId == threadId)
                          select m;
            return threads.ToList();
        }


        public Message AddMessage(Message messageToAdd)
        {
            _validation.Validate(messageToAdd);
            _dataContext.Insert(messageToAdd);
            return messageToAdd;
        }
    }
}

If any of the Data Annotations validation attributes are invalid (the subject or body is missing) then the Validation.Validate() method throws a ValidationIssueException.

Finally, I changed the ForumController class so that it catches a ValidationIssueException. The modified ForumController class is contained in Listing 3.

Listing 3 – Controllers\ForumController.cs

using System;
using System.Web.Mvc;
using MvcForums.Models;
using Microsoft.Web.Mvc;
using MvcForums.Models.Entities;
using MvcValidation;

namespace MvcForums.Controllers
{
    public class ForumController : Controller
    {
        private IForumRepository _repository;

        public ForumController()
            : this(new ForumRepository())
        { }

        public ForumController(IForumRepository repository)
        {
            _repository = repository;
        }

        public ActionResult Index()
        {
            ViewData.Model = _repository.SelectThreads();
            return View("Index");
        }

        [AcceptVerbs("GET")]
        public ActionResult Create()
        {
            return View("Create");
        }

        [AcceptVerbs("Post")]
        public ActionResult Create(FormCollection form)
        {
            var messageToCreate = new Message();

            try
            {
                UpdateModel(messageToCreate, new[] { "Author", "ParentThreadId", "ParentMessageId", "Subject", "Body" });
                _repository.AddMessage(messageToCreate);
            }
            catch (ValidationIssueException vex)
            {
                ViewData.ModelState.CopyValidationIssues(vex);
                return View("Create", messageToCreate);
            }
            catch 
            {
                return View("Create", messageToCreate);
            }

            // Redirect
            return RedirectToAction("Index");
        }

        public ActionResult Thread(int threadId)
        {
            ViewData.Model = _repository.SelectMessages(threadId);
            return View("Thread");
        }

    }
}

Let’s examine the Create(FormCollection form) method in more detail. This method starts by creating a new instance of the Message class. Next, it calls the UpdateModel() method to copy the fields from the XHTML form to the instance of the Message class. Notice that the UpdateModel() method uses a whitelist of form field names to copy (You wouldn't want a sneaky hacker overriding the UserName property). If the UpdateModel() method encounters issues then it updates the ModelState and throws an InvalidOperationException.

Next, the ForumRespository.AddMessage() method is called. Remember that this method calls Validation.Validate() internally. If the Validate() method raises an exception, the exception is caught by the Catch clause for the ValidationIssueException.

The ValidationIssueException Catch clause uses the CopyValidationIssues() extension method on the ViewData.Model class to copy all of the validation issues represented by the ValidationIssueException class into ModelState. When the Create view is redisplayed, the error messages from the Data Annotations attributes are displayed (see Figure 1).

Figure 1 – Validation issues bubble up from the Required validation attributes

I had to create several support classes to get the Data Annotations validation attributes to work with the Forums application. These classes are all contained in a separate project (included with the download) named MvcValidation. The MvcValidation project includes the following classes:

· IValidation – Represents the contract that all validation providers must support.

· Validation – Implements the Validate() method that executes all of the Data Annotations validation attributes on a class.

· ValidationIssue – Represents one validation issue.

· ValidationIssueException – Represents the exception that is thrown when there is at least one validation issue.

· ModelStateDictionaryExtensions – Adds the CopyValidationIssues() method to the ViewData.ModelState class.

After I made all of these modifications, my original unit tests for validation continued to run successfully. These two tests are contained in the Controllers\ForumsControllerTest.cs class and look like this:

[TestMethod]
public void EmptySubjectFailsValidation()
{
    // Arrange
    var controller = new ForumController(_repository);

    // Act
    var form = new NameValueCollection();
    form.Add("author", "Stephen");
    form.Add("subject", String.Empty);
    form.Add("body", "Body of new thread");
    controller.ControllerContext = new FakeControllerContext(controller, form);
    var result = (ViewResult)controller.Create(new FormCollection());

    // Assert
    var modelState = result.ViewData.ModelState;
    Assert.IsFalse(result.ViewData.ModelState.IsValid);
    Assert.AreEqual("You must enter a message subject.",
        modelState["subject"].Errors[0].ErrorMessage);
}


[TestMethod]
public void EmptyBodyFailsValidation()
{
    // Arrange
    var controller = new ForumController(_repository);

    // Act
    var form = new NameValueCollection();
    form.Add("author", "Stephen");
    form.Add("subject", "New Message");
    form.Add("body", String.Empty);
    controller.ControllerContext = new FakeControllerContext(controller, form);
    var result = (ViewResult)controller.Create(new FormCollection());

    // Assert
    var modelState = result.ViewData.ModelState;
    Assert.IsFalse(modelState.IsValid);
    Assert.AreEqual("You must enter a message body.", 
        modelState["body"].Errors[0].ErrorMessage);
}

The first test verifies that an empty subject form field causes ModelState to contain the error message “You must enter a message subject.”. The second test verifies that an empty body form field causes ModelState to contain the error message "You must enter a message body.".

Requiring Authentication

We want to make sure that only authenticated users can post a message. We require that people register and login before posting to the forums.

Since we are being virtuous about test-driven development, we should express this intention with a test. The test in Listing 4 verifies that when an anonymous user executes the Index() action, an HTTP 401 Status Code is returned. The HTTP 401 Status Code means that the user is unauthorized (see http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html).

Listing 4 – AnonymousUserIsRedirectedTest

[TestMethod]
public void AnonymousUserIsRedirected()
{
    // Arrange
    var controller = new ForumController(_repository);
    var fakeContext = new FakeControllerContext(controller);

    // Act            
    controller.ActionInvoker.InvokeAction(fakeContext, "Index");
    int statusCode = fakeContext.HttpContext.Response.StatusCode;

    // Assert
    Assert.AreEqual(401, statusCode);
}

Notice that the test in Listing 4 calls the Controller.ActionInvoker.InvokeAction() method to execute the Index() action. If you want the attributes associated with a controller action to execute then you need to call InvokeAction(). If you just call controller.Index() then any attributes applied to the Index() action are ignored.

In order to call ActionInvoker.InvokeAction(), we needed to fake the ControllerContext. I faked the ControllerContext by taking advantage of my MvcFakes project.

When you first run the test, it will fail (see Figure 2). You want the test to fail because only a failing tests provides you with permission to modify your application code.

Figure 2 – Failing test

We can satisfy the unit test by adding an [Authorize] attribute to the ForumsController. When you add an [Authorize] attribute to a controller class, the attribute is applied to all of the controller actions automatically. The modified ForumController class is declared like this:

[Authorize]

public class ForumController : Controller

{

….

}

After we add the [Authorize] attribute, our test passes and we can breathe a sigh of relief.

We next need to make sure that a user’s user name is added to the database when the user submits a new forum post. Therefore, we need another test. The test in Listing 5 verifies when a user named Kermit posts a new message then the Message.Author property has the value Kermit.

Listing 5 – PostHasUserName Test

[TestMethod]
public void PostHasUserName()
{
    // Arrange
    var controller = new ForumController(_repository);
    
    // Act            
    var form = new NameValueCollection();
    form.Add("subject", "New Thread!");
    form.Add("body", "Body of new thread");
    var fakeContext = new FakeControllerContext(controller, "Kermit", form);            
    controller.ControllerContext = fakeContext;
    controller.Create(new FormCollection());

    // Assert
    var threads = _repository.SelectThreads();
    var lastThread = threads.Last();
    Assert.AreEqual("Kermit", lastThread.Author); 
}

The test in Listing 5, once again, takes advantage of the MvcFakes project to create a fake ControllerContext. This ControllerContext represents the user name Kermit and a set of form parameters. The test verifies that when the Create() action is invoked and a new Forums message is created that the new Message.Author property is equal to the value Kermit.

In order to pass this new test, we need to make two simple modifications to the Create() action in the FormController class. The modified Create() action is contained in Listing 6.

Listing 6 – CreateAction() (with user name)

[AcceptVerbs("Post")]
public ActionResult Create(FormCollection form)
{
    var messageToCreate = new Message();
    messageToCreate.Author = User.Identity.Name;

    try
    {
        UpdateModel(messageToCreate, new[] { "ParentThreadId", "ParentMessageId", "Subject", "Body" });
        _repository.AddMessage(messageToCreate);
    }
    catch (ValidationIssueException vex)
    {
        ViewData.ModelState.CopyValidationIssues(vex);
        return View("Create", messageToCreate);
    }
    catch 
    {
        return View("Create", messageToCreate);
    }

    // Redirect
    return RedirectToAction("Index");
}

In Listing 6, I removed Author from the whitelist of form parameter names used by the UpdateModel() method. We don’t want to retrieve the message author from an XHTML form parameter. Instead, the value of the Author property is retrieved from User.Identity.Name.

I debated about exactly where to assign the user name to the Message.Author property. I was tempted to do it in the constructor for the Message class. However, I don’t want to couple my Message class to the HttpContext. I want to make sure that I can use my model classes with any front end rendering technology including Silverlight, Windows Forms, or a WCF service. Therefore, I assigned the user name to the Message.UserName property in the controller action.

After I made these changes to the Create() action, all of the tests pass (see Figure 4). I’ve now implemented basic authentication. In the future, if I modify my code, I can be reassured that I know when authentication is working and when it is not.

Figure 4 – Success!

As a sanity check, I like to actually run my MVC application occasionally. Fortunately, we don’t need to create a Login and Register view because the Visual Studio MVC project supplies an AccountController controller, Login view, and Register view for us.

When we run the MVC Forums application, we get the view in Figure 5.

Figure 5 – The Login page

Notice that the Login view includes a link to register. If you click this link, you get the view in Figure 4.

Figure 4 – Registration page

You can complete the form in Figure 4 to create a new account. The Account controller takes advantage of a database named AspNetDB to store user names and passwords. This database is located in the App_Data folder. You can, of course, configure the ASP.NET Membership provider to store the account information in some other database by modifying settings in the Web configuration (web.config) file.

After you register or login, you are redirected to the URL /Home/Index. Our Forums application does not have a HomeController. Therefore, we need to modify the AccountController so that it redirects to the Index action of the ForumController. You can do a quick search and replace in the Account controller to correct his behavior.

Summary

This blog entry had two parts. In the first part, I demonstrated how you can perform form validation in an MVC application by taking advantage of the Data Annotations validation attribute classes. We added attributes to our Message class to mark both the Subject and Body properties as required.

Next, I demonstrated how you can create unit tests to test authentication. We created a unit test that verifies that unauthorized users cannot invoke a controller action. We also created a unit test that verifies that a person’s user name is added to the database when the person submits a new message.

We still have more work to do! In the next blog entry, I need to clean up the views for our forums application. I want to make sure that you can see the list of messages, start a new thread, and reply to an existing message. We also should introduce master pages and partials to make easier to maintain our views.

Download the Code

ASP.NET MVC Tip #43 – Use Data Annotation Validators

swalther — Wed, 10 Sep 2008 23:20:03 GMT

In this tip, I demonstrate how to take advantage of the validators from the System.ComponentModel.DataAnnotations namespace in an MVC application. You can take advantage of these validators to validate form data before submitting the form data into a database.

In my previous tip, I explained how you can take advantage of the validators included with the Microsoft Enterprise Library Validation Application Block to validate an entity before submitting the entity to a database. The Validation Application Block supplies you with a very rich set of validators that support advanced validation scenarios. You can read about using the Validation Application Block in an MVC application here:

ASP.NET MVC Tip #42 – Use the Validation Application Block

In this tip, I explore an alternative set of validators. In this tip, I discuss the validators included in the System.ComponentModel.DataAnnotations namespace. These are the very same validators as you use in a Dynamic Data application. You get these validators when you install Visual Studio Service Pack 1.

I found the Data Annotation validators to be easier to use in simple validation scenarios than the validators included with the Validaiton Application Block. If you want to perform simple validation tasks such as verifying required fields, verifying email addresses, and checking the length of form fields values then the Data Annotation validators are a great option.

Overview of the Data Annotation Validators

The Data Annotation validators are contained in the System.ComponentModel.DataAnnotations namespace. In order to use these validators in an MVC application, you must have Visual Studio Service Pack 1 installed. Furthermore, you must add a reference to the System.ComponentModel.DataAnnotations assembly (located in the Global Assembly Cache).

There are 5 validation attributes in the DataAnnotations namespace:

· DataType – Enables you to verify that a property matches a certain type. Valid types are Custom, DateTime, Date, Time, Duration, PhoneNumber, Currency, Text, Html, MultiLineText, EmailAddress, Password, and URL. You also can specify a custom type.

· Range – Enables you to validate whether a property value falls between a specified minimum and maximum value.

· RegularExpression – Enables you to validate whether a property value matches a regular expression pattern.

· Required – Enables you to validate whether a property has a value. A property value that consists only of whitespace fails validation.

· StringLength – Enables you to validate whether a string is less than a specified maximum length.

This is a very basic set of validators. They cover the most common validation tasks. Of course, you can create new custom validators by inheriting from the base ValidationAttribute class.

Walkthrough: Using the Data Annotation Validators in an MVC Application

In this section, I show how you can use the Data Annotation validators in the context of an MVC application. I’ll show you how to use the validators when building a Movie database application (see Figure 1).

Figure 1 – Movie database application

Let’s start with the model class that we want to validate. The Movie class represents a particular movie. The Movie class is contained in Listing 1.

Listing 1 – Movie.cs

using System.ComponentModel.DataAnnotations;

namespace Tip43.Models
{
    public class Movie
    {
        public int Id { get; set; }
        
        [Required(ErrorMessage="Movie title is required.")]
        [StringLength(8, ErrorMessage="Movie title cannot be longer than 8 characters")]
        public string Title { get; set; }

        [Required(ErrorMessage="Movie director is required")]
        public string Director { get; set; }

        [Required(ErrorMessage="Box office totals is required")]
        public decimal? BoxOfficeTotals { get; set; }
    }
}

The Movie class in Listing 1 represents four properties of a movie: Id, Title, Director, and BoxOfficeTotals. The Data Annotations Required attribute is applied to the Title, Director, and BoxOfficeTotals properties. The StringLength validator is applied to the Title property.

The controller in Listing 2 exposes three actions: Index(), Create(), and Create(FormCollection form). The Index() action displays all of the existing movies in the database within the Index view. The Create() method displays the form for creating a new movie. Finally, the Create(FormCollection form) method is responsible for validating the new movie and adding the movie to the database.

Listing 2 – Controllers\HomeController.cs

using System.Web.Mvc;
using Microsoft.Web.Mvc;
using Tip43.Models;
using System.ComponentModel.DataAnnotations;
using Tip43.MvcValidation;

namespace Tip43.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {

        private MovieRepository _repository;

        public HomeController()
        {
            _repository = new MovieRepository();
        }

        public ActionResult Index()
        {
            var movies = _repository.SelectAll();
            return View("Index", movies);
        }

        [AcceptVerbs("GET")]
        public ActionResult Create()
        {
            return View("Create");
        }

        [AcceptVerbs("POST")]
        public ActionResult Create(FormCollection form)
        {
            var movieToCreate = new Movie();

            try
            {
                UpdateModel(movieToCreate, new[] { "Title", "Director", "BoxOfficeTotals" });
                _repository.Add(movieToCreate);
            }
            catch (ValidationIssueException vex)
            {
                ViewData.ModelState.CopyValidationIssues(vex);
                return View("Create", movieToCreate);
            }
            catch
            {
                return View("Create", movieToCreate);
            }

            return RedirectToAction("Index");
        }
    }
}

Let’s examine the second Create() action in more detail. This action first creates a new instance of the Movie class. Next, the form fields submitted to the Create() action are applied to the new Movie class with the help of the UpdateModel() method (The UpdateModel() method is a standard method of the MVC controller class).

The controller uses a repository class to interact with the Movie database table. The Add() method is called on the repository class to add the new movie to the database. If the repository class raises a validation error when the Add() method is called then the Catch clause for the ValidationIssueException is executed. This Catch clause copies all of the validation issues from the ValidationIssueException to ModelState and the form for creating a new movie is displayed once again so the validation issues can be fixed.

The MovieRepository class is contained in Listing 3.

Listing 3 – Models\MovieRepository.cs

using System.Collections.Generic;
using System.Linq;
using LinqToSqlExtensions;
using MvcFakes;
using Tip43.MvcValidation;

namespace Tip43.Models
{
    public class MovieRepository
    {
        private IDataContext _dataContext;

        public MovieRepository()
        {
            _dataContext = new DataContextWrapper("conMovieDB", "~/Models/MovieDB.xml");
        }

        public List<Movie> SelectAll()
        {
            return _dataContext.Select<Movie>().ToList();
        }


        public Movie Add(Movie movieToAdd)
        {
            Validation.ValidateAttributes(movieToAdd);
            _dataContext.Insert(movieToAdd);
            return movieToAdd;
        }

    }
}

The MovieRepository class exposes two methods: SelectAll() and Add(). The SelectAll() method is called by the Index() action to display all of the existing movies in the database. The Add() method validates the movie being added and inserts the new movie into the database with the help of the LINQ to SQL DataContext class.

The new movie is validated by calling the Validation.ValidateAttributes() method. This method executes each of the validators on the Movie class. For example, the method executes the Required validators on the Movie class Title, Director, and BoxOfficeTotals properties. If any of these properties do not have a value, then the Validate() method throws a ValidationIssueException.

You don’t need to do anything special in an MVC view when taking advantage of the Data Annotation validators. The view in Listing 4 uses the Html.ValidationSummary() helper to display the validation error messages. The Html.TextBox() helper adds a CSS class named input-validation-error to an input field automatically when the input field is associated with a property that has a validation error. The view in Listing 4 highlights input fields associated with a validation error with a red border (see Figure 2).

Listing 4 – Views\Home\Create.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Create.aspx.cs" Inherits="Tip43.Views.Home.Create" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Create Movie</title>
    <style type="text/css">
    
    .input-validation-error
    {
        border: solid 2px red;
        background-color:yellow;
    }
    
    </style>
</head>
<body>
    <div>
    
    <h1>Add Movie</h1>
    
    <form method="post" action="/Home/Create">
    
    <%= Html.ValidationSummary() %>
    
    
    <label for="Title">Movie Title:</label>
    <br />
    <%= Html.TextBox("Title") %>
    
    <br /><br />
    <label for="Director">Movie Director:</label>
    <br />
    <%= Html.TextBox("Director") %>
    
    <br /><br />
    <label for="BoxOfficeTotals">Box Office Totals:</label>
    <br />
    <%= Html.TextBox("BoxOfficeTotals") %>
    
    <br /><br />
    <input type="submit" value="Add Movie" />
    
    </form>
    
    
    </div>
</body>
</html>

Figure 2 – CSS applied to form fields with validation errors

Summary

The Data Annotations validation attributes provide you with a very easy method of performing model-driven validation in an MVC application. For complex validation scenarios, I would recommend taking advantage of the Microsoft Enterprise Validation Application Block. For simple validation scenarios, such as a Movie database application, the Data Annotation validation attributes provide an easier alternative.

One other advantage of the Data Annotation validators is that using these validators makes it easier to transition a standard MVC application to a Dynamic Data MVC application. It is worth remembering that the very same set of validators is used in ASP.NET Dynamic Data applications.

Download the Code

ASP.NET MVC Tip #42 – Use the Validation Application Block

swalther — Wed, 10 Sep 2008 02:50:40 GMT

In this tip, I demonstrate how you can use the Microsoft Enterprise Validation Application Block within an MVC application to perform both basic and advanced form validation. The Validation Application Block supports a rich set of validators that you can begin using in an ASP.NET MVC application.

In this tip, I show how you can use the Microsoft Validation Application Block to perform form validation within an ASP.NET MVC application. Using the Validation Application Block was surprisingly easy. You can download and start using the Validation Application Block in minutes.

The Validation Application Block uses a model-driven approach to validation. You specify validation rules for your model entities. For example, if you have a Product class then you create validation rules that require the Product.Name property to contain at least 3 characters and the Product.Price property to have a value less than $10.00.

When a validation rule is broken, you can bubble up a validation error message to an ASP.NET MVC view. That way, the user has a chance to fix the error and submit the form again. For example, the view in Figure 1 illustrates an MVC view that displays validation errors bubbled up from the Validation Application Block.

Figure 1 – Validation errors

Using the Validation Application Block in an ASP.NET MVC Application

In order to use the Validation Application Block, you need to download the Microsoft Enterprise Library 4.0 from the Microsoft website:

http://www.microsoft.com/downloads/details.aspx?FamilyId=90DE37E0-7B42-4044-99BE-F8ECFBBC5B65&displaylang=en&hash=NdKYzXa4U%2beZdzZa%2buGPu%2flKE%2fPfL0GjN6Z1dqDOZX6rPWcMMhAC0c9v5ayzqms35yOrCB%2fAbXBCXbL1z%2f4bhA%3d%3d

After you install the Enterprise Library, the Enterprise Library assemblies can be found in the following folder on your computer:

C:\Program Files\Microsoft Enterprise Library 4.0 - May 2008\Bin\

In order to use the Validation Application Block in an MVC application, you need to add a reference to the Microsoft.Practices.EnterpriseLibrary.Validation.dll assembly. Within Visual Studio, select the menu option Project, Add Reference, select the Browse tab, and browse to the folder that contains the Enterprise Library assemblies (see Figure 2). Click the OK button to add a reference to the assembly.

Figure 2 – Adding a reference to the Validation Application Block

Specifying Validation Rules

The Validation Application Block supports two methods of specifying validation rules. You can use an attribute approach or you can use a configuration approach.

When you use an attribute approach, you decorate properties of a class with validator attributes. The Validation Application Block supports a rich set of validators (too many to list here). Here is a list of some of the more useful ones:

· NotNullValidator – Validates that a property does not have the value Null.

· RangeValidator – Validates that the value of a property falls between a specified minimum and maximum range.

· RegexValidator – Validates that a property value matches a regular expression.

· StringLengthValidator – Validates that the value of a string property has a specified minimum and maximum number of characters.

Of course, you also can create custom validators. The Validation Application Quickstart project included with the Enterprise Library download includes sample custom validators such as a USStateValidator.

The class in Listing 1 illustrates how you can use these validators to specify validation rules on a class.

Listing 1 – Models\Movie.cs

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using Microsoft.Practices.EnterpriseLibrary.Validation.Validators;
using MvcValidation;

namespace Tip33.Models
{
    public class Movie : IValidated
    {
        public int Id { get; set; }
        
        [StringLengthValidator(3, 50, MessageTemplate="You must supply a title between 3 and 50 characters.")]
        public string Title { get; set; }

        [StringLengthValidator(3, 50, MessageTemplate="You must supply a director between 2 and 50 characters.")]
        public string Director { get; set; }

        public decimal BoxOfficeTotals { get; set; }
    }
}

In Listing 1, the StringLengthValidator is applied to both the Title and Director property. This validator is used to ensure that these properties get a value assigned to them.

The Validation Application Block supports an alternative method of specifying validation rules. Instead of using attributes, you can specify the validation rules in an XML configuration file. I won’t explore this option in this tip, but this is an attractive option when you want to keep your entity classes pure.

Performing Validation with the Validation Application Block

After you specify your validation rules, you can check whether or not a particular class violates the rules by calling the Validation.Validate() method. For example, you can validate an instance of the Movie class named newMovie by calling the Validate() method like this:

var results = Validation.Validate(newMovie);

The Validate() method returns a ValidationResult object. The ValidationResult object supports a property named IsValid that indicates whether or not the class being validated failed validation.

The ValidationResult class is a collection. You can determine exactly which validation rules a class violated by iterating through the collection of broken validation rules represented by the ValidationResult class.

Using the Validation Application Block in an ASP.NET MVC Application

Let’s walk through a complete sample MVC application that uses the Validation Application Block. We’ll use the Validation Application Block with a simple movie database application to validate new movies before the movies are submitted to the database.

The controller for the Movie database application is contained in Listing 2.

Listing 2 – Controllers\HomeController.cs

using System.Web.Mvc;
using Microsoft.Web.Mvc;
using MvcValidation;
using Tip33.Models;
using Tip42.Models;

namespace Tip42.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {

        private MovieRepository _repository;

        public HomeController()
        {
            _repository = new MovieRepository();
        }

        public ActionResult Index()
        {
            var movies = _repository.SelectAll();
            return View("Index", movies);
        }

        [AcceptVerbs("GET")]
        public ActionResult Create()
        {
            return View("Create");
        }

        [AcceptVerbs("POST")]
        public ActionResult Create(FormCollection form)
        {
            var movieToCreate = new Movie();

            try
            {
                UpdateModel(movieToCreate, new[] { "Title", "Director", "BoxOfficeTotals" });
                _repository.Add(movieToCreate);
            }
            catch (ValidationException vex)
            {
                ViewData.ModelState.CopyValidationExceptions(vex);
                return View("Create", movieToCreate);
            }
            catch
            {
                return View("Create", movieToCreate);
            }

            return RedirectToAction("Index");
        }
    }
}

The Home controller exposes three actions: Index(), Create(), and Create(FormCollection form). The Index() action displays a list of existing movies from the database. The first Create() method displays a form for inserting a new movie. The second Create() method actually performs the validation and adds the movie to the database.

Notice that the Home controller class uses a MovieRepository to perform all of its database access operations. The MovieRepository class is contained in Listing 3.

Listing 3 – Models\MovieRepository.cs

using LinqToSqlExtensions;
using System.Linq;
using MvcFakes;
using MvcValidation;
using Tip33.Models;
using System.Collections.Generic;

namespace Tip42.Models
{
    public class MovieRepository
    {
        private IDataContext _dataContext;

        public MovieRepository()
        {
            _dataContext = new DataContextWrapper("conMovieDB", "~/Models/MovieDB.xml");
        }

        public List<Movie> SelectAll()
        {
            return _dataContext.Select<Movie>().ToList();
        }


        public Movie Add(Movie movieToAdd)
        {
            movieToAdd.Validate<Movie>();
            _dataContext.Insert(movieToAdd);
            return movieToAdd;
        }

    }
}

The MovieRepository.Add() method adds a new Movie to the database. Notice that before the Movie is inserted into the database, the Validate() method is called on the Movie object. If the Movie object violates any of the validation rules then calling the Validate() method throws a ValidationException.

Where does the Validate() method on the Movie class come from? I created a Validate() extension method. This extension method is added to any class that implements the IValidated interface (like the Movie class). The code for the Validate() extension method is contained in Listing 4.

Listing 4 – MvcValidation\ValidationExtensions.cs

using Microsoft.Practices.EnterpriseLibrary.Validation;

namespace MvcValidation
{
    public static class ValidationExtensions
    {
        public static void Validate<TEntity>(this IValidated entity)
        {
            var results = Validation.Validate<TEntity>((TEntity)entity);
            if (!results.IsValid)
                throw new ValidationException(results);
        }


    }
}

The extension method in Listing 4 simply calls the Validation Application Block Validation.Validate() method to retrieve a ValidationResult. If there are validation violations, a ValidationException that represents the validation violations is thrown.

I created one more extension method that I use in the Home controller: the CopyValidationExceptions() extension method. This extension method copies validation errors from a ValidationException to a ModelState object. The code for the CopyValidationExceptions() method is contained in Listing 4.

Listing 4 – MvcValidation\ModelStateDictionaryExtensions.cs

using System.Web.Mvc;

namespace MvcValidation
{
    public static class ModelStateDictionaryExtensions
    {
        public static void CopyValidationExceptions(this ModelStateDictionary modelState, ValidationException validationException)
        {
            foreach (var vex in validationException.ValidationResults)
            {
                modelState.AddModelError(vex.Key, null, vex.Message);
            }
        }

    }
}

The CopyValidationExceptions() extension method is used within the Create() action in the Home controller like this:

[AcceptVerbs("POST")]
public ActionResult Create(FormCollection form)
{
    var movieToCreate = new Movie();

    try
    {
        UpdateModel(movieToCreate, new[] { "Title", "Director", "BoxOfficeTotals" });
        _repository.Add(movieToCreate);
    }
    catch (ValidationException vex)
    {
        ViewData.ModelState.CopyValidationExceptions(vex);
        return View("Create", movieToCreate);
    }
    catch
    {
        return View("Create", movieToCreate);
    }

    return RedirectToAction("Index");
}

If there is a ValdationException, the validation violations are copied to ModelState so that the validation errors can be rendered in the MVC view.

I didn’t have to do anything special to display the validation errors in an MVC view. The Create view is contained in Listing 5.

Listing 5 --- Views\Home\Create.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Create.aspx.cs" Inherits="Tip42.Views.Home.Create" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Create Movie</title>
    <style type="text/css">
    
    .input-validation-error
    {
        border: solid 2px red;
        background-color:yellow;
    }
    
    </style>
</head>
<body>
    <div>
    
    <h1>Add Movie</h1>
    
    <form method="post" action="/Home/Create">
    
    <%= Html.ValidationSummary() %>
    
    
    <label for="Title">Movie Title:</label>
    <br />
    <%= Html.TextBox("Title") %>
    
    <br /><br />
    <label for="Director">Movie Director:</label>
    <br />
    <%= Html.TextBox("Director") %>
    
    <br /><br />
    <label for="BoxOfficeTotals">Box Office Totals:</label>
    <br />
    <%= Html.TextBox("BoxOfficeTotals") %>
    
    <br /><br />
    <input type="submit" value="Add Movie" />
    
    </form>
    
    
    </div>
</body>
</html>

Notice that the Create view takes advantage of the Html.ValidationSummary() HTML helper method to display the errors. Furthermore, when there is a validation error associated with a particular TextBox, the Html.TextBox helper renders an input-validation-error CSS class automatically. The style sheet defined at the top of the view causes input fields associated with a validation error to appear with a thick red border and a yellow background (see Figure 3).

Figure 3 – Validation errors

Summary

To be honest, I assumed that getting the Validation Application Block to work with an ASP.NET MVC application would take a lot of effort. Instead, I was able to fully integrate the Validation Block with my Movie database application within a couple of hours. The Validation Application Block is an excellent option for providing validation for an ASP.NET MVC application.

Download the Code

ASP.NET MVC Application Building: Forums #4 1/2– Validation Revisited

swalther — Tue, 09 Sep 2008 08:17:34 GMT

I received a lot of feedback on my last blog entry on implementing server-side form validation for the MVC Forums application. Thank you everyone for the feedback!

In my previous blog entry, I described how you can perform validation in an MVC application by taking advantage of custom validation attributes. By decorating your model with attributes, such as the RequiredValidator and RegularExpressionValidator attributes, you can enforce validation rules and display custom validation error messages.

In order to perform more complex validation, I suggested using a CustomValidator that could be applied to the entity class. The CustomValidator class points to another class that executes custom validation rules.

One piece of feedback that I consistently received was that this approach for performing custom validation was too complex for most scenarios. Most people liked the attribute approach to validation, but also wanted an easy way to do custom validation.

Therefore, in this blog entry, I take a slightly different approach to handling the problem of form validation. In this blog entry, I combine the approach described by Scott Guthrie with an attribute approach. In other words, I mix an imperative and declarative approach to validation. I call this approach a hybrid approach to form validation.

In this blog entry, I describe the hybrid approach. Before we get into the details, I should mention that I just came across an excellent blog entry by Steve Sanderson that describes almost exactly the same approach to validation described in this blog entry (however -- his blog entry has much nicer diagrams than mine). You can view his post here:

http://blog.codeville.net/2008/09/08/thoughts-on-validation-in-aspnet-mvc-applications/

An Imperative Approach to Form Validation

Let’s start with the approach described by Scott Guthrie. When following this approach to form validation, you must create the following classes:

· IRuleEntity – an interface that each entity must implement in order to be validated.

· RuleViolation – a class that represents a validation error.

· RuleViolationException – an exception that is raised when an entity fails validation.

· Validation – a class that includes a method for copying rule violations to ModelState.

The IRuleEntity interface is really simple. It consists of two methods named Validate() and GetRuleViolations(). This interface is contained in Listing 1.

Listing 1 – IRuleEntity.cs

using System.Collections.Generic;

namespace MvcValidation
{
    public interface IRuleEntity
    {
        List<RuleViolation> GetRuleViolations();
        void Validate();
    }
}

The RuleViolation class represents a particular validation error. A collection of RuleViolations is used to represent all of the validation errors that result when submitting a form. The RuleViolation class is contained in Listing 2.

Listing 2 – RuleViolation.cs

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

namespace MvcValidation
{
    public class RuleViolation
    {
        public string PropertyName { get; private set; }

        public object PropertyValue { get; private set; }

        public string ErrorMessage { get; private set; }

        public RuleViolation(string propertyName, object propertyValue, string errorMessage)
        {
            this.PropertyName = propertyName;
            this.PropertyValue = propertyValue;
            this.ErrorMessage = errorMessage;
        }

    }
}

When there is at least 1 rule violation, a RuleViolationException is raised. This special exception class is contained in Listing 3.

Listing 3 – RuleViolationException.cs

using System;
using System.Collections.Generic;

namespace MvcValidation
{
    public class RuleViolationException : Exception
    {
        public RuleViolationException(string message, List<RuleViolation> validationIssues)
            : base(message)
        {
            this.ValidationIssues = validationIssues;
        }

        public List<RuleViolation> ValidationIssues { get; private set; }
    }
}

Finally, the Validation class is a utility class that exposes one method named UpdateModelStateWithViolations(). This method copies all of the rule violations to a controller class’s ModelState. The Validation class is contained in Listing 4.

Listing 4 – Validation.cs

using System.Web.Mvc;

namespace MvcValidation
{
    public class Validation
    {
        public static void UpdateModelStateWithViolations(RuleViolationException ruleViolationException, ModelStateDictionary modelState)
        {
            foreach (var issue in ruleViolationException.ValidationIssues)
            {
                var value = issue.PropertyValue ?? string.Empty;
                modelState.AddModelError(issue.PropertyName, value.ToString(), issue.ErrorMessage);
            }
        }


    }
}

Let’s take a look at how all of these classes work together. The Message class in Listing 5 represents a Forum message. Notice that this class implements the IRuleEntity interface by implementing both the Validate() and the GetRuleViolations() methods.

Listing 5 – Message.cs

using System;
using MvcValidation;
using System.Collections.Generic;
using System.Data.Linq;
using MvcValidation.Attributes;
using System.Web.Mvc;

namespace MvcForums.Models.Entities
{
    public class Message :IRuleEntity
    {
        private DateTime _entryDate = DateTime.Now;

        public Message()
        { }

        public Message(int id, int? parentThreadId, int? parentMessageId, string author, string subject, string body)
        {
            this.Id = id;
            this.ParentThreadId = parentThreadId;
            this.ParentMessageId = parentMessageId;
            this.Author = author;
            this.Subject = subject;
            this.Body = body;
        }

        public int Id { get; set; }
        public int? ParentThreadId { get; set; }
        public int? ParentMessageId { get; set; }
        public string Author { get; set; }
        public string Subject { get; set; }
        public string Body { get; set; }

        
        public DateTime EntryDate 
        {
            get { return _entryDate; }
            set { _entryDate = value; }  
        }

        #region IRuleEntity Members

        public List<RuleViolation> GetRuleViolations()
        {
            var validationIssues = new List<RuleViolation>();

            // Validate Subject
            if (String.IsNullOrEmpty(this.Subject))
                validationIssues.Add(new RuleViolation("subject", this.Subject, "You must enter a message subject."));

            // Validate Body
            if (String.IsNullOrEmpty(this.Body))
                validationIssues.Add(new RuleViolation("body", this.Body, "You must enter a message body.")); 

            return validationIssues;
        }

        public void Validate()
        {
            var validationIssues = GetRuleViolations();
            if (validationIssues.Count > 0)
                throw new RuleViolationException("Validation Issues", validationIssues);
        }

        #endregion

    }
}

The Validate() method calls the GetRuleViolations() method. If there are any validation rule violations then the Validate() method throws a RuleViolationException.

In the Forums application, the Validate() method is called within the ForumRepository. Before a new Message is added to the database, the Validate() method is called on the Message class like this:

public Message AddMessage(Message messageToAdd)

{

  messageToAdd.Validate();

  _dataContext.Insert(messageToAdd);

  return messageToAdd;

}

If there is a validation error then a RuleViolationException is thrown and the message never gets inserted into the database.

The ForumRepository is used within the Forum controller. When you submit a form for creating a new forum message, the ForumController.Create(FormCollection collecction) method is called. The Forum controller is contained in Listing 6.

Listing 6 – ForumController.cs

using System;
using System.Web.Mvc;
using MvcForums.Models;
using Microsoft.Web.Mvc;
using MvcForums.Models.Entities;
using MvcValidation;

namespace MvcForums.Controllers
{
    public class ForumController : Controller
    {
        private IForumRepository _repository;

        public ForumController()
            : this(new ForumRepository())
        { }

        public ForumController(IForumRepository repository)
        {
            _repository = repository;
        }

        public ActionResult Index()
        {
            ViewData.Model = _repository.SelectThreads();
            return View("Index");
        }

        [AcceptVerbs("GET")]
        public ActionResult Create()
        {
            return View("Create");
        }

        [AcceptVerbs("Post")]
        public ActionResult Create(FormCollection form)
        {
            var messageToCreate = new Message();

            try
            {
                UpdateModel(messageToCreate, new[] { "Author", "ParentThreadId", "ParentMessageId", "Subject", "Body" });
                _repository.AddMessage(messageToCreate);
            }
            catch (RuleViolationException rex)
            {
                Validation.UpdateModelStateWithViolations(rex, ViewData.ModelState);
                return View("Create", messageToCreate);
            }
            catch (Exception ex)
            {
                ViewData.ModelState.AddModelError("message", null, "Could not save message.");
                return View("Create", messageToCreate);
            }

            // Redirect
            return RedirectToAction("Index");
        }

        public ActionResult Thread(int threadId)
        {
            ViewData.Model = _repository.SelectMessages(threadId);
            return View("Thread");
        }

    }
}

Notice that there are two Create() methods. The first Create() method is invoked only for an HTTP GET operation. This action returns the form for creating a new Message (see Figure 1).

Figure 1 – Form for adding a Forums message

The second Create() method is invoked when an XHTML form is posted to the server. When the form data is posted, the Create() method calls the Controller.UpdateModel() method to generate a Product class that has all of the values submitted in the form. Next, the ForumRepository.Add() method is called to add the new instance of the Product class to the database.

Both statements are wrapped in a Try..Catch block. If either the Controller.UpdateModel() or the ForumRepository.Add() methods fail then the Catch clause of the Try…Catch statement is executed. The first Catch clause updates the ViewData.ModelState property with information about the validation errors by copying the validation errors from the RuleViolationException to ModelState. Next, the Create view is redisplayed.

Notice that there are two Catch clauses. The second Catch clause captures a generic Exception. This Catch clause is invoked when the UpdateModel() method encounters a validation issue (the wrong type of value is being assigned to a property). This clause will be invoked when there are network problems communicating with your database server or your database server crashes. Notice that a error key named message is updated.

The Create view is contained in Listing 7.

Listing 7 -- Create.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Create.aspx.cs" Inherits="MvcForums.Views.Forum.Create" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
    <style type="text/css">
    
    .input-validation-error
    {
        border: solid 2px red;
    }
    
    #message
    {
        padding: 5px;
        color:red;   
    }
    
    </style>
</head>
<body>
    <div>
    
    <form method="post" action="/Forum/Create">
    
    <div id="message">
    <%= Html.ValidationMessage("message") %>
    </div>
    
    <input name="author" type="hidden" value="Stephen" />
    
    <label for="subject">Subject:</label>
    <%= Html.TextBox("subject") %>
    <%= Html.ValidationMessage("subject") %>
    
    <br /><br />
    <label for="body">Body:</label>
    <%= Html.TextArea("body") %>
    <%= Html.ValidationMessage("body") %>

    <br /><br />
    <input type="submit" value="Post" />
    
    </form>
    
    </div>
</body>
</html>

Notice that the view includes a generic error message (named message).

Figure 2 -- Generic error message

This approach to performing validation is an imperative approach. The validation rules are expressed by imperative code in the GetRuleViolations() method like this:

public List<RuleViolation> GetRuleViolations()
{
    var validationIssues = new List<RuleViolation>();

    // Validate Subject
    if (String.IsNullOrEmpty(this.Subject))
        validationIssues.Add(new RuleViolation("subject", this.Subject, "You must enter a message subject."));

    // Validate Body
    if (String.IsNullOrEmpty(this.Body))
        validationIssues.Add(new RuleViolation("body", this.Body, "You must enter a message body.")); 

    return validationIssues;
}

Using an imperative approach you can perform any type of validation that you need. For example, you can perform a database lookup to make sure that the Message subject and body are unique in the database before inserting the Message into the database.

A Declarative Approach to Form Validation

I am a lazy person. I like a declarative approach to performing form validation. A declarative approach enables you to validate form data without writing any code.

Another advantage of a declarative approach is that a declarative approach enables you to easily implement client-side validation. We want to generate client-side validators from our server-side validators. That way, we can validate a form without posting the form back to the server.

The modified Message class in Listing 8 uses a declarative approach to validation.

Listing 8 – Message.cs (with attributes)

using System;
using MvcValidation;
using System.Collections.Generic;
using System.Data.Linq;
using MvcValidation.Attributes;
using System.Web.Mvc;

namespace MvcForums.Models.Entities
{
    public class Message :IRuleEntity
    {
        private DateTime _entryDate = DateTime.Now;

        public Message()
        { }

        public Message(int id, int? parentThreadId, int? parentMessageId, string author, string subject, string body)
        {
            this.Id = id;
            this.ParentThreadId = parentThreadId;
            this.ParentMessageId = parentMessageId;
            this.Author = author;
            this.Subject = subject;
            this.Body = body;
        }

        public int Id { get; set; }
        public int? ParentThreadId { get; set; }
        public int? ParentMessageId { get; set; }
        public string Author { get; set; }

        [RequiredValidator("You must enter a message subject.")]
        public string Subject { get; set; }

        [RequiredValidator("You must enter a message body.")]        
        public string Body { get; set; }

        
        public DateTime EntryDate 
        {
            get { return _entryDate; }
            set { _entryDate = value; }  
        }

        #region IRuleEntity Members

        public List<RuleViolation> GetRuleViolations()
        {
            var validationIssues = new List<RuleViolation>();

        // Validate attributes
            AttributeValidation.Validate(this, validationIssues);

            return validationIssues;
        }

        public void Validate()
        {
            var validationIssues = GetRuleViolations();
            if (validationIssues.Count > 0)
                throw new RuleViolationException("Validation Issues", validationIssues);
        }

        #endregion

    }
}

Notice that both the Subject and Body properties in the modified Message class are decorated with the RequiredValidator attribute. The RequiredValidator attribute marks both of these properties as required.

Notice, furthermore, that the imperative code has been removed from the GetRuleViolations() method. Instead, the AttributeValidation.Validate() method is called. This method calls the Validate() method on each validator attribute applied to the Message class. If at least one validator fails then the Message class fails validation and a RuleViolationException is thrown.

Clearly, you can mix both an attribute and non-attribute approach to validation. For common validation tasks, you can use standard validators such as the RequiredValidator , LengthValidator, or RegularExpressionValidator. For more complicated types of validation, you can write imperative code to perform the validation.

Summary

In this blog entry, I’ve described an approach to validation that combines imperative and declarative validation. I believe that the easiest approach for common validation tasks is a declarative approach. For more complex or specialized validation tasks, write imperative validation code. In the case of the Forums application, my plan is to take a hybrid approach to validation.

ASP.NET MVC Application Building: Forums #4 – Server-Side Form Validation

swalther — Mon, 08 Sep 2008 10:22:24 GMT

In this series of blog entries, I build an entire ASP.NET MVC forums application from start to finish. In this blog entry, I add server-side form validation to the forums application.

This post has been updated. Please read the updated post here:

Forums #4 1/2 - Validation Revisited

Before reading this blog entry, you should read the previous three blog entries in this series:

ASP.NET MVC Application Building: Forums #1 – Create the Perfect Application – In this first entry, I explain the overall goals of the ASP.NET MVC Forums application. I emphasize the importance of Software Design Principles and justify my choice to use test-driven development.

ASP.NET MVC Application Building: Forums #2 – Create the First Unit Test – In the second entry, I build the first unit test and create the Index() action which returns a collection of messages.

ASP.NET MVC Application Building: Forums #3 – Post Messages – In the third entry, I add the unit tests and functionality required to post new messages and replies.

Creating a Form Validation Framework

The ASP.NET MVC framework does not include built-in support for performing form validation. If you want to validate form data before submitting the data to a database then you must write the validation logic yourself. In this section, I describe how you can create a custom form validation framework.

The validation framework that I describe in this section was developed by Brian Henderson and me way back during the Preview 1 state of the ASP.NET MVC framework. I’ve updated the original framework that Brian and I developed so that it integrates more smoothly with the new ViewData.ModelState property introduced with the ASP.NET MVC framework Preview 5.

The validation framework takes advantage of attributes. You decorate the properties that you want to validate with validator attributes. The validation framework includes the following attributes:

· RequiredValidator – Use this attribute to display a validation error message when a property does not have a value.

· TypeValidator – Use this attribute to display a validation error message when a property is not the right type.

· RegularExpressionValidator – Use this attribute to display a validation error message when a property does not match a regular expression.

· LengthValidator – Use this attribute to display a validation error message when the value of an attribute is too long.

· EmailValidator – Use this attribute to display a validation error message when a property does not represent a valid email address.

· USCurrencyValidator – Use this attribute to display a validation error message when a property does not represent a valid U.S. currency amount.

Let’s look at an example of how you can use these attributes. Imagine that you are creating a product catalog application and you want to validate the form that enables you to enter product information (see Figure 1).

Figure 1 – Creating a new product

The view for creating a new product is contained in Listing 1.

Listing 1 – Views\Home\Create.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Create.aspx.cs" Inherits="MvcValidationWebsite.Views.Home.Create" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Create New Product</title>
    
    <style type="text/css">
    
    .input-validation-error
    {
        border: solid 2px red;
    }
    
    </style>
</head>
<body>
    <div>
    
    <form method="post" action="/Home/Create">
    
    <label for="name">Product Name:</label>
    <br />
    <%= Html.TextBox("name") %>
    <%= Html.ValidationMessage("name") %>
    
    <br /><br />
    <label for="price">Product Price:</label>
    <br />
    <%= Html.TextBox("price") %>
    <%= Html.ValidationMessage("price") %>

    <br /><br />
    <label for="description">Product Description:</label>
    <br />
    <%= Html.TextArea("description") %>
    <%= Html.ValidationMessage("description") %>

    <br /><br />
    <label for="saleStartDate">Sale Start Date:</label>
    <br />
    <%= Html.TextBox("saleStartDate") %>
    <%= Html.ValidationMessage("saleStartDate") %>

    <br /><br />
    <label for="saleEndDate">Sale End Date:</label>
    <br />
    <%= Html.TextBox("saleEndDate") %>
    <%= Html.ValidationMessage("saleEndDate") %>

    <br /><br />
    <input type="submit" value="Add Product" />
    
    </form>
    
    </div>
</body>
</html>

There are two special things that you should notice about the view in Listing 1. First, notice that there is a Html.ValidationMessage() helper associated with each input field. This helper is included in the ASP.NET MVC framework. It displays a validation error message.

Second, notice that the view includes a cascading style sheet that defines a class named input-validation-error. When the Html.TextBox() helper renders a input field that has an invalid value, this CSS class is added to the input field automatically. In the view in Listing 1, Input fields associated with validation errors get a red border.

The view for creating a new product is returned from the Home controller. The Home controller is contained in Listing 2.

Listing 2 – Controllers\HomeController.cs

using System;
using System.Globalization;
using System.Linq;
using System.Web.Mvc;
using LinqToSqlExtensions;
using Microsoft.Web.Mvc;
using MvcFakes;
using MvcValidation;
using MvcValidationWebsite.Models;

namespace MvcValidationWebsite.Controllers
{
    [HandleError]
    public class HomeController : Controller
    {
        private IDataContext _dataContext;
        private ITable<Product> _products;

        public HomeController()
        {
            _dataContext = new DataContextWrapper("conProductsDB", "~/Models/ProductsDB.xml");
            _products = _dataContext.GetTable<Product>();
        }

        public ActionResult Index()
        {
            return View("Index", _products.ToList());
        }


        [AcceptVerbs("GET")]
        public ActionResult Create()
        {
            return View("Create");
        }
        
        [AcceptVerbs("POST")]
        public ActionResult Create(FormCollection form)
        {
            // Perform validation
            Validation.Validate<Product>(ViewData.ModelState, form);
            if (!ViewData.ModelState.IsValid)
                return View("Create", form);

            // Create product
            var product = new Product();
            product.Name = form["name"];
            product.Price = Decimal.Parse(form["price"], NumberStyles.Currency);
            product.Description = form["description"];
            if (!String.IsNullOrEmpty(form["saleStartDate"]))
                product.SaleStartDate = DateTime.Parse(form["saleStartDate"]);
            if (!String.IsNullOrEmpty(form["saleEndDate"]))          
                product.SaleEndDate = DateTime.Parse(form["saleEndDate"]);

            // Insert product into database
            _dataContext.Insert(product);

            // Redirect
            return RedirectToAction("Index");
        }

    }
}

Notice that the Home controller has two Create() action. One Create() action is invoked when performing an HTTP GET operation. In other words, the first Create() action is called when the form for creating a new product is first displayed.

The second Create() action is invoked only when performing an HTTP POST operation. This Create() action is called when the product form is posted back to the server. This second Create() method validates the form data and, if there are no validation errors, adds the new product to the database.

Validation is performed with the following three lines of code:

Validation.Validate<Product>(ViewData.ModelState, form);
if (!ViewData.ModelState.IsValid)
   return View("Create", form);

The Validation.Validate() method validates the form parameters passed to the controller action against the Product class. When validation errors are encountered, the errors are added to ModelState. If there are any validation errors, the ModelState.IsValid property returns the value False and the Create view is displayed again. When the Create view is redisplayed, all of the values that the user entered are redisplayed (Notice that the form variable is passed as ViewData to the Create view).

You specify how form fields get validated in the model (validation is model driven). The Product class is contained in Listing 3.

Listing 3 – Models\Product.cs

using System;
using MvcValidation;
using System.Web.Mvc;
using Microsoft.Web.Mvc;
using MvcValidationWebsite.Validators;

namespace MvcValidationWebsite.Models
{
    [CustomValidator(typeof(ProductValidator))]
    public class Product
    {
        public int Id { get; set; }

        [RequiredValidator("Product name is required.")]
        public string Name { get; set; }

        [RequiredValidator("Product price is required.")]
        [USCurrencyValidator("Product price is not a valid currency amount.")]
        public decimal Price { get; set; }

        [RequiredValidator("Product description is required")]
        [LengthValidator(50, "Description too long.")]
        public string Description { get; set; }

        [TypeValidator(typeof(DateTime), "Sale start date must be a valid date.")]
        public DateTime? SaleStartDate { get; set; }

        [TypeValidator(typeof(DateTime), "Sale end date must be a valid date.")]
        public DateTime? SaleEndDate { get; set; }
    }
}

Notice that the validator attributes are applied to the Product properties. For example, the Name property is marked as required with the RequiredValidator attribute. The error message specified by the validator bubbles up to be displayed in the view.

There is one validator attribute that requires additional explanation. The CustomValidator is applied to the class instead of to a class property. The CustomValidator enables you to perform more complicated types of validation logic that might involve several properties.

For example, the Product class has both a StartSaleDate and EndSaleDate property that represent the time period when the product is on sale. The EndSaleDate should always be after the StartSaleDate. The CustomValidator in Listing 3 is used to enforce this validation rule.

Notice that when you add a CustomValidator to a class, you specify a type of object. In Listing 3, the CustomValidator points to a ProductValidator class. This class contains the logic for performing the custom validation. The ProductValidator class is contained in Listing 4.

Listing 4 – Validators\ProductValidator.cs

using System;
using System.Web.Mvc;
using Microsoft.Web.Mvc;
using MvcValidation;

namespace MvcValidationWebsite.Validators
{
    public class ProductValidator : ICustomValidator
    {
        #region ICustomValidator Members

        public void Validate(ModelStateDictionary modelState, FormCollection form)
        {
            // Don't bother with custom validation when attribute validation failed
            if (modelState.IsValid)
            {
                string strSaleStartDate = form["saleStartDate"];
                string strSaleEndDate = form["saleEndDate"];

                // Verify that either both or neither saleStartDate and saleEndDate have values
                if (!String.IsNullOrEmpty(strSaleStartDate) && String.IsNullOrEmpty(strSaleEndDate))
                    modelState.AddModelError("saleEndDate", strSaleEndDate, "sale end date must have a value when sale start date has a value.");
                if (String.IsNullOrEmpty(strSaleStartDate) && !String.IsNullOrEmpty(strSaleEndDate))
                    modelState.AddModelError("saleStartDate", strSaleStartDate, "sale start date must have a value when sale end date has a value.");

                // Verify that saleEndDate > saleStartDate
                if (!String.IsNullOrEmpty(strSaleStartDate) && !String.IsNullOrEmpty(strSaleEndDate))
                {
                    DateTime saleStartDate = DateTime.Parse(strSaleStartDate);
                    DateTime saleEndDate = DateTime.Parse(strSaleEndDate);
                    if (saleEndDate <= saleStartDate)
                    {
                        modelState.AddModelError("saleStartDate", strSaleStartDate, "sale start date must be before end date.");
                        modelState.AddModelError("saleEndDate", strSaleEndDate, "sale start date must be before end date.");
                    }
                }
            }

        }

        #endregion
    }
}

Notice that the ProductValidator implements the ICustomValidator interface. This interface has one required method that you must implement named Validate().

The ProductValidator class in Listing 4 first checks that when a date is supplied for either StartSaleDate or EndSaleDate, a date is supplied for both. It wouldn’t make much sense to specify a start date for a sale without specifying an end date.

Next, the ProductValidator confirms that the EndSaleDate is greater than the StartSaleDate. If there is an error, a new error message is added to ModelState to represent the error. Just as long as the view includes an HTML.ValidationMessage() call that includes the validation error key, the validation error message will be displayed.

You can take advantage of a custom validator to perform any complicated validation task. For example, if you need to perform a database lookup to ensure a unique value then you can perform the database lookup in the custom validator class.

Testing the Validation Framework

Because the validation framework is used in the Forums application, it needs unit tests just like any other part of the Forums application. At the end of this blog entry, you can download the Visual Studio solution that includes the validators. This solution also includes a test project for the validators. The test project includes 33 tests that verify how the validators work with different form field values (see Figure 2).

Figure 2 – Unit tests for the validators

For example, the test class in Listing 5 contains all of the unit tests for the LengthValidator. The LengthValidator is tested with an empty string, a string over the maximum length, a string equal to the maximum length, and a string less than the maximum length.

Listing 5 – LengthValidatorTests.cs

using System;
using System.Text;
using System.Collections.Generic;
using System.Linq;
using Microsoft.VisualStudio.TestTools.UnitTesting;
using MvcValidation;

namespace MvcValidationTests
{
    [TestClass]
    public class LengthValidatorTests
    {
        [TestMethod]
        public void LengthValidatorEmptyIsValid()
        {
            // Arrange
            var validator = new LengthValidatorAttribute(2);

            // Act
            var result = validator.Validate(String.Empty);

            // Assert
            Assert.IsTrue(result);
        }

        [TestMethod]
        public void LengthValidatorOverMaximum()
        {
            // Arrange
            var validator = new LengthValidatorAttribute(2);

            // Act
            var result = validator.Validate("abc");

            // Assert
            Assert.IsFalse(result);

        }

        [TestMethod]
        public void LengthValidatorEqualMaximum()
        {
            // Arrange
            var validator = new LengthValidatorAttribute(2);

            // Act
            var result = validator.Validate("ab");

            // Assert
            Assert.IsTrue(result);

        }

        [TestMethod]
        public void LengthValidatorUnderMaximum()
        {
            // Arrange
            var validator = new LengthValidatorAttribute(2);

            // Act
            var result = validator.Validate("a");

            // Assert
            Assert.IsTrue(result);

        }
    
    }
}

A Moment of Reflection

It might seem strange that we expended so much effort to avoid putting LINQ to SQL attributes on our Model classes and now we are placing validator attributes on the very same classes. Why is it okay to add validator attributes but not okay to add LINQ to SQL attributes?

There are two important considerations here. First, there is a likelihood that we will need to switch data access technologies in the future. For example, I might need to swap out LINQ to SQL for the Microsoft Entity Framework or even NHibernate. I don’t want to bake a particular data access technology into our Model classes when I might need to change the data access technology in the future.

It is unlikely, however, that I will want to change how I handle form validation. I don’t anticipate changing form validation frameworks in the future. Therefore, adding validator attributes to the Model classes is not locking us into anything that I expect to change.

There are two (closely related) software design principles that we must consider here: the Single Responsibility Principle and the Encapsulate What Varies Principle. Both principles warn us that when we expect software to change, we should do everything we can to isolate the software that might change from the rest of our code.

If we prefer, we can isolate the validator attributes from the rest of our code. We could divide the Product class into two classes: the Product class and the ProductValidationModel class. We don’t need to touch the Product class to add validation to the Product class. We could add all of the validators to a duplicate ProductValidationModel class. When we call the Validation.Validate() method, we can pass the ProductValidationModel class instead of the Product class to this method.

I’m not going to divide the Product class into two classes for the Forums application because this smells like Needless Complexity. I really don’t expect to change validation frameworks, so the extra effort is not worth it.

Adding Form Validation to the Forums Application

Now that we have a simple validation framework, we can modify the Forums application to take advantage of it. To begin with, we want to make sure that a user cannot post a new message to the forum without entering a message subject and a message body (see Figure 3).

Figure 3 – Validating a forum post

Therefore, we need to create unit tests that express this intention. The two new unit tests are contained in Listing 6. The first unit test verifies that validation fails when the subject is set to an empty value. The second unit test verifies that validation fails when the body does not have a value.

Listing 6 – Controllers\ForumControllerTest.cs

[TestMethod]
public void EmptySubjectFailsValidation()
{
    // Arrange
    var controller = new ForumController(_repository);

    // Act
    var form = new FormCollection();
    form.Add("author", "Stephen");
    form.Add("subject", String.Empty);
    form.Add("body", "Body of new thread");
    var result = (ViewResult)controller.Create(form);

    // Assert
    Assert.IsFalse(result.ViewData.ModelState.IsValid);  
}


[TestMethod]
public void EmptyBodyFailsValidation()
{
    // Arrange
    var controller = new ForumController(_repository);

    // Act
    var form = new FormCollection();
    form.Add("author", "Stephen");
    form.Add("subject", "New Message");
    form.Add("body", String.Empty);
    var result = (ViewResult)controller.Create(form);

    // Assert
    Assert.IsFalse(result.ViewData.ModelState.IsValid);
}

In order to pass these new unit tests, we need to modify our Forum controller. The new version of the Forum controller is contained in Listing 7.

Listing 7 – Controllers\ForumController.cs

using System;
using System.Web.Mvc;
using MvcForums.Models;
using Microsoft.Web.Mvc;
using MvcValidation;

namespace MvcForums.Controllers
{
    public class ForumController : Controller
    {
        private IForumRepository _repository;

        public ForumController()
            : this(new ForumRepository())
        { }

        public ForumController(IForumRepository repository)
        {
            _repository = repository;
        }

        public ActionResult Index()
        {
            ViewData.Model = _repository.SelectThreads();
            return View("Index");
        }

        [AcceptVerbs("GET")]
        public ActionResult Create()
        {
            return View("Create");
        }

        [AcceptVerbs("Post")]
        public ActionResult Create(FormCollection form)
        {
            // Validate
            Validation.Validate<Message>(ViewData.ModelState, form);
            if (!ViewData.ModelState.IsValid)
                return View("Create", form);

            // Create new message
            var messageToCreate = new Message();
            if (!String.IsNullOrEmpty(form["parentThreadId"]))
                messageToCreate.ParentThreadId = int.Parse(form["parentThreadId"]);
            if (!String.IsNullOrEmpty(form["parentMessageId"]))
                messageToCreate.ParentMessageId =  int.Parse(form["parentMessageId"]);
            messageToCreate.Author = form["author"];
            messageToCreate.Subject = form["subject"];
            messageToCreate.Body = form["body"];
            messageToCreate.EntryDate = DateTime.Now;

            // Add to database
            _repository.AddMessage(messageToCreate);

            // Redirect
            return RedirectToAction("Index");
        }

        public ActionResult Thread(int threadId)
        {
            ViewData.Model = _repository.SelectMessages(threadId);
            return View("Thread");
        }

    }
}

Notice that the Forum controller now has two Create() methods. The first Create() method displays the form for creating a new forum message. The second Create() method is called when the form data is posted to the server.

This second Create() method takes advantage of the Validation class to validate the form data. If validation fails, the Create view is redisplayed.

The final modification that we need to make is to the Message class. The modified Message class is contained in Listing 8.

Listing 8 – Models\Message.cs

using System;
using MvcValidation;

namespace MvcForums.Models
{
    public class Message
    {
        public Message()
        { }

        public Message(int id, int? parentThreadId, int? parentMessageId, string author, string subject, string body)
        {
            this.Id = id;
            this.ParentThreadId = parentThreadId;
            this.ParentMessageId = parentMessageId;
            this.Author = author;
            this.Subject = subject;
            this.Body = body;
        }

        public int Id { get; set; }
        public int? ParentThreadId { get; set; }
        public int? ParentMessageId { get; set; }
        public string Author { get; set; }
        
        [RequiredValidator("You must enter a message subject.")]
        public string Subject { get; set; }
        
        [RequiredValidator("You must enter a message body.")]
        public string Body { get; set; }
        
        public DateTime EntryDate { get; set; }
    }
}

Two RequiredValidator attributes have been added to the Message class in Listing 8. No other changes have been made to the class.

After all of these modifications have been made to the Forums application, the new validation unit tests pass (see Figure 4). We have successfully added validation to the Forums application.

Figure 4 – Forums validation tests pass

Summary

In this blog entry, we’ve added support for basic form validation to the Forums application. We created a set of validation attributes that we can apply to our model classes. In this blog entry, we implemented server-side validation. In the next blog entry, I want to tackle the problem of client-side validation.

Download the Code