The Razor template markup syntax is used throughout ASP.NET. In the next version of ASP.NET, Core Razor is evolving into multiple Razor adaptations such as Razor Tag Helpers, Razor Pages, Blazor, Blazor & Razor Components. In this session, we'll learn the key differences between theses variations and see where they align in the ASP.NET road map. We’ll make sense of how each concept was introduced and what use cases they fulfill.

3. Ed Charbeneau
my name is
HELLO

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

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

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

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

10. <ul>
<li *ngFor="let p of person">
{{c.name}}
</li>
</ul>
Angular
Compare
<ul>
@foreach (p in people)
{
<li>@p.Name</li>
}
</ul>
Razor

11. @{
var greeting = "Hello";
}
<p>@greeting</p>
@{
greeting = "Howdy";
}
<p>@greeting</p>
IN
Razor Syntax: Code Blocks
<p>Hello</p>
<p>Howdy</p>
Out: HTML

12. <span>@( 5 + 10 + 20 )</span>
IN
Razor Syntax: Complex Expression
<span>35</span>
Out: HTML

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

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

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

16. 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

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

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

19. 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?

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

21. 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

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

23. 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)

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

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

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

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

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

30. 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

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

33. 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

34. MVC vs. Razor Pages

35. @page
@model IndexModel
<h2>Separate page model</h2>
<p>
@Model.Message
</p>
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

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

38. 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

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

40. @(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>

41. 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>

42. 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

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

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

46. 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??

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

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

49. 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

51. 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

52. 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

53. • 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

54. 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)

56. Schedule

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