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>

Output

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.

@(60+10)
@(1500-250)
@(24/6)
@(6*8)

Output

70

1250

4

4

At times you might want to perform more complicated calculations.

@(6*(8+10))

@((48/6)*5)

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.

<!-- IF STATEMENTS-->
@{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>
}else
{
<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 STATEMENTS-->
@switch (consoles.ToLower())
{         
case "ps3":
<p>User has a <i>PS3</i></p>
break;
 
case "xbox":
<div>User has an XBOX</div>
break;
case "pc":
<b>User has a PC</b>
break;
 
default:
<p>Unkown</p>
break;
}

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.

Loops

Example – While Statement

<!-- WHILE STATEMENTS-->  
<select size="15">
@while (x < 15)
        {
        <option>@(x++)</option>
        }
</select>

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-->  
<select>
@for (int year = 1990; year <= DateTime.Now.Year; year++)
        {
        <option>@year</option>
        }
</select>

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++){
     <text>&#@a;</text>
}

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 about.com.

Example – Foreach Loop

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

<!-- FOR LOOPS-->  
<ul>
@foreach(var car in cars)
        {
        <li>@car</li>
        }
</ul>

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.

Summary

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.