Sharpen Your MVC Views with Razor

advertisement

Sharpen Your MVC

Views with Razor

By Jon Marozick

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

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

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

@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

If-Blocks and Multi-line Statements

 If-blocks require curly braces

 Use @{ … } for multi-line statements

 Use @( … ) for multi-token statements

Server-Side Coments

 Use @* … *@

 Same as <%-… --%> in WebForms

 Not same as <!-… --> which is an HTML clientside comment

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

Layout/Master Pages

 Layout is the new master

 Use @RenderBody() as the main content placeholder

 Use @RenderSection for additional content placeholders

 Named @section { } blocks are used to define content for each section

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)

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

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

Passing Inline Templates as

Parameters

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

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

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

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

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

Download