ASP.NET Core 2.0 MVC Razor

Problem

How does ASP.NET Core MVC uses Razor engine to create dynamic views.

Solution

Configure conventional routing, as described in previous post, and add following controller:

Add the two views (Index and Bio) in Views folder:

sln
See Discussion section to go through Razor syntax.

Discussion

ASP.NET Core MVC middleware will find and execute the Razor template (.cshtml file) when the Controller returns ViewResult. Razor templates use syntax that combine C# and HTML to produce the final HTML page.

Discovery Process

When ViewResult executes it searches for the view, using the paths (in this sequence):

  1. Views/[Controller]/[Action].cshtml
  2. Views/Shared/[Action].cshtml

If template filename is different than action name then Controller can return ViewResult and specify this:

Razor Syntax

HTML is rendered unchanged:

html.png

Transition from HTML to C# is via @ symbol. C# code blocks are used with @ { // code }:

transition.png

C# expressions are used with @ symbol:

at.png

or @( // expression ):

at 2.png

C# expressions are HTML encoded, below is HTML output and how browser renders it:

encoding.png

@Html.Raw can be used to avoid encoding, below is HTML output and how browser renders it:

raw.png

Control Structures

You could use various control structures in as a code block too, e.g. @if, @switch, @for, @foreach, @while, @do while and @try. Below are examples for these:

directives.PNG

Directives

Razor views are converted into C# class (behind the scenes) that inherit from RazorPage.  Directives are ways to change the behaviour of these classes or the view engine. The commonly used directives are:

@using

Adds a using directive to generated C# class. Like C#, it’s used to import namespaces.

@model
Type specified will be used as T in RazorPage. Model is supplied from the controller when returning ViewResult. This type can then be access via Model property of the page.

@inject

Used to inject services (registered in service container in Startup). You need to provide the service type and a name (to be used in the view). Dependency injection is views is useful when supplying strongly typed lookup data to views, which otherwise needs dynamic ViewData or ViewBag.

Below is an example of @using, @model and @inject directives:
Create a service:

Configure service in ASP.NET Core service container:

Create a model:

Return model from controller action:

Now you can use the model and service from the view:

Source Code

GitHub: https://github.com/TahirNaushad/Fiver.Mvc.Razor

Leave a Reply