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.
  1. 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