Razor and WebPages – 1 – A New Way to Create Web Applications

In a recent series of posts I described how the new WebMatrix suite of Web components from Microsoft fit in with DotNetNuke (DNN).  But what are WebPages and Razor – and how do we (ASP.NET developers) use them to build Web Applications. 

In this series of articles I will dive deeper into these new technologies.  We will start at the very beginning – Creating your first Website using WebMatrix.

Create Your First WebMatrix Website

I will assume that WebMatrix is installed – if not, you can refer to one of my earlier posts to see how to go about downloading and installing it from the Web Application Gallery.

To create your first Website using WebMatrix, launch WebMatrix and select “Site From Template” from the splash screen.

You will then be presented with a page which provides a number of different site templates (the list of templates included may vary – this list is from the WebMatrix Beta 2).  Choose the “Empty Site” template – and call the site “Hello World”.

You will then be presented with the following view in Web Matrix of your new empty site.

Of course as the site has no content you cannot browse to it yet, so we will create a page in our site, by selecting the Files option (highlighted), which shows the files in our site.

As we created an “Empty Site”, not surprisingly there are no files, so select the New option (highlighted), or click the “Add a file to your site” link in WebMatrix’s content pane.  You will then be presented with a “Gallery” of new file types which can be created.

By default the “CSHTML” file type is selected – accept that option and call the new Web Page “HelloWorld.cshtml”.

That’s it – you have created your new “ASP.NET WebPage” based Website.  I added the HTML in between the body tags, so we can actually see something when we browse to the page.  You can view the page in your browser by clicking on the Run button.  WebMatrix allows you to run the page in a single browser – or you can view the page in all of the browsers installed on your system.

You must make sure that the page you wish to view in the browser is the selected page in the site -   WebMatrix will always attempt to load the select page.

Note that the url in the Browser is "http://localhost:29263/HelloWorld.cshtml”.  This is because we are using IISExpress as our webserver, one of the components that is included in the WebMatrix product suite.

While this article demonstrated how to create a site – the site is not very interesting yet as it just contains static content, and you could have done that with a plain old HTML page. 

The CSHTML file type is a new type of file as it allows you to mix markup (HTML) with code C#.  For those of you who prefer Visual Basic as your language there is also a VBHTML file type which allows you to use Visual Basic for the code part.

In the next article in this series, I will introduce the Razor parser and Razor syntax, and we will create our first Razor WebPage.