CodeGuru content and product recommendations are editorially independent. We may make money when you click on links to our partners. Learn More.
Introduction
WebMatrix is a light weight tool released by Microsoft to facilitate the development of a website at a rapid pace. If the .NET framework 4.0 is not installed on the machine then the WebMatrix installation will also download and install the .NET framework for you.
You can download the WebMatrix tool from here.
Below are listed the notable features of WebMatrix:
- Rapid development of ASP.NET websites. The reason why I say this is it provides sections like website gallery and site templates. The website gallery constitutes a set of pre-built open source websites by third parties like WordPress, BlogEngine.net, etc. You can simply extend or customize these websites as per your needs. This drastically reduces the development time and effort.
- It supports the development of standalone ASP.NET Web pages which can blend Razor and HTML. Their extension is .cshtml/.vbhtml.
- It provides support, from Development to SEO optimization and Deployment.
- It allows the creating of databases and using them in the websites.
- It can be used side by side with Microsoft Visual Studio IDE.
This tool can facilitate the building of personal websites quicker and easier. It can be very useful for the people who are thriving to step their feet into the ASP.NET development world.
The limitations are:
- You cannot create an .aspx.cs file or write any server side code. I would say this limitation can very well be overcome by using Microsoft Visual Studio for writing the server side code. In the tool there is also a provision to open the website in Microsoft Visual Studio
- No intellisence
The WebMatrix tool includes a development web server called IIS Developer Express. This development web server can host the website dynamically when the run button is clicked. So a developer can see the output of the pages instantly.
The SQL Server Compact Edition, included in the WebMatrix tool, enables database development for websites built using WebMatrix.
Fig 1.0 shows the default landing screen of the WebMatrix tool.
Fig 1.0
Website Options
In this section I will take you through the various options available for creating a website. As you can see in Fig 1.0 there are three options.
- Site From Web Gallery
There are many open source prebuilt websites which are integrated into the Web Gallery. The developer can choose the website from the gallery and it will download the entire website from internet. It can be used as it is or can be customized as required.
The main difficulty while developing a website for ASP.NET developers is to construct the website flow, design the web page and provide a uniform style across the site. This task also consumes most of the development time and effort.
Such a scenario can be overcome by making use of these existing open source websites in the web gallery section. Fig 2.0 shows the list of categorized websites available on the web gallery section.
Fig 2.0 - Site From Template
There are also templates available which you can have as a base for developing the website. Below is the list of templates available with WebMatrix currently.
- Empty Site
- Starter Site
- Bakery
- Link Directory
- Photo Gallery
- SiteFromFolder
In case you need to develop on top of the website which is available on your local file system then you can make use of this option. This option allows you to select the website from a local folder. Fig 3.0 shows the website folder selection popup.
Fig 3.0
Developing a Simple ASP.NET Framework Website
In this section we will develop a simple website from the “Empty Site” template which will also make use of the data from a SQL Server Compact edition database. Before getting into the development check the screenshots in Fig 4.0 and 4.1 for the option available for development of ASP.NET Web Pages and databases.
Fig 4.0
Create a database named MyDatabase.sdf. Now add add a table to MyDatabase and name it as Customer. Fig 4.1 shows the database section of the WebMatrix.
Fig 4.1
Add few sample records to the Customer table. In the website we will create a .cshtml file to our website called FirstWebPage.cshtml. In the web page we will use the combination of Razor and HTML to display the customer list.
Below is the FirstWebPage.cshtml code:
<!DOCTYPE html>
@{
var database = Database.Open("MyDatabase");
var customers = database.Query("SELECT * FROM Customer");
}
<html>
<head>
<title>Customers Page</title>
</head>
<body>
<h1>Your cusomers are listed here:</h1>
<table>
<thead>
<tr style="background-color:Black;Color:White;">
<td style="font-weight:bold">Customer ID
</td>
<td style="font-weight:bold">Name
</td>
<td style="font-weight:bold">Age
</td>
</tr>
</thead>
<tbody>
@foreach(var customer in customers){
<tr style="background-color:Silver">
<td>@customer.CustomerId
</td>
<td>@customer.Name
</td>
<td>@customer.Age
</td>
</tr>
}
</tbody>
<tr>
</tr>
</table>
</body>
</html>
Click on the Run button in WebMatrix. Fig 5.0 shows the output on the browser.
Fig 5.0
Conclusion
I hope this brief article got through the various ASP.NET framework website development aspects available on WebMatrix. Even though the demo site is very basic I trust that it has served the purpose. In my next article I will be covering the Search Engine Optimization and deployment of ASP.NET framework website using WebMatrix. I have attached the source code that we created.
Happy reading! See you in my next article.
