ASP.NET Web Pages - Mixing HTML

This tutorial will cover mixing HTML and Razor. Mixing Razor code with HTML is fairly simple, you just need to know where to place your Razor, HTML and C# code.

  1. In WebMatrix create a new website based of the Starter Site template, and name the new website RazorandHTML.
  2. In the root directory create a new file called basics.cshtml.

We will perform some basic operations with HTML, Razor and C#. As previously mentioned, Razor code blocks start with the @ sign and two curly braces { }. Inline expressions start with just the @ sign.

Example 1 – Printing the date

The entire C# and VB language is available to you. In this example we will print out the date; these are inline expressions.

Today’s date: <b>@DateTime.Now</b><br/>
Tomorrow It will be <i>@DateTime.Now.AddDays(1)</i>
<p>The time is: @DateTime.Now.ToShortTimeString()</p>


Today’s date: 14/06/2013 16:46:26

Tomorrow It will be 15/06/2013 16:46:26

The time is: 16:46

As you can see, it is quite simple to output something like the date. Additionally, inline expressions do not require a semi-colon at the end.

Example 2 – Math Calculations

We will perform some basic math calculations.







At times you might want to perform more complicated calculations.



In this example there are brackets around the calculation that must be done first. This shows that you can still perform complicated calculations with Razor. For more on C# math see the C# tutorial.

When you insert the @ sign it is automatically given a gold background and intellisense will appear, giving you suggestions as you type. In the next examples we will perform tasks with the C# While, If, For and Switch statements.

Decision Statements

Example – If Statement

The following checks if myDate is greater than the system date.

@{DateTime myDate = DateTime.Now.AddHours(-1);/*THIS IS A CODE BLOCK*/}
@if (myDate > DateTime.Now)
 <p>Your date is greater than the current system date, your date is @myDate</p>
<i>Your date is not greater than the system date your date is <b>@myDate</b> and the system date is <mark>@DateTime.Now</mark></i>

When the condition is false the second message shows; here we used <i>, <b> and <mark> tags to show that it is possible to mix any HTML element with Razor. The first line in this code is actually a code block.

Example  – Switch Statements

@switch (consoles.ToLower())
case "ps3":
<p>User has a <i>PS3</i></p>
case "xbox":
<div>User has an XBOX</div>
case "pc":
<b>User has a PC</b>

This is a simple Switch Statement with a variable called consoles (string), and then we simply checked the value of that string. In the Switch Statement expression we forced the values of the variable to be lower-case so we could compare them. As you can see, HTML was used to output the result.


Example – While Statement

<select size="15">
@while (x < 15)

This will output the numbers 1 – 15 in a list box. The <select> tag must be outside of the While Statement; otherwise it will create 15 <select> elements.

Example – For Iteration

<!-- FOR Iteration-->  
@for (int year = 1990; year <= DateTime.Now.Year; year++)

This example prints out the year from 1990 to the current year. It will display the results in a drop-down list.

Example 2 – For Iteration

This example prints out the alphabet, and it uses the HTML special characters.

@for(var a = 65; a <= 90; a++){

The <text> tag is used to clean up the HTML; however it is not an HTML tag. You can find a full list of the HTML special characters at

Example – Foreach Loop

string[] cars = new string[5]{"Audi", "BMW", "Lexus", "Ferrari", "Dodge"};

<!-- FOR LOOPS-->  
@foreach(var car in cars)

In this example you see an array of cars which was declared at the top of the page in the code block. Then the For Loop was created in the HTML <body> tag. It will output the results in an unordered list.


This tutorial addressed how to mix Razor and HTML which is quite simple, and the entire C# language is available to you. It is recommended you practice to familiarize yourself with the syntax.