ASP.NET Web Pages Syntax

With ASP.NET Web Pages you use Razor syntax. Razor uses a much cleaner syntax than the classic ASP.NET.  Take these two examples and print out the date to the browser.

Classic ASP.NET

<% Response.Write(DateTime.Now.Year); %>

ASP.NET WebPages (With Razor)

@DateTime.Now.Year

As you can see, the Razor syntax is much cleaner and simpler.

Razor Syntax

Code Blocks

Code blocks start with the @ sign and then two curly braces { }, as such:

@{

}

In-line expressions start with @, as such:

@DateTime.Now

With Razor you either use C# or Visual Basic. Microsoft did not create a new language.

You may be wondering that if code blocks start with @, what happens when you write an email address? Well if you wrote something like admin@example.com, Razor is clever enough to know that it is not code and it will be ignored.

Comments

Comments are made with the @ and asterisk and end in the reverse:

@*{

 comment here!

}*@

Escape Character

The escape character is another @ sign, for example:

  <!-- follow me on twitter @thecodingguys -->

Now if you run this you get an error saying "thecodingguys does not exist in the current context". To avoid this, write:

<!-- follow me on twitter @@thecodingguys -->

File / Folder Structure

The folder structure for your website should be like this:

Microsoft WebMatrix Site Structure

This is the recommended way, and here is the purpose of each folder.

App_Code - Contains only C# or VB code files

App_Data - Contains packages (like twitter feed) and your database

bin - Contains assemblies

Content - Contains images and CSS files

Account - Contains membership files (login / register etc). If a user goes to a restricted page which requires a login, they will be redirected to Account/Login, as that's the default location.

Scripts - Contains script files such as JavaScript

Shared - Contains your website layout files

One file which is missing here is the web.config file, which stores the settings for your website such as error pages, authentication, browser cache, compression, etc.

Pages

Razor pages end with either .cshtml or vbhtml (C# or Visual Basic).  They are standard HTML files with server side code.

Create Your First Page

Open up Microsoft WebMatrix and click on templates, select empty site and name it MyFirstSite. The site will be created with a Default.cshtml page; open it up and you will get this mark-up:

@{

}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>My Site's Title</title>
    </head>
    <body>

    </body>
</html>

Between the <body> tag, insert this code:

@DateTime.Now

View the page in the browser and you should get the current date and time.

Summary

  • Code Blocks start with @ and two curly braces: @ { }
  • Comments start with @ and an asterisk and end in reverse: @* { }*@
  • The escape character is two @ symbols: @@
  • Pages either end with .cshtml or vbhtml