Razor into the Razor'verse

Ed Charbeneau
my name is
HELLO

• Razor (syntax)
• Razor Views
• Html Helpers
• Razor Pages
• Tag Helpers
• View Components
• Blazor
• Razor Components
Razor-verse
Terminology or technology?
??
??
??
??
??
??

ASP.NET Razor
The Razor syntax is a template markup
syntax, based on the C# programming
language

ASP.NET Razor
• Introduced July 2010 by Scott Guthrie
• Shipped January 2011 with Visual Studio
2010
• Improve the template experience

<ul>
<% foreach (p in people) { %>
<li><% p.Name %></li>
<% } %>
</ul>
WebForms
Why Razor?
<ul>
@foreach (p in people)
{
<li>@p.Name</li>
}
</ul>
Razor

<ul>
<li *ngFor="let p of person">
{{c.name}}
</li>
</ul>
Angular
Compare
<ul>
{
<li>@p.Name</li>
}
</ul>
Razor

@{
var greeting = "Hello";
}
@greeting
@{
greeting = "Howdy";
}
@greeting
IN
Razor Syntax: Code Blocks
Hello
Howdy
Out: HTML

@( 5 + 10 + 20 )
IN
Razor Syntax: Complex Expression
35
Out: HTML

@if (value % 2 == 0)
{
The value was even.
}
else if (value >= 1337)
{
The value is large.
}
else
{
The value is odd and small.
}
cshtml
Razor Syntax: @if

Razor Syntax: Control structures
Keyword
Try catch
While
For
Foreach
If
Do while
Ternary (?: operator)

Razor Syntax: Directives
@using adds C# using directive to view
@inherits view class
@inject inject service
@functions add C# code block to a view

Razor Complexities
Rendering
• Generating C# code from the template
• Compiling the C# code into an assembly
• Loading the assembly into memory
• Executing your compiled template

// Not real code
var engine = new Razor();
var result = engine.RenderTemplate(path);
Fail
Razor For Templates?

Razor Complexities
Tightly Coupled to ASP.NET
• IView
• HtmlEncoder
• TextWriter
• HttpContext

1 var engine = new RazorLightEngineBuilder()
2 .UseMemoryCachingProvider()
3 .Build();
4
5 string template = "Hello, @Model.Name. Welcome to RazorLight repository";
6 ViewModel model = new ViewModel() { Name = "John Doe" };
7
8 string result = await engine.CompileRenderAsync(“uid", template, model);
RazorLight
Razor For Templates?

Razor views (cshtml)
• Streamlined for code-focused templating
• Returned from a controller Action as a ViewResult
• Content is made of
– HTML
– HTML Helpers *typical
– Tag Helpers *new
– Razor Components *bleeding edge

<ul>
<% foreach (p in people) { %>
<li><% p.Name %></li>
<% } %>
</ul>
WebForms
ASP.NET MVC View engines
<ul>
{
<li>@p.Name</li>
}
</ul>
Razor

Razor Syntax: Directives
@model model type for view
@section enable views to render content to
parts of page
@addTagHelper adds a Tag Helper to scope (.NET Core)

HTML Helpers
• Invoked as methods within HTML in Razor views
• Incapsulates a block of HTML and Razor Code
• Produces an HTML string

HTML Helpers
Html.ActionLink()
Html.BeginForm()
Html.CheckBox()
Html.DropDownList()
Html.EndForm()
Html.Hidden()
Html.ListBox()
Html.Password()
Html.RadioButton()
Html.TextArea()
Html.TextBox()

@Html.ActionLink("Create New", "Create")
In
HTML Helper Usage
<a href="/Student/Create">Create New</a>
Out

Creating HTML Helpers
• Extends IHtmlHelper as an extension method
• Returns IHtmlContent

Func<IHtmlHelper, IHtmlContent>
(extension) IHtmlContent Func(this IHtmlHelper htmlHelper)
Signature
Custom HTML Helper
public static IHtmlContent BeerCity(this IHtmlHelper htmlHelper)
=> new HtmlString("<img src=/img/fulllogo.png />");
Example

Razor Pages
• Introduced in ASP.NET Core
• Page-focused approach incorporates its own
Controller/Action/Routing
• Can integrate with MVC
• Content is made of:
– HTML
– Tag Helpers *typical
– HTML Helpers *compatible
– Razor Components *bleeding edge

@page
@model IndexModel
<h2>Separate page model</h2>

@Model.Message

Signature
Custom HTML Helper
public class IndexModel : PageModel
{
public string Message
{
get;
private set;
} = "PageModel in C#";
public void OnGet()
{
Message += $"Server time is { DateTime.Now }";
}
}
Example

Tag Helpers
• Async server-side processing via HTML elements
• Use HTML’like Tags and Attributes
• Eliminate context switching between HTML and C#
• Designed for Unit Testing

@Html.Label(“Name”, “First Name:”, new { @class = “caption” })
Signature
HTML Helpers vs. Tag Helpers
<label asp-for=“Name” class=“caption”>First Name:</label>
Example

@(Html.Kendo().Grid<Customer>().Name("grid")
.Columns(columns =>
{
columns.Bound(c => c.ContactName);
columns.Bound(c => c.ContactTitle);
columns.Bound(c => c.CompanyName);
columns.Bound(c => c.Country);
})
HTML Helpers vs. Tag Helpers
<kendo-grid name="grid" height="550">
<columns>
<column field="ContactName" title="Contact Name" />
<column field="ContactTitle" title="Contact Title" />
<column field="CompanyName" title="Company Name" />
<column field="Country" title="Country“ />
</columns>
</kendo-grid>

Tag Helper Directives
@addTagHelper Component, NameSpace Adds a Tag Helper to scope
@addTagHelper *, Kendo.Mvc Ex: 3rd party Tag Helpers
@removeTagHelper Component, Namespace Removes a Tag Helper from scope
@tagHelperPrefix th: Prefixes Tag Helpers ex: <th:myWidget>

Built-in ASP.NET Core Tag Helpers
• Anchor
• Cache
• Distributed Cache
• Environment
• Form
• Form Action
• Image
• Input
• Label
• Partial
• Select
• Textarea
• Validation Message
• Validation Summary

Tag Helpers: Example
<kendo-datepicker name="startDate"
start="CalendarView.Year"
depth="CalendarView.Year"
format="MMMM yyyy"
value='DateTime.Parse("May 2019")' />

View Components
• Renders a chunk rather than a whole response
• Similarities with controller and view
• Can have parameters and business logic
• Is typically invoked from a layout page
• Deprecated by Razor Components??

List Items From Database
<vc:priority-list max-priority="2"
is-done="false">
</vc:priority-list>

Razor Component (Blazor Framework)
• Razor Syntax
• Component Architecture vs. HTML generator
• Creates a RenderTree (DOM Abstraction)
• Similar to JSX for React
• Uses .razor file extension
• .razor files are used for code generation of .NET
classes
– These classes implement a RenderTree

Browser
JavaScript (.js)
Parser
Compiler
JIT Interpreter
Native Web APIs
(DOM, file storage, etc)
HTML (.html)
Inline JS
JavaScriptRuntime
AST
Byte code
WebAssembly (.wasm)
Compiler

PUBLISHING
COMPONENT MODEL FORMS & VALIDATION
DEPENDENCY INJECTION
AUTO REBUILDUNIT TESTING
JAVASCRIPT INTEROP
SERVER-SIDE RENDERING
DEBUGGING
INTELLISENSE & TOOLING
LAYOUTS
ASSEMBLY TRIMMING
COMPONENT PACKAGES
ROUTING
Blazor

• What it is
• Client Side C#
• Web Standard Technologies
• Mono Runtime for
WebAssembly
• .NET Standard
• What it’s NOT
• A Plugin
• ASP.NET WebForms
• Silverlight
• Trans-piled JavaScript

Browser
Parser
Compiler
JIT Interpreter
Native Web APIs
(DOM, file storage, etc)
JavaScriptRuntime
AST
Byte code
blazor.js
mono.wasm
Bootstrapping HTML
mono.js
netstandard.dll app.dll
Interop layer
Blazor Components (.razor)

• demos.telerik.com/blazor
• Blazor.net
• EdCharbeneau.com
• BlazorPro.com
Resources

Razor into the Razor'verse

More Related Content

What's hot (20)

Similar to Razor into the Razor'verse (20)

More from Ed Charbeneau (17)

Recently uploaded (20)

Razor into the Razor'verse

Editor's Notes