Earlier this month I blogged about the new “Razor” view engine we’ve been working on.  Based on the comments in the post, a lot of people are eagerly waiting to use it.  The good news is that you can start using it with today’s “Preview 1” release.

Simple Razor Example

Let’s build a super-simple store site that lists product categories, and allows visitors to click the categories to see a listing of products within them.  You can download a completed version of this sample here.

Below is a StoreController class that implements the two action methods (“Index” and “Browse”) needed to build the above scenario:

We’ll use the new “Razor” view engine to implement the view templates for our StoreController.

Below is the “Layout.cshtml” layout-page that will define the common layout UI we want across our site.  The “RenderBody()” method indicates where view templates that are based on this master layout file should “fill in” the body content:

Below is the view template for the Index action.  It is based on the above layout page, and outputs a <ul> list of category names: 

The template above is using the standard Html.ActionLink() helper method in ASP.NET MVC to render a hyperlink that links to the “Browse” action method of our StoreController.  All of existing HTML helper methods in ASP.NET MVC work in “Razor” views – this is true both for the HTML helper methods built-into ASP.NET MVC, as well as those built by others (including vendors and the MvcContrib project).

Below is the view template for the Browse action.  It lists the products within a specific category:

Notice above how we are using the “Model” property within our foreach statement to access the strongly-typed List of products we passed from our Controller.  We are doing this just like we would within .aspx view templates.  Razor also supports a “View” property which allows us to access un-typed “ViewData” passed to the view template.  “View” is a dynamic property (a new feature of .NET 4) – which gives us a slightly cleaner syntax when accessing ViewData.  Instead of writing ViewData[“Cateogry”] we can now just write View.Category.

Clean and Concise

The code in the screen-shots above contains everything we need to write to implement our Controller + Views.  “Razor” helps make view templates clean and concise, and I think you’ll find it enables a very fluid coding workflow. Read my “Razor” blog post from earlier in the month to learn more about the syntax and understand how it works.  You can download a running version of the above sample here.

Code Intellisense and Colorization

One of the things you might have noticed from the screen-shots above is that “Razor” file colorization and code intellisense is not yet supported in Visual Studio with today’s “Preview 1” release.  We will be enabling full code intellisense and colorization with a future preview refresh.  The VS 2010 editor will support Razor file intellisense for C#/VB code, as well as for HTML/CSS/JavaScript.