ASP.NET WebMatrix Beta 2 - Getting Started
Posted by: Malcolm Sheridan
in Category ASP.NET
Abstract: The following article takes you through the process of enabling routing in your ASP.NET WebMatrix website.
Microsoft has released a new beta 2 version of WebMatrix. WebMatrix is a free, lightweight set of web development tools that provides the easiest way to build websites yet. It includes IIS Developer Express and SQL Server Compact Edition to get you started quickly. In the upcoming weeks I’ll walk you through getting started with WebMatrix and you’ll see how easy it is to create dynamic websites. It is important to remember this is beta software, so compiles can be slow, there’s no intellisense and sometimes WebMatrix crashes. But isn’t that part of the fun?!
Before you begin you need to install it, WebMatrix can be installed easily through the Web Platform Installer. Once the install is finished you’re ready to begin.
Open WebMatrix from your Start menu and choose Site From Template.
WebMatrix comes with a number of default templates, but to get started choose Empty Site and name it Starter.
Once the website has loaded you’ll notice the interface is very different from Visual Studio.
In the bottom left navigation pane there are four options:
Site contains general information about the website, such as the URL and path. Files display all of the files and folders in your website. This is where you’ll spend the majority of your time. Databases allow you to create or connect to an existing database, create table and add data. Reports allow you to run SEO reports for your site.
Choose Files to get started. Out of the box the website is empty. This is good because you don’t need to go through an exercise to delete unnecessary files. Choose Add a file to your site:
This example uses the Razor view engine. The Web Forms view engine is available too, but I like Razor. Choose CSHTML and call the page default.cshtml:
The default.cshtml page will be displayed. Now it’s time to start coding! Start by adding the following code to your page:
<meta charset="utf-8" />
Click Run from the ribbon to start debugging the page:
The website will now run and display Hello World! That’s pretty basic, so let’s add some dynamic content to the page. Because you’re using the Razor view engine, if you’ve been working with ASP.NET MVC 3 Preview 1, you’ll already have a heads up. If not I’d suggest reading my article ASP.NET MVC 3 Preview 1 – Razor Syntax. Everything in Razor begins with the @ character, so to print out the date and time, do this.
<meta charset="utf-8" />
<h2>The date and time is @DateTime.Now</h2>
Here’s the result.
The @ character replaces both of the following syntax:
Immediately you can see the amount of code that is being reduced. One character is replacing many. Everything in the Razor view engine is auto HTML encoded by default, so you could do this safely:
<h2>@("<script>alert('" + @DateTime.Now + "')</script>;")</h2>
Running the website safely prints out the encoded HTML. If you wanted the HTML to not be auto HTML encoded, then the easiest way is to wrap it in an MvcHtmlString object. By doing this you’re letting Razor know that it’s alright to not HTML encode this expression. The above code can be rewritten like this:
<h2>@System.Web.Mvc.MvcHtmlString.Create("<script>alert('" + @DateTime.Now + "');</script>")</h2>
If you wanted to not use the fully qualified name, add a using statement to your page:
@MvcHtmlString.Create("<script>alert('" + @DateTime.Now + "')</script>;")
Running the code now will result in the following error:
This is because the System.Web.Mvc assembly isn’t referenced in the project. Adding the reference is as easy as adding a Web.config file and add the following code:
<compilation debug="false" targetFramework="4.0">
<add assembly="System.Web.Mvc, Version=188.8.131.52, Culture=neutral, PublicKeyToken=31BF3856AD364E35" />
The assembly is now being referenced and you can run the website and the HTML will not be encoded. Be careful because you are responsible for the HTML that is being rendered on the page.
WebMatrix Beta 2 looks promising. This has been an introduction and I’ll be taking you through some more features in upcoming articles.
The entire source code of this article can be downloaded over here