WebMatrix Tutorial – Getting Started

In this WebMatrix Tutorial we will look at getting started with using WebMatrix and look at the new ASP.NET Pages coding method.

Introduction to WebMatrix

WebMatrix is a fully integrated development environment for building ASP.NET web apps. Currently developing an ASP.NET web will require using Visual Studio, IIS and SQL Server Management Studio all of which complicated tools in their own right. WebMatrix is Microsoft’s attempt to integrate a coding tool, database development tool and web server admin tool in one simple application for rapid application development.

WebMatrix incorporates several new technologies and tools from Microsoft which should make development faster and more simple. First is IIS Express, Visual Studio ships with an inbuilt  web server which is very convenient for testing during development but it is not 100% compatible with IIS 7 or 7.5 and so issues often arise when running the app in production. IIS Express which is incorporated into WebMatrix is a fully compatible but scaled down version of IIS meaning that developers can safely deploy apps that are only tested using the development environment. SQL Server Compact Edition 4 is the database incorporated into WebMatrix, the major innovation in SQL Server CE 4 is that it does not require any database server to run, you  simply build the tables etc in WebMatrix and just ftp the binaries created and the database will run (even on shared servers without admin privileges). Finally the web coding  itself features a simpler interface and the new lean ASP.NET Web pages  ”Razor” syntax syntax. The Razor syntax allows you to easily embed anywhere code in your page using the @ character and is definitely leaner and quicker to work with that the previous model of strictly separating code and markup (although this may not be as suitable for very large projects).

Getting Started with WebMatrix

Currently WebMatrix is in Beta (although it is still robust for  developing apps) and can be downloaded here. Installation is a simple process (although you will be prompted to download and install Web Platform Installer 3.0 and ASP.NET 4.0 if you do not already have them). On your first run WebMatrix will present you with the below page:

You are presented with four options :

• My Sites – which is the sites you previously used on WebMatrix
• Site From Web Gallery – this is a similar listing of open source web-app projects as provided in the Web Platform Installer. Selecting a project such as Umbraco will install it as well as create and configure any associated databases.
• Site From Template – WebMatrix ships with a limited number of pre-built site templates, none of which are especially useful for any purposes other than training.
• Site From Folder – Allows you to open sites which were not previously opened with WebMatrix.

It isn’t immediately obvious from this list how to create a new site, but click Site From Web Gallery, then select Empty Site and click OK:

You will then be presented with the main WebMatrix development environment:

The main navigation is actually at the bottom left and allows for easy switching between Site (for site-wide configuration and deployment options), Files (for coding the files in the app), Databases (for working with the associated database), and Reports which provides basic reporting tools.

Working With WebMatrix Files

First we will take a look at the Files section. Select Files and then select New File… from the New drop-down menu on the ribbon:

You will then be presented with a listing of types of pages such as html, css and even apsx, but the new page types which are most suitable for WebMatrix development are vbhtml and cshtml (Visual Basic and C# web pages respectively). Select which language you would like to work in and a very basic html page template opens. Coding using the new ASP.NET Pages “Razor” syntax is done by adding code anywhere is a page and simply prefixing it with a @ character, there is no need for any character to close the code section the “Razor” engine does this automatically. For example to add  copyright footer to a page using the below code:

The Razor engine allows almost any mixing of code syntax with html markup, the below sample shows the code iterating through a listing of users with both code and html markup being with the running loop:

Although the Razor engine can intelligently differentiate markup and code, you should where possible ensure that text that is within a {} block is wrapped in a html or XML tag, if there is no appropriate tag you may use the <text> tag:

If you have multiple lines of code, such as setting the values of variables or populating classes you should wrap it in a @{ code } block as below:

So where has the familiar toolbox with the HTML and ASP.NET controls gone? It is has been left out of the current version but may still make an appearance in subsequent versions. For now, you can use the tools instantiated in the code, the below snippet shows a WebGrid (similar to the DataView):

With a nod to the future Microsoft has also included some API’s for social media such as Twitter. For example a Twitter profile can be embedded using the @Twitter.Profile("TwitterName") or a Twitter search can be added using  @Twitter.Search("#searchterm", caption: "#searchterm").

Two big omissions currently are Intellisense and design time error reporting, hopefully these will be added in subsequent releases.

In the Working with Data in WebMatrix Tutorial we will look at working with databases and deploying WebMatrix apps.

Related Posts:

• WebMatrix Tutorial – Working with Data