Where to Write Razor Code – WebMatrix and VS

In this chapter you will learn

Where to Write Razor Code?
Visual Studio and WebMatrix Tool
Programming Example

In this chapter you will learn the interface there you can start writing razor code. If you are MVC developer then you can directly use Razor syntax in your project but if you are learner then we advise you to use Microsoft WebMatrix tool.

Advantages of Microsoft WebMatrix tool

It is light weight and freely available at Microsoft site. When I have downloaded WebMatrix 3 it was only 17MB.
Its interface is like Microsoft word but have Intellisense power.
Quickly debug webpages with IIS and generate output in your favorite browser.
It includes IIS Express, ASP.Net and SQL Server Compact.

How to install WebMatrix?

If Visual Studio 12 or earlier version is installed in your PC then you can directly download and install WebMatrix. WebMatrix looks for following prerequisites in your PC.

.NET version
IIS 7.5 or 8 (It doesn’t support IIS10 or later version)

Step 1: Download .Net Framework if you have not installed Visual Studio.

You can download .net from here or search in google for latest version:
Size : Around 50MB
Download Link : https://www.microsoft.com/en-in/download/details.aspx?id=30653

Step 2: Download IIS8 if you don’t installed Visual Studio 2012 or earlier Version.

You can download IIS8 from here or search in google:
Size: Less than 10MB
Download Link : https://www.microsoft.com/en-in/download/details.aspx?id=34679

Step 3: Download Microsoft WebMatrix.

You can download WebMatrix from here or search in google:
Size : Less than 20MB
Download Link : https://www.microsoft.com/web/webmatrix/

Note: If you are running Visual Studio 2015 then WebMatrix wouldn't be installed because it strictly look for IIS7.5 or IIS8. Visual Studio 2015 uses IIS10. So, uninstall IIS10 from control panel and then install IIS8.

Now, we assume your PC is configured with WebMatrix and you are ready to write Razor code.

Step 1: Launch WebMatrix

Step 2: Select New Empty Site

Step 3: Click on Create New File link.

Step 4: Select .CSHTML File. Give the name it index.cshtml and click OK.

Now write the following code inside <body></body> and click Run button which is on Top Left corner of the application.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        @{             
            for(int i=1; i<6; i++)
            {

                <h4>@i Hello Razor. How Are You!</h4>
            }
        }
    </body>
</html>

Output

1 Hello Razor. How Are You!

2 Hello Razor. How Are You!

3 Hello Razor. How Are You!

4 Hello Razor. How Are You!

5 Hello Razor. How Are You!

Note: If you forget to rename the page name as index.cshtml then add page name followed by slash (/) in url.

Example:

Localhost:87876\page.cshtml

How to Write Razor Code with Visual Studio 2015

If you have installed Visual Studio 2015 or you have updated Visual Studio 2012 then you can use these editors for writing Razor Code.

Step 1: Launch Visual Studio 2015

Step 2: Click File New Project

Step 3: Select Web ASP.Net Web Application. Give the name of your Project and click OK.

Step 4: Now select Empty website and click OK. Your project will open Visual Studio Code Editor.

Step 5: Go to Solution Explorer, right click on your project name and select Add New Item

Step 6: Select Web Razor in Left Pane and select WebPage(Razor V3) in Middle pane. Give the name index.cshtml and click Add button.

Now the index.cshtml page is open in visual editor. Write following code to test razor syntax and debug your program.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <body>
        @{             
            for(int i=1; i<6; i++)
            {

                <h4>@i Hello Razor. How Are You!</h4>
            }
        }
    </body>
</html>

Output