MVC3 and Grid Hierarchy

In my last blog post I did a quick overview of the Razor ViewEngine and showed a few examples of the new syntax working with the Telerik Extensions for ASP.NET MVC.  If you haven’t read over the blog post yet I recommend that you do before you continue reading this one, especially if you are not familiar with the Razor ViewEngine yet.

Today I wanted to take a look at a how the new Razor ViewEngine works with our Grid for ASP.NET MVC, specifically in terms of Server Hierarchy. Why just Server and not Ajax you say? Well the WebForms code is pretty much the same for the Ajax hierarchy, aside from the @{ … } syntax of Razor, so there really isn’t any new excitement going on there.

Now one quick MVC3 item that I want to bring up here is the @helper syntax. This syntax allows you to declare re-usable HTML helpers which help encapsulate HTML generation functionality. You can simply define an @helper { … } section somewhere in your View and then call it anywhere you want that HTML placed on the page. Let’s look over a quick example. As we can see below I have defined “HelperFunction” which simply takes an integer and populates a list accordingly.

Then in order to call this function I simply type @ and then start typing the name of my function, intellisense should pick it right up:

This is of course a very simplified use of this functionality, but it gets the point across.

Next I’ll start creating my Grid hierarchy. We’ll start off like we usually do, and as we saw in the previous blog post we’ll use @<text></text> to define our first level of hierarchy:

Easy enough! Let’s see what happens when we define a third level hierarchy using the same way:

When we open this in the browser we’re greeted by the following error message:

"Parser Error Message: Inline markup blocks (@<p>Content</p>) cannot be nested.  Only one level of inline markup is allowed."

As the error message mentions, the Razor ViewEngine does not support any further nesting of @<p>, <text> or <div> tags. So what can we do in situations where we need more than one level of hierarchy? Here’s where the helpers that I mentioned come into play, aren’t you glad I mentioned them? :) So here’s how we can define and use our helper:

 

As we can see in the code snippets above, we define a helper function that allows us to pass our View as well as an Order entity. We can then define the Grid structure that we want for this level of hierarchy and call it when we are defining the template.

So that’s it! We now can define a hierarchy as deep as we would want without running into any snares due to nested markup blocks using the new Razor syntax!