Sharpen Your MVC Views with Razor

1. Sharpen Your MVC Views with Razor By Jon Marozick

2. What is Razor? • New view-engine that is optimized around HTML generation using a code-focused templating approach • View-engines are pluggable modules that implement different template syntax options • Examples include WebForms, Spark and NHaml

3. Why Razor? – Consult “Gu” • Compact, Expressive, and Fluid • Easy to Learn • Is not a new language • Works with any Text Editor • Has great Intellisense • Unit Testable

4. Razor Syntax • Code nugets • <%= %> vs @ • Saves characters and % is hard to reach • Don’t have to close code blocks • The Razor parser has semantic knowledge of C#/VB code used within code-blocks • @ HTML-encodes output

5. @model Directive • Easier way to specify strongly-typed models • Don’t need inherits anymore • By default, Razor will derive the view from the System.Web.Mvc.WebViewPage<TModel> base class • web.config file of your \Views directory specifies base class and imported namespaces

6. If-Blocks and Multi-line Statements • If-blocks require curly braces • Use @{ … } for multi-line statements • Use @( … ) for multi-token statements

7. Server-Side Coments • Use @* … *@ • Same as <%-- … --%> in WebForms • Not same as <!-- … --> which is an HTML client-side comment

8. Content and Code • Razor is smart enough to know the difference between email addresses and code • To output an @ where inference may be difficult escape it with @@ • Use <text></text> or @: to denote nested content with no wrapping HTML tags

9. Layout/Master Pages • Layout is the new master • Use @RenderBody() as the main content placeholder • Use @RenderSectionfor additional content placeholders • Named @section { } blocks are used to define content for each section

10. DRY Layouts up with _ViewStart • The _ViewStart.cshtml file runs before every view is rendered • Common view code can be placed here • Great place to select view based on detected device (e.g. mobile or tablet)

11. Sections • Use IsSectionDefined() to include default markup with optional sections • IsSectionDefined() and RenderSection() cause view to be not directly renderable • Sections are not visible more than one level away but can be redefined

12. Helpers • Could use imperative code and add an extension method to HtmlHelper • Razor offers declarative helpers either embedded in a page or packaged separately in a class placed in the App_Code folder

13. Passing Inline Templates as Parameters

14. Compiled Views • <MvcBuildViews>true</MvcBuildViews> • Shifts compiling to build-time rather than run-time • Advantage: Catches syntax errors early • Disadvantage: Adds to build time • If build time is an issue, only turn on in Release mode

15. Compiled View & Publish Issue • See this post and it references this post • Using the Publish or MsDeploy feature puts files in the obj folder. When build task for compiled views runs the compiler gets confused when it sees the web.config file since there can be only one

16. Pre-compiling Views • RazorGenerator allows pre-compiled views • Why pre-compile? • Avoids any run-time hit • Reduces deployment file set, don’t need cshtml files • Unit testing

17. Scott Gu’s Blog • Introducing Razor • New @model keyword • Layouts with Razor • Server-Side Comments • Razor’s @: and <text> syntax • Implicit and Explicit code nuggets • Layouts and Sections • @helper syntax

18. References/Resources • Converting from Webforms view engine to Razor–Some Tips • WebForms to Razor view converter tool • Precompile your MVC Razor views • Unit test your MVC views • C# Razor Syntax Quick Reference • Compiling MVC Views In A Build Environment • Templated Razor Delegates