ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

This is another in a series of posts I’m doing that cover some of the new ASP.NET MVC 3 features:

In today’s post I’m going to discuss how Razor enables you to both implicitly and explicitly define code nuggets within your view templates, and walkthrough some code examples of each of them. 

Fluid Coding with Razor

ASP.NET MVC 3 ships with a new view-engine option called “Razor” (in addition to the existing .aspx view engine).  You can learn more about Razor, why we are introducing it, and the syntax it supports from my Introducing Razor blog post.

Razor minimizes the number of characters and keystrokes required when writing a view template, and enables a fast, fluid coding workflow. Unlike most template syntaxes, you do not need to interrupt your coding to explicitly denote the start and end of server blocks within your HTML. The Razor parser is smart enough to infer this from your code. This enables a compact and expressive syntax which is clean, fast and fun to type.

For example, the Razor snippet below can be used to iterate a collection of products and output a <ul> list of product names that link to their corresponding product pages:

image

When run, the above code generates output like below:

image

Notice above how we were able to embed two code nuggets within the content of the foreach loop.  One of them outputs the name of the Product, and the other embeds the ProductID within a hyperlink.  Notice that we didn’t have to explicitly wrap these code-nuggets - Razor was instead smart enough to implicitly identify where the code began and ended in both of these situations. 

How Razor Enables Implicit Code Nuggets

Razor does not define its own language.  Instead, the code you write within Razor code nuggets is standard C# or VB.  This allows you to re-use your existing language skills, and avoid having to learn a customized language grammar.

The Razor parser has smarts built into it so that whenever possible you do not need to explicitly mark the end of C#/VB code nuggets you write.  This makes coding more fluid and productive, and enables a nice, clean, concise template syntax.  Below are a few scenarios that Razor supports where you can avoid having to explicitly mark the beginning/end of a code nugget, and instead have Razor implicitly identify the code nugget scope for you:

Property Access

Razor allows you to output a variable value, or a sub-property on a variable that is referenced via “dot” notation:

image

You can also use “dot” notation to access sub-properties multiple levels deep:

image

Array/Collection Indexing:

Razor allows you to index into collections or arrays:

image

Calling Methods:

Razor also allows you to invoke methods:

image

Notice how for all of the scenarios above how we did not have to explicitly end the code nugget.  Razor was able to implicitly identify the end of the code block for us.

Razor’s Parsing Algorithm for Code Nuggets

The below algorithm captures the core parsing logic we use to support “@” expressions within Razor, and to enable the implicit code nugget scenarios above:

  1. Parse an identifier - As soon as we see a character that isn't valid in a C# or VB identifier, we stop and move to step 2
  2. Check for brackets - If we see "(" or "[", go to step 2.1., otherwise, go to step 3 
    1. Parse until the matching ")" or "]" (we track nested "()" and "[]" pairs and ignore "()[]" we see in strings or comments)
    2. Go back to step 2
  3. Check for a "." - If we see one, go to step 3.1, otherwise, DO NOT ACCEPT THE "." as code, and go to step 4
    1. If the character AFTER the "." is a valid identifier, accept the "." and go back to step 1, otherwise, go to step 4
  4. Done!

Differentiating between code and content

Step 3.1 is a particularly interesting part of the above algorithm, and enables Razor to differentiate between scenarios where an identifier is being used as part of the code statement, and when it should instead be treated as static content:

image

Notice how in the snippet above we have ? and ! characters at the end of our code nuggets.  These are both legal C# identifiers – but Razor is able to implicitly identify that they should be treated as static string content as opposed to being part of the code expression because there is whitespace after them.  This is pretty cool and saves us keystrokes.

Explicit Code Nuggets in Razor

Razor is smart enough to implicitly identify a lot of code nugget scenarios.  But there are still times when you want/need to be more explicit in how you scope the code nugget expression.  The @(expression) syntax allows you to do this:

image

You can write any C#/VB code statement you want within the @() syntax.  Razor will treat the wrapping () characters as the explicit scope of the code nugget statement.  Below are a few scenarios where we could use the explicit code nugget feature:

Perform Arithmetic Calculation/Modification:

You can perform arithmetic calculations within an explicit code nugget:

image

Appending Text to a Code Expression Result:

You can use the explicit expression syntax to append static text at the end of a code nugget without having to worry about it being incorrectly parsed as code:

image

Above we have embedded a code nugget within an <img> element’s src attribute.  It allows us to link to images with URLs like “/Images/Beverages.jpg”.  Without the explicit parenthesis, Razor would have looked for a “.jpg” property on the CategoryName (and raised an error).  By being explicit we can clearly denote where the code ends and the text begins.

Using Generics and Lambdas

Explicit expressions also allow us to use generic types and generic methods within code expressions – and enable us to avoid the <> characters in generics from being ambiguous with tag elements.

One More Thing….Intellisense within Attributes

We have used code nuggets within HTML attributes in several of the examples above.  One nice feature supported by the Razor code editor within Visual Studio is the ability to still get VB/C# intellisense when doing this.

Below is an example of C# code intellisense when using an implicit code nugget within an <a> href=”” attribute:

image

Below is an example of C# code intellisense when using an explicit code nugget embedded in the middle of a <img> src=”” attribute:

image

Notice how we are getting full code intellisense for both scenarios – despite the fact that the code expression is embedded within an HTML attribute (something the existing .aspx code editor doesn’t support).  This makes writing code even easier, and ensures that you can take advantage of intellisense everywhere.

Summary

Razor enables a clean and concise templating syntax that enables a very fluid coding workflow.  Razor’s ability to implicitly scope code nuggets reduces the amount of typing you need to perform, and leaves you with really clean code.

When necessary, you can also explicitly scope code expressions using a @(expression) syntax to provide greater clarity around your intent, as well as to disambiguate code statements from static markup.

Hope this helps,

Scott

P.S. In addition to blogging, I am also now using Twitter for quick updates and to share links. Follow me at: twitter.com/scottgu

Published Thursday, December 16, 2010 11:23 PM by ScottGu
Filed under: , , ,

Comments

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Friday, December 17, 2010 4:17 AM by ScottGu

@Daan,

>>>>>> var intlist = new int[] { 10, 20 30 }

I believe the problem you have is that you are missing a semi-colon.  It should be:

   var intlist = new int[] { 10, 20 30 };

Hope this helps,

Scott

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Friday, December 17, 2010 5:14 AM by chanva

I really like Razor, which saves much keystokes, and make the code succinct.

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Friday, December 17, 2010 3:39 PM by ScottGu

@Fred Morrison,

>>>>>>> Question: when will we be able to use all this "MVC 3 goodness" in places like SharePoint, either SharePoint 2007 or SharePoint 2010?  

Right now SharePoint runs on .NET 3.5 - so unfortunately Razor isn't supported there.  We are hoping to provide more integration in the future.

Thanks,

Scott

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Friday, December 17, 2010 3:42 PM by ScottGu

@Andrew,

>>>>>>>> when using $ get error bla2

Can you post a sample of the code you are using, and the exact error message you are seeing?

Thanks,

Scott

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Friday, December 17, 2010 3:46 PM by ScottGu

@tobi,

>>>>> What are the rules for html encoding?

By default all content that is output with Razor is HTML encoded.  You can indicate content should not be encoded with the Html.Raw() helper method.

For example:

@{

  string content = "<b>Hello World</b>";

}

This is some html: @Html.Raw(content)

Hope this helps,

Scott

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Saturday, December 18, 2010 12:08 AM by ScottGu

@Frank,

>>>>>>> Will other code-oriented features (refactoring like renaming of identifiers, find all references, etc) also work for code in a Razor file?

Most of the standard code editor features work - including things like F12 (go to definition), etc.  I don't believe refactoring support is fully enabled yet (although I need to check to make sure).  If it isn't in V1 then we'll definitely include it in the future.

Hope this helps,

Scott

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Monday, December 20, 2010 10:10 AM by FTeR

I really like Razor! It's so much better than classic code blocks or some over extended markup.

While editing .cshtml, VS2010 "Text Editor" toolbar is missing some icons compared to .cs (ex: "Display Parameter Info", "Display Quick Info", etc.), I prefer these over hotkeys. Is there way to enable them within .cshtml?

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Monday, December 20, 2010 3:02 PM by ScottGu

@Andrew,

Can you try this:

@helper Script(string id) {

<text>

  $(function () {

          $("#@id").tabs();

      });

</text>

}

I believe that will work.

Thanks,

Scott

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Monday, December 20, 2010 7:06 PM by ScottGu

@hackee,

>>>>>>> does Razor support things like the following spark syntax:

>>>>>>> $!{product.Category.Name}

>>>>>>> When 'product' is null, it produces null string instead of throwing an exception.

That is a cool feature - unfortunately we don't support that.  What you could do instead, though, is this:

  @(product ?? product.Category.Name : "")

That uses C#'s null coalescing operator and will return the value if product is not null, and an empty string otherwise.

Hope this helps,

Scott

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Monday, December 20, 2010 7:07 PM by ScottGu

@qcom,

We are going to be updating a number of existing MVC2 tutorials on the http://www.asp.net/mvc web-site in January to use the new MVC3 feature-set.  They should provide a good way to learn end to end using ASP.NET MVC 3.

Hope this helps,

Scott

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Monday, December 20, 2010 7:10 PM by ScottGu

@Igor,

>>>>>>>> The "Manage Style", "CSS Properties", "Apply Style" panes of the Visual Studio does not work with a razor synax as <link href="@Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />

Yes - these features aren't supported when use a programmatic URL to a CSS style-sheet.

Hope this helps,

Scott

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Monday, December 20, 2010 7:11 PM by ScottGu

@FTeR

>>>>>> I really like Razor! It's so much better than classic code blocks or some over extended markup.  While editing .cshtml, VS2010 "Text Editor" toolbar is missing some icons compared to .cs (ex: "Display Parameter Info", "Display Quick Info", etc.), I prefer these over hotkeys. Is there way to enable them within .cshtml?

Unfortunately I don't believe these features are enabled just yet.

Sorry!

Scott

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Monday, December 20, 2010 10:06 PM by longtv82

How can I use function in razor?

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Tuesday, December 21, 2010 11:48 PM by longtv82

Thanks Stacey!

Razor is very nice...

# re: ASP.NET MVC 3: Implicit and Explicit code nuggets with Razor

Monday, January 3, 2011 7:04 PM by stenko

This will save on my time.