Transcript Sharpen Your MVC Views with Razor

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 client-
side 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