Learning Razor–Writing an Inline Recursive HTML Helper

by rhernandez 10. November 2010 08:54

I have been using Spark (http://www.sparkviewengine.com) as my default view engine for the past 5 or 6 months and I love everything about it.  I like its elegance, simplicity and I depend on some of its features to be efficient in doing most of my daily tasks.   That being said, there is a new kid on the block and his name is Razor.  Razor, will be an out of the box alternative for the ASP.NET WebForm’s view engine for ASP.NET MVC3 (Read Scott Guthrie’s blog on the topic here).   I don’t intend to write a full blown tutorial on Razor,  but as I learn the basics for this alternative view engine, I will try to write some “Learning Razor” posts that relate my experience in learning this new technology.

 

Writing an Inline Recursive Html Helper

The Spark view engine provides you with the ability to define inline macros that allow for recursive calls (Read Louis DeJardin blog on the topic here, and additional documentation here).  These macros are extremely useful for rendering a hierarchical structure such as the one in the following snippet.

 

<ul>
  <li>Fuller, Andrew
    <ul>
      <li>Davolio, Nancy</li>
      <li>Leverling, Janet</li>
      <li>Peacock, Margaret</li>
      <li>Buchanan, Steven
        <ul>
          <li>Suyama, Michael</li>
          <li>King, Robert</li>
          <li>Dodsworth, Anne</li>
        </ul>
      </li>
      <li>Callahan, Laura</li>
    </ul>
  </li>
</ul>

 

Now, the Razor view engine allows you to easily build a hierarchical structure by the use of inline HTML helpers that can be called recursively.  The following is a basic snippet of a “Hello World” inline HTML helper, and a call to trigger its functionality.

 

@HelloWorld("Roberto!")

@helper HelloWorld(string name) {
    <h1>Hello World! @name</h1>
}

 

Finally, if we wanted to output the html from the first snippet using Razor we could write the following inline HTML helper.

 

@model IEnumerable<OrganizationNodeViewModel>
@using MVC3.Playground.ViewModels;
@{
    View.Title = "OrganizationTree";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<h2>OrganizationTree</h2>

@OrgTree(Model, null);

@helper OrgTree(IEnumerable<OrganizationNodeViewModel> nodes, int? parentId) {
    if (nodes.Any(n => n.ParentId == parentId)) { 
    <ul>
        @foreach (var node in nodes.Where(n => n.ParentId == parentId)) {
            <li>
                @node.DisplayName
                @OrgTree(nodes, node.Id)
            </li>
        }
    </ul>
    }
}

Comments

3/19/2011 2:18:59 AM #

trackback

RazorEngine

RazorEngine

Blog J.Schweiss

Comments are closed

The Author



Roberto Hernández

 

Currently an Developer Extraordinaire at InfernoRed Technology based out of Northern Virginia. I have been architecting and building software solutions using Microsoft technology for the past 14 years. I was awarded as a Microsoft MVP in C# in 2007,2008 and 2010. I am originally from the Dominican Republic, and the proud father of two beautiful daughters that make my life special. You can track me down on twitter (@hernandezrobert) and on this blog at http://www.overridethis.com.


 

Stack Overflow profile for Roberto Hernandez at Stack Overflow, Q&A for professional and enthusiast programmers

INETA Community Speakers Program

 

 

Recent Posts