This is another in a series of posts I’m doing that cover some of the new ASP.NET MVC 3 features: New @model keyword in Razor (Oct 19th) Layouts with Razor (Oct 22nd) Server-Side Comments with Razor (Nov 12th) Razor’s @: and <text> syntax (Dec 15th) Implicit and Explicit
code nuggets with Razor (today) 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: When run, the above
code generates output like below: 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: You can also use “dot” notation
to access sub-properties multiple levels deep: Array/Collection Indexing: Razor allows you
to index into collections or arrays: Calling Methods: Razor also allows you
to invoke methods: 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: 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 Check for brackets - If we see "(" or "[", go
to step 2.1., otherwise, go
to step 3 Parse until the matching ")" or "]" (we track nested "()" and "[]" pairs and ignore "()[]" we see in strings or comments) Go back
to step 2 Check for a "." - If we see one, go
to step 3.1, otherwise, DO NOT ACCEPT THE "." as
code, and go
to step 4 If the character AFTER the "." is a valid identifier, accept the "." and go back
to step 1, otherwise, go
to step 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: 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: 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: 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: 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: Below is an example of C#
code intellisense when using an explicit
code nugget embedded in the middle of a <img> src=”” attribute: 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
