Using Brail View Engine with ASP.NET MVC – An Introduction

Aug 17, 2009

Over the past 10 months I have done quite a bit of development with ASP.NET MVC, but I have never used any of the custom view engines available.  ASP.NET MVC (like other implementations of the MVC pattern) applies view engine mechanism as a way to replace the rendering methods of the applications.  The built-in view engine is obviously the most commonly used one – the <% tags have become synonymous with ASP.NET and MVC.

Why should we use any other View Engine?

The main reason why I would like to use a different View Engine is to allow a web designer to style the views on my behalf.  Sound funny?  Let’s take a look at a snippet out of some of the views on the last project I worked on.

<%  if (pagedList.PageCount > 1)
{
    for (int pageNumber = 1; pageNumber <= pagedList.PageCount; pageNumber++)
    {
        if (pageNumber == pagedList.PageCount)
        {
          %><li class="last"><%
        }
        else
        {
          %><li><%
        }
        if (pageNumber != pagedList.PageNumber)
        { %>
            <%=Html.ActionLink(pageNumber.ToString(), "Index", new { view = ((TradeView)ViewData["View"]).ToString(), page = pageNumber - 1, filter = (string)ViewData["FilterQuery"], sort = (string)ViewData["Sort"] })%>
     <% }
        else
        {
          %><%=pageNumber%><%
        }
          %></li><%
    }
} %>

If we tell a web designer to style this page, he/she wouldn’t really know where to start.  I’m trying to see if using a different view engine would help to make the view simpler – less logic, more html.

Getting started with Brail

Brail has been ported from MonoRail to work with MVC and is available as part of the MVC Contrib project on Codeplex.  The Brail page on Codeplex has a detailed explanation on which assemblies you need to reference, how you need to modify your web.config and how to register the Brail view engine in your controller.

Problem is, it’s all wrong.

As far as I can tell the documentation is completely outdated with the latest version of MVC.  I first ran into problems where I tried to set the BrailViewFactory as the view engine to be used.  The documentation on Codeplex uses the following code to do this.

public class HomeController : Controller
{
    public HomeController()
    {
        this.ViewFactory = new BrailViewFactory();
    }
}

The controller class no longer has a ViewFactory property!  A quick Google revealed that any information on this was equally outdated.

So, if you want to start using Brail or any other custom view engine, here’s what you should do.

  1. Download MVC Contrib with Extras.
  2. Add references to
    1. Boo.Lang
    2. Boo.Lang.Compiler
    3. Boo.Lang.Extensions
    4. Boo.Lang.Parser
    5. MvcContrib
    6. MvcContrib.BrailViewEngine
  3. Add a new section in the configSections tag of you web.config
<section name="brail" type="MvcContrib.BrailViewEngine.BrailConfigurationSection, MvcContrib.BrailViewEngine"/>
And add a *brail* tag.

<brail debug="true" saveToDisk="false" batch="false" commonScriptsDirectory="CommonScripts" saveDirectory="CompiledViews" />
  1. Now we need to register the view engine on startup.
protected void Application_Start()
{
    RegisterRoutes(RouteTable.Routes);
    ViewEngines.Engines.Add(new BrailViewFactory());
}

That’s all we need.  Thanks to Keyvan Nayyeri for his post on Brail.

Views and Layouts

There are 2 differences when working with Brail views compared to the default ASP.NET view engine.  Firstly, all views must have the .brail extension.  Secondly, Brail has the concept of layouts – similar to master pages.

Layouts must be stored in a folder called ‘Layouts’.  My first impression is that I would probably use more than one layout – this is different to master pages where I almost never used more than one.

<!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>${Title}</title>
</head>
<body>
    <div>
        ${childOutput}
    </div>
</body>
</html>

The ${childOutput} variable is where the view is rendered.

Example

I have created a very simple example to illustrate the basics of Brail.

public class HomeController : Controller
{
    public ActionResult Index()
    {
        ViewData["Title"] = "This is a title passed from the controller";
        ViewData["Message"] = "This is a message passed from the controller";
        ViewData["Time"] = DateTime.Now.ToString("dd/MMM/yyyy HH:mm");

        return View("Index", "Master");
    }
}

Notice that I specify that the Master layout must be used – the view has no knowledge of the layout being used.

<h1>${Message}</h1>
<p>The time is now ${Time}</p>

Here you can see the syntax for accessing variables from the ViewData.

Summary

This post is meant to serve as an introduction and installation guide.  In my next post I will try and create a more realistic example.  I will also take a look at strongly-typed views and iterations.

So far Brail looks very promising.