RSS

ASP.NET MVC Razor Code nuggets vs. Code blocks

14 Feb

There’s a difference between Code Nuggets and Code blocks in Razor. A “Code Nugget” is simply the usage of the @ sign which indicates a server-side “self contained” code block. For example:

1:  @Model.Name

This will basically print out a string. Resembles ASP.NET’s somewhat cumbersome <%= %>, but a lot more tidy and clean. No doubt this is very convenient.

However, if you require a “server side” code block, Razor allows opening a server side code block using @{ }. For example, say you want to print out a Model’s property, only it contains data:

1:  @{
2:     if (!string.IsNullOrWhiteSpace(Model.Name))
3:     {
4:         Html.Raw(Model.Name);
5:     }
6:  }

Note line 4: Html.Raw( ) is a helper method which simply outputs a text. Interesting enough, as opposed to the previous sample code, this code renders nothing to the browser, despite the fact that Mode.Name is not empty.

I went on and tried the following:

1:  @Html.Raw(Model.NickName)
2:  @{ Html.Raw(Model.NickName); }

As you might have guessed, line 1 provided the desired output while line 2 rendered nothing. Puzzled, I went to the Reflector and found out the following:

Code Nugget vs Code Block

Line 1 compiled into a this.Write(…) method, and line 2 resulted in a simple base.Html.Raw(…) call. This explained several things which in retrospect became obvious:

  1. A Razor code block is, basically, well, just a code block. This means that it will not output the text just because Html.Raw(…) is being called.
  2. Moreover, Html.Raw(…) does not render anything to the output stream by itself.
  3. A Code Nugget is compiled as a this.Write(…) method call.
  4. If we want to render something to the output stream from a code block, we should explicitly mention it, either by calling Write(…)/WriteLiteral(…), or simply by specifying a Code Nugget from within the code block itself. In other words, the following examples work well (note the @ signs emphasized in red):
1:  @{ @Html.Raw(Model.Name); }

And so does this:

1:  @{
2:     if  (!string.IsNullOrWhiteSpace(Model.Name))
3:     {
4:         @Html.Raw(Model.Name);
5:     }
6:  }

One final word about this topic. Re-examining Scott Gu’s blog, specifically the examples in the “Identifying Nested Content”, demonstrates the above “conclusion” explicitly. Nevertheless, apparently it was easy to miss, forget, or maybe it was just confusing till I experienced this myself. At least it resulted in a better understanding of the compiled Razor output.

About these ads
 
4 Comments

Posted by on 14/02/2011 in Software Development

 

Tags: , , , , ,

4 responses to “ASP.NET MVC Razor Code nuggets vs. Code blocks

  1. Tony

    01/03/2013 at 23:43

    Thank you! This is very helpful. It took me a long time to find the solution.

     
  2. Marc Stober (@marcstober)

    18/10/2013 at 17:35

    Thanks! I agree this was easy to miss. Makes sense once you understand it, but the syntax doesn’t make it obvious.

     

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

Join 67 other followers

%d bloggers like this: