Web Matrix is a terrific development tool if you’re new to ASP.NET development. It’s community supported, which is a diplomatic way of saying that it’s not officially supported by Microsoft. Quit complaining – you’re getting a useful little utility absolutely free.

You can download Web Matrix from www.asp.net/webmatrix. The download is little more than a megabyte, but because this is a .NET application, you’ll need to have the .NET runtime installed, otherwise Web Matrix won’t run. Once you’ve got the system installed and running, you should see something like the accompanying screenshot that you can see at the bottom of the page.

Microsoft provides an online test to see if you’ve already got the .NET runtime installed. If you’re running a browser other than Internet Explorer, the results of this test are unreliable. We advise you to switch to Internet Explorer before running the test.

When you first start Web Matrix, you’ll get an empty workspace, but a sample .aspx file has been included in the Chapter4 folder beneath the main install directory. By default, the IDE gets installed into C:\WebMatrix, so look there. The file you want is called ‘FirstWebPage.aspx’.

Understanding the Web Matrix IDE
With the aforementioned file loaded, let’s run through the four tabs you can see at the bottom of the document window. These are marked ‘Design’, ‘HTML’, ‘Code’ and ‘All’. They provide different views of the current .aspx file, which in turn correspond, to the ASP.NET web page you’re working with.

The Design tab will be familiar to you if you’re coming from a WinForms, Delphi or even Visual Basic background. It gives you a preview of what your web page will look like and allows you to add and remove new controls from the page, positioning them as required. Note that you can’t simply drag a control to an arbitrary pixel location – such luxuries are normally reserved for desktop programming.

With a particular control selected on the Design page, you can see a list of available properties for that particular control in the Properties window. If you select the text box on the sample page, you’ll see it has a property called ‘AutoPostBack’. This is a Boolean property that determines whether a postback is automatically sent to the server each time the text in the control is modified. By default, this property is set to ‘false’, because ordinarily you wouldn’t want to postback until the user clicks some OK button to submit a form. The HTML tab shows the static HTML associated with the page. For example, the HTML associated with the text box control is:

 <asp:TextBox id=‘TextBox1’ runat=‘server’> 
 </asp:TextBox> 

Again, we talked about these asp tag extensions last time; they’re used to embed ASP.NET control definitions into HTML code. What the HTML view doesn’t show you is the server-side code associated with each control. To see that, click the Code tab and – in the case of our sample web page – you’ll see a small event handler that looks like this:

 Sub Button1_Click(sender As Object, e As EventArgs)
 Label1.Text = TextBox1.Text
 End Sub 

That looks suspiciously like VB code, right? Indeed it is, but that’s how the sample .aspx file was written. We’ll be looking at how to use C# very soon. For now, just realise that as with desktop RAD-style applications, you can associate event handlers with ASP.NET controls. In this particular case, when the user hits ‘Click me’ on the web page, the above code gets executed, and the text of the label is set to whatever has been typed into the text box control. If you select the button and then click the Events page in the Properties window – this is the small yellow ‘lightning bolt’ icon – you’ll see how the button’s Click event is connected to the Button1_Click handler.

It’s important to emphasise that this code is executed on the server, not on the client. Hence, clicking the button will post the current state of all the controls back to the server, including whatever text happens to be in the text box. At the server end, the Button1_Click handler will then be executed, which will modify the contents of the label caption in this specific case. Finally, the current state of play is returned to the client as HTML, which is then reflects the updated state of play.

Finally, the All tab shows any HTML associated with the page as well as the code view; it’s a bit like pressing the HTML and Code tabs at the same time. Code is shown at the top with HTML below. Using the All tab, this is the first line of text you’ll see in the FirstWebPage.aspx file:

 <%@ Page Language=‘VB’ %> 

As you can see, this specifies that the language used is VB, as we’ve already seen.

Running a simple web page
Okay, so now you know a little about Web Matrix, but how do you try out your shiny new web page once you’ve written it? It should be clear that just as you need a compiler to build a desktop application, you need a web server to actually ‘run’ – for want of a better word – an ASP.NET web page.

The good news is that Web Matrix contains its own built-in webserver called ASP.NET Web Matrix Server. You can run a web page by simply clicking the ‘Start’ icon on the toolbar, or else hit the [F5] hotkey. The first time you do this, Web Matrix will ask what webserver you wish to use, as shown in the screenshot (above, right). The Web Matrix Server is always available, but IIS will only be available if you’re using XP Pro and if you’ve actually installed this optional OS component.

Most of the time, Web Matrix Server will suffice for testing a new web page, but you need to be aware that for security reasons, it won’t respond to remote page requests. In other words, if you’ve got a local network, you won’t be able to access your test website from another machine. If you want to do that, then use IIS.

You’ll only get asked to select your choice of server the first time you click ‘Start’. From then on, Web Matrix will continue to remember your selection. To reset your initial server selection, either shut down Web Matrix Server via the system tray icon, or if you’re using IIS, quit out and restart Web Matrix itself. Once you’ve made your server selection, Web Matrix will start the server, load your .aspx file into it, and then launch the default web browser, pointing it at the wanted page. By default, Web Matrix Server uses port 8080 and you can manually direct a browser at your .aspx file using the appropriate URL. In the case of the FirstWebPage.aspx file, http://localhost:8080/FirstWebPage.aspx will be the URL to use.

Working with C# Next, let’s try to modify the supplied .aspx file so that we’re using C# rather than VB. First, go to the All tab and modify the language descriptor so that it looks like this:

 <%@ Page Language=‘C#’ %> 

While you’re at it, delete the existing Button1_Click routine. If you now save the file and try to run the page, you’ll get a rude error message about unterminated constants. The C# compiler is seeing those two VB-style comment lines and complaining about the syntax. Just change them to look like this:

 // Insert page code here // 

In other words, replace each quote mark with two forward slashes. If you now try running the page once more, you’ll get another error message about the Button1_Click routine being missing. This, of course, is because it’s referenced from the HTML part of the .aspx file. To fix this, simply switch to the Design tab and then double-click the button. This will cause the IDE to generate a new routine, this time in C#. All you need do is fill in the blanks, and you’ll end up with this:

 void Button1_Click(object sender, EventArgs e)
 {
 Label1.Text = TextBox1.Text
 } 

Save the file again, click ‘Start’ and all should now work as advertised. One of the most important goodies in the Web Matrix IDE is the toolbox window. Just as the VS.NET toolbox window is stuffed full of tasty WinForms goodies when programming for the desktop, you’ll find that the Web Matrix equivalent contains a veritable cornucopia of reusable components for Web programming. We’ll be delving into this more next time, but for now take a look at ‘Control freak heaven’ on the previous page for more information on the controls available.

While you’re waiting, here’s a quick tip for getting started in the ASP.NET community and finding answers to your technical questions. There are a set of online support forums directly accessible from the Web Matrix IDE. Just go to the Help menu and click on ‘ASP.NET Forums’. This will take you to the ASP.NET forums which you can also access via a browser at http://forums.asp.net/.

Most of these forums are not specific to Web Matrix but cover the whole spectrum of ASP.NET activity. As a consequence, they’re very active – over 500 users and guests online as I write! – and there’s a huge amount of help and support to be had here, especially when you’re starting out. Don’t be intimidated by the number of forums available; if you scroll about two thirds of the way down the page, you’ll find a couple of forums specific to Web Matrix – one general discussion forum and another for reporting bugs. I would also strongly recommend that you check out the ‘Getting Started’ forum – near the top of the page – which is intended for ASP.NET novices.