What’s Razor Syntax and Why WebMatrix?

Microsoft wants to provide a simple and light way for students, hobbyist, inline script developers or web developers in general to develop websites fast. They will be able to start webpages from scratch or from some open source templates, such as WordPress or Joomla. WebMatrix is a stack under 50 MB, if you have .Net 4 installed, it will be under 15 MB. And you will get ASP.NET Razor Syntax along with WebMatrix. We want to give people an alternative to develop webpages in a lightweight and low-concept way.

WebMatrix is composed by four parts:

• Web Server (IIS Express): latest IIS server. Non-admin interactive process. It doesn’t require admin rights. And it is same as production.
• Framework Web App: We add Razor Syntax on the top which provides a very fluid way for developments.And there are a lot of simple APIs and Helpers to use.
• Database Engine: SQL Server Compact 4.
• Integrated Tool: WebMatrix tool. There are two scenarios: you could either starting a new application based on open-source template or start from scratch.

Through this tutorial, you will be able to

• Part I: Understand some simple Razor syntax
• Part II: Converting a existing static HTML online website into a dynamic Razor syntax based ASP.Net application

1. Firstly if you don’t have WebMatrix installed, go to download WebMatrix here.

2. After installation, open WebMatrix and you will be able to see this welcome page.

3. Select Site from Template, select Empty Site and type in a name for your site. Click on Okay.

4. Select Files in the left corner of your console and select index.cshtml. CSHtml is a file type that recognize Razor Syntax.

5. Insert @DateTime.now into the file showed as below:
[cc lang=”C#”]






@DateTime.Now


[/cc]
Once we start to write @, WebMatrix will understand that we are going to write C# or VB the next. And meanwhile, it is intelligent enough to know figure out when the code block ends.
6. Click on Run on the top Menu Bar and you will be able to see the running result.

7. Next we will write some logic that mix html syntax and code. Insert code showed below to index.cshtml and you could remove the codes we added at Step 5.
[cc lang=”C#”]

@for(int i=0;i<10;i++){
• @i

}

[/cc]
here, though markup syntax “li” is inside {}, WebMatrix could tell “li”as html instead of code. Still, click Run and you will see all the numbers generated from this loop code block.
8. Now let’s try condition and see how to style these numbers differently. Insert code showed below to index.cshtml.
[cc lang=”C#”]

@for(int i=0;i<10;i++){
• style=”font-weight: bold” } >
  @i

}

[/cc]
Noticed, we use here. This is a special tag used to replace “<” or “>” if you want to put a actual open/close tag for your markup. Click on Run and you will see even number becomes bold.
9. Another short cut I want to introduce is to show how to indicate the rest of line as mark up.
[cc lang=”C#”]

@for(int i=0;i<10;i++){
• style=”font-weight: bold” } >
  @i
  @if(i>5){
  @: This is greater than 5
  }

}

[/cc]
Here you will see after “@:”, the rest is recognized as mark up. Click on Run and you will see the output.
10. Now, I will show you one of helpers that display all the server information. Simply insert code showed as below:
[cc lang=”C#”]
@ServerInfo.GetHtml()
[/cc]
11. You could view the second part of this tutorial here to see how to convert a existing static HTML online website into a dynamic Razor syntax based ASP.Net application.

There are several useful tutorials listed on ASP.NET website:

• Introduction to ASP.NET Web Programming Using the Razor Syntax
• Getting Started with WebMatrix Beta and ASP.NET Web Pages

Related Posts