In this tutorial we will be going over the basics of setting up an ASP.NET website using the Razor syntax. The Razor syntax is built on top of the ASP.NET and is a great place for beginners to start learning ASP.NET and for experts to develop faster. The great part about Razor syntax is that the Razor syntax is based on the C# programming language, and that’s the language that’s used most often with ASP.NET Web Pages. However, the Razor syntax also supports the Visual Basic language, and everything you see you can also do in Visual Basic. Let’s start by creating a website template and get familiar with some of the syntax.

Step 1

We will use Visual Studios 2012 to create our ASP.NET Razor website. Start Visual Studio and in the File menu, click New Web Site. In the New Web Site popup box, select the language to use (We will choose the C# language). Click the ASP.NET Web Site (Razor) template and choose the destination where you will be storing your website project.

razor syntax step 1

Step 2

The template will create all the necessary files for a fully functional website with login authentication and easy to edit content and layout blocks.

razor files

Select the default.cshtml in the Solution Explorer. In the top menu bar select Web Preview button to view the template web page in your web browser. You can now see you new website in action.

Razor Site

The @ Razor Syntax

Razor is easy to spot inside your .cshtml file (which stands for C# html). Here are three common ways Razor Syntax is used:

  • Razor code blocks are enclosed in @{ … }
  • Inline expressions (variables and functions) start with @
  • To hide certain files from being browsed by the user (like the layout and database info pages) place an underscore ( _ ) in the beginning of each page name

Here is an example:

so “<p>The value of myMessage is: @myMessage</p>” will really turn out to be “The value of myMessage is: Hello World”.

Now let’s go into the files and understand some more of the Razor syntax that is used.

Understanding the _SiteLayout.cshtml

Some of the language may seem familiar and strange in the _SiteLayout.cshtml file. A simple way to understand this file is that it holds the outlining framework of your site and you must create separate content pages to inject into this framework. Let’s look at some of the code.

You notice right at the beginning the use of the @{ } and uses the tradition If and Else statement for ASP.NET to make a decision to place the account name or to just place hyperlinks. As you can see, Razor can be very useful in streamlining server side code and html.

Further down the page you will notice two more Razor syntax codes, the @RenderSection() and @RenderBody(). Both are “hooks” where you can place specified content in place of the Razor code. Lets look at the code in the body:

Breaking it down, the @RenderSection is reserved for the section called “featured” and is not always required (hence why it is set to “false”). The @RenderBody() will display all other content in the designated page.

Understanding the Website Pages

Now that you are comfortable with the syntax and the layout, Let’s look at how the content is populated into SiteLayout. At the beginning of every page you create you must reference the SiteLayout file.

This is how ASP.NET knows what layout to use and the Title of your page. In the Default.cshtml, you will notice where the “featured” section content is and what exactly is injected in the @RenderSection(“featured”, required: false) part of the layout. Everything else on this page replaces the @RendyBody() section of the layout.

Wrapping It Up

As you can see, Razor makes it simple to easily replace content blocks into a predefined template. Another helpful feature hidden within the Scripts folder is the use of jQuery and Modernizer which makes this framework work on older browsers that may not support HTML5. For more info and a comprehensive list of Razor syntax visit http://www.w3schools.com/aspnet/razor_intro.asp.