Category: Web Development

Razor Views in C# MVC

How C# Code and HTML Coexist Together

Tonight’s study topic is Razor Views in C# MVC 5.

Here are two good resources for this topic.

Paid access to Mosh Hamedani’s Complete ASP.net MVC 5 Course. This is covered in video 16 of his course.

Also helpful, was this YouTube video that is part of a larger MVC tutorial that I really like and refer to often. 

VIDEO: Razor View Syntax

What are Razor Views and What Do They Do?

Specific to C# MVC, Razor Views are code snippets with special syntax made up of C# code and HTML/CSS. The C# logic can interact with and output HTML and CSS elements/attributes dynamically.

With Razor Views, we use the @ symbol to switch between C# code and HTML. 

Video: Razor Views in C# MVC

A simple example of printing numbers from 1 to 10 using Razor.

Sample Code

@for {int i = 1; i <=10; i++)
{
 <b>@i</b>
}

The Output would be: 1 2 3 4 5 6 7 8 9 10
Inside the brackets, Razor sees the <b>@i</b> and knows to render the C# variable i when its proceeded with an @ character then Razor sees the angle brackets and switches back in to HTML parsing mode.

If we didn’t want to use HTML we could change the <b> tag to <text> and output would just be text without the HTML.

The most important thing to understand and remember about Razor Views is the context switching in the parser is based on detection of specific characters.

@ character starts the C# parser but HTML & text won’t parse until Razor see a tag wrapped in angle brackets. We are just switching back and forth between to parsing modes. Make sense?

The loop is C# code but the output is HTML.
In ASP Classic and .Net, the Response Object would handle the HTML output to the browser from inside the loop.

Here are two more examples to help us cement the idea in our brains.

1. A simple date:

@{
   int day = 24;
   int month = 08;
   int year = 2020;
}
Date is @day-@month-@year

Output = Date is 24-08-2020

2. Loop thru images in folder

@for (int i = 1; i <= 5; i++)
{
  <img src="~/Images/@(i).png" />
}

Notice how in the sample above, we put the variable inside the parenthesis. Why, when we didn’t do this for the date example above?

Because if we don’t C# will try and read i. and an object with a property so we have to wrap it in parenthesis. This tell the Razor syntax that we are just trying to concatenate the values.

Razor View Code Blocks

In Razor Views we define code blocks using @{}.

@{
 int SumOfEvenNumbers = 0;
 int SumOfOddNumbers = 0;

 for(int i=1; i<=10; i++)
 {
  if(i %2==0)
  {
    SumOfEvenNumbers = SumOfEvenNumber + 1;
  }
  else
  {
    SumOfOddNumbers = SumOfOddNumbers + 1;
  }
 }
}

<h3>Sum of Even Numbers = @SumOfEvenNumbers</h3>
<h3>Sum of Odd Numbers = @SumOfOddNumbers</h3>

Razor View Comments

Razor View multi-line code comments are very similar to JavaScript and CSS that use the asterisk and forward slash, /*  */, to wrap comments.

Razor View multi-line comments use ampersand and asterisk in same way. @* to start a multi-line comment and *@ to end it. (See code example below)

What’s in the Razor View Example Below?

H2 tag class name is dynamically selected based on  logic, if Model.Customers.Count is greater than 5 then change the CSS class of the H2 element to “popular”.

Also, inside the <ul> tags, Razor View code loops through the list of customers and outputs the name.  

Sample C# Code Example:

@model  Vidly.ViewModels.RandomMovieViewModel
@{
    ViewBag.Title = "Random";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
 
@*
    This is a comment
    on multiple lines

*@
 
@{
    var className = Model.Customers.Count > 5? "popular": null;
}
 
<h2 class="@className">@Model.Movie.Name</h2>
 
@if (Model.Customers.Count == 0)
{
    <text>No one has rented the movie before.</text>
}
 
else
 
{
    <ul>
        @foreach (var cusomter in Model.Customers)
        {
            <li>@cusomter.Name</li>
        }
 
    </ul>
}