asp:cover story
Languages: VB | C# | JScript | J#
Technologies: Development Tools | Editors
Meet the Web Matrix Project
Focused. Light. Free.
By Scott Mitchell
Application developers have long enjoyed development tools such as Microsoft's Visual Studio suite, but development tools targeted specifically to ASP and ASP.NET developers have been few and far between. Sure, there have been development tools for HTML designers such as Microsoft's FrontPage and Macromedia's Dreamweaver, but ASP.NET developers creating the back-end code for data-driven Web applications have had to use tools not quite fit for the job. We've either been forced into using glorified text editors such as Visual InterDev, UltraEdit, or HomeSite, or we're using tools such as Visual Studio .NET (VS .NET) to create ASP.NET Web pages, which, in many cases, is akin to killing a flea with a cannonball. Not to mention VS .NET's imposing price tag. If it's your job to do application or Web development, you can justify VS .NET's US$1,000 to US$2,500 price, but if you do ASP.NET development as a hobby in your spare time or simply want to check out what ASP.NET has to offer, purchasing VS .NET might not be an option.
Several months prior to the public release of ASP.NET beta 2, Microsoft's ASP.NET team took it upon itself to create a tool that would be designed specifically for ASP.NET developers with a sensible price tag - free! Furthermore, the ASP.NET team didn't want to restrict this tool or the ability to test ASP.NET Web pages only to those developers using Windows 2000 or XP Professional. That is, the goal was to make this free, ASP.NET-specific editor able to run and "execute" ASP.NET Web pages on any version of Windows 95 or higher. Such a product, reasoned the ASP.NET team, wouldn't only assist the existing ASP.NET developer community, but also would provide the motivation for those interested in jumping into ASP.NET.
This ASP.NET-specific product is called Microsoft ASP.NET Web Matrix Project (or Web Matrix, for short). Formerly known by the code name "Saturn," Web Matrix is freely downloadable from Microsoft's ASP.NET Web site, http://www.asp.net. I wrote this article using an alpha version of Web Matrix; the Technology Preview 1 version should be available by the time you read this. In this article, I'll examine the ins and outs of Web Matrix and some of its most impressive features, and I'll show you how to start building ASP.NET Web applications using this new tool.
Get Started
One of the first things you'll notice when downloading Web Matrix is its small file size. At the time of this writing, the Web Matrix download checked in at a slim 1.05 mb. This incredibly small file downloads quickly and can fit on a single floppy disk - an amazing feat considering Web Matrix's big brother, VS .NET, requires several full CDs. (Please note that you'll need the .NET Framework installed on the computer on which you wish to run Web Matrix.)
Once you've downloaded and installed Web Matrix and have the .NET Framework installed, navigate to the Web Matrix starting folder in the Start Menu (Start | Programs | ASP.NET Web Matrix). Notice there are two applications here - the ASP.NET Web Matrix (the development environment) and ClassBrowser. The class browser is a tool for displaying the .NET Framework classes along with their methods, properties, and constructors.
Although the class browser might seem to be a rehash of existing tools, the Web Matrix editor is anything but. When launching Web Matrix, you're first presented with a modal dialog box to create a new file of a certain type. The types of files you can create include ASP.NET Web pages, ASP.NET user controls, HTML pages, Web Services, classes, stylesheets, Global.asax files, XML files, XML schemas, XSL Transformations, Web.config files, text files, and SQL scripts.
Along with these "blank" file types, you can choose from many template files organized by category. For example, under the Data Pages category, you can create simple data reports, filtered data reports, paged data reports, and generic reports, each of which contains a simple, easy to extend ASP.NET Web page template to get you started creating rich ASP.NET Web pages. (In fact, you can edit the contents of these templates - they're stored in a subfolder under the Web Matrix installation directory.) Other such "quick start" template categories include Mobile Pages, Output Caching, Security, and Web Services.
Build an ASP.NET Web Page
But enough theory - let's get started with Web Matrix by creating a simple ASP.NET Web page that prompts the user to enter their age and calculates the amount of money they would have if their parents had invested $1,000 when they were born (assuming an average annual return rate of 6 percent). Although this might seem like a simple exercise, its purpose is to familiarize yourself with Web Matrix's features.
Begin by creating a new ASP.NET Web page at the default directory; name it ShouldHaveSaved.aspx. Note that you also can select whether to use Visual Basic .NET (the default) or C#. For this page, use Visual Basic .NET.
Once you've created the new page, a window for the ShouldHaveSaved.aspx is created. As you can see from FIGURE 1, this window has four tabs: Design, HTML, Code, and All. The Design tab shows a designer view of the ASP.NET Web page allowing you to drag and drop HTML elements and Web controls from the Toolbox on the left. This design view is strikingly similar to VS .NET's design view, and it allows for true rapid application development (RAD).
FIGURE 1: The Web Matrix ASP.NET Developer
Editor, in designer mode.
The HTML tab displays only the HTML code of the ASP.NET Web page (that is, it hides any code that appears in server-side script blocks on the page). The Code tab displays the code in the server-side script blocks, hiding the tags. Finally, the All tab shows both the code and HTML portions along with a line number. Note that, like VS .NET, the HTML tags are color-coded red and the tag attributes are bright red. In the server-side script blocks, keywords are color-coded blue, while comments are green and strings are purple. FIGURE 2 shows a view of the All tab for the ShouldHaveSaved.aspx file.
FIGURE 2: The All tab shows both code and
HTML content.
Web Matrix encourages the use of server-side script blocks in ASP.NET Web pages instead of VS .NET's code-behind files. Although you can create code-behind pages in Web Matrix by creating class files and ASP.NET Web pages, you must create two separate files and set the CodeBehind Page directive yourself. This requires a bit more work than in VS .NET, where code-behind pages are created automatically.
Now that you've examined the four views, it's time to get started on creating this ASP.NET Web page. Because you're querying the user for their age, clearly you'll need a TextBox Web control within a server-side form on your ASP.NET Web page. Note that when creating a new ASP.NET Web page, Web Matrix provides some default code automatically, namely the , , and HTML tags, along with a server-side form. Therefore, you don't need to worry about creating a server-side form; you simply can navigate to the Design tab and drop a TextBox in between the server-side form tags. From the designer, you can select the TextBox that was just added and set its properties from the Properties window. Set the TextBox's ID to "txtAge" and its MaxLength and Columns properties to 3.
Then type in text that you'd like to appear on the Web page from Design view, such as "What is your age?" placing it in front of the TextBox. Next, add a Button Web control after the TextBox with its ID set to "btnSubmit" and its Text property set to "Submit". Finally, add a Label Web control after the button, setting its ID to "lblResults" and its Text property to a blank string. This Label Web control will contain the user's net worth. This concludes the Web controls and HTML you'll need for your ASP.NET Web page. FIGURE 3 shows Design view complete with all of the required Web controls and HTML content.
FIGURE 3: Web Matrix's Design view supports
drag and drop for true RAD.
At this point, you could (and are encouraged to) add a RequiredFieldValidator control to ensure the user entered a value, and a pair of RangeValidator controls to ensure the user's age entry was between some specified set of values. Adding such Web controls in Design view is as easy as dragging them from the Toolbox and setting a few properties.
Now that you have all the ASP.NET Web controls and HTML code you need, all that remains is to write the code to perform the required computations. Essentially, when the user submits the form (by clicking the Submit button), you'd like to determine how many years the user has been alive and plug that value into a function that computes compound interest. To accomplish this, you need to add an event handler for the Submit button's OnClick event. Adding such an event handler is as simple as moving your mouse over the Submit button in Design view and double-clicking on it. This takes you directly to Code view, displaying this stub of an event handler:
Sub btnSubmit_Click(sender As Object, e As EventArgs)
End Sub
You need to enter only the code necessary to compute the compound interest of $1,000 over a period of years specified by the user's entered age (txtAge.Text). The basic formula to compute the total money possessed after Time years of continuous compounding interest at the specified Rate is:
Total = Principal * eRate * Time
FIGURE 4 shows the complete event handler that implements this formula.
Sub btnSubmit_Click(sender As Object, e As EventArgs)
' Store the user's age as an integer
Dim iAge as Integer
iAge = Convert.ToInt32(txtAge.Text)
' Assume an average annual interest rate of 6%
Const Rate as Double = 0.06
' Assume the user's parents invest $1,000 at the user's birth
Const Principal as Integer = 1000
Dim iTotal as Double
iTotal = Principal * Math.Exp(Rate * iAge)
lblResults.Text = "If your parents had invested $1,000 at " & _
"your birth, you'd have " & iTotal.ToString("C") & " today!"
End Sub
FIGURE 4: This event handler computes the amount of money saved for a person.
That's it for the code. Now that the ASP.NET Web page is complete, you can go ahead and test it. In order to run ASP.NET Web pages prior to Web Matrix, you needed Internet Information Server (IIS) 5.0 or higher installed on your computer. Web Matrix allows you to run ASP.NET Web pages on your Windows 2000 or Windows XP machine using a built-in, lightweight Web server. However, the Web Matrix Web Server can accept incoming requests only from the localhost (IP address 127.0.0.1) so you don't open up your computer to Web server attacks like Code Red while running the Web Matrix Web Server. This limitation also means you can't host a live Web site from your computer using the Web Matrix Web Server. Web Matrix's Web Server is by no means a replacement for IIS - it's simply a small Web server intended for testing ASP.NET Web pages on computers that don't have IIS installed. It is important to note that Web Matrix's Web server can't process ASP.NET Web pages on Windows 9X or Windows NT. You still need Windows 2000 or Windows XP, although Web Matrix's Web server will run on Windows XP Home edition while IIS 6.0 will not.
To test the ShouldHaveSaved.aspx ASP.NET Web page, simply hit [F5] in Web Matrix, or select View | Start. You'll be prompted to select how to view the ASP.NET Web page - if you're on a machine with IIS 5.0 or higher, you can opt to create a new IIS virtual root and view the Web page through IIS. If you don't have IIS (or if you do, but still wish to use the Web Matrix Web Server), choose Start to start the Web Matrix Web Server.
Upon starting the Web Matrix Web Server, a new icon appears in the taskbar. This indicates that the Web Matrix Web Server is running. Once the Web Server starts, Internet Explorer (IE) will be launched and your page will be viewed. Note that the Web Matrix Web Server uses port 8080 by default (you can specify this when launching the Web Matrix Web Server). This ensures you can use the Web Matrix Web Server on a machine running IIS (which uses port 80) and the two won't conflict.
Now that the Web Matrix Web Server has started and the ShouldHaveSaved.aspx has been loaded into IE, go ahead and enter your age and submit the form to see how much money you could have today had your parents tucked away $1,000 when you were born. See FIGURE 5 for a view of what I'd have.
FIGURE 5: Testing ShouldHaveSaved.aspx
through the Web Matrix Web Server.
Code Builders and Add-Ins
Hopefully, you'll agree that Web Matrix isn't simply another glorified text editor - it's a development tool geared directly toward the ASP.NET developer community. The Design view, for example, offers true RAD similar to what's available in VS .NET, but it lacks the glorified text editor class of development tools such as HomeSite and Visual InterDev.
Some of Web Matrix's other impressive features include a Code Builders section in the Toolbox. This section contains short, simple code snippets that you can drag from the Toolbox and drop onto an ASP.NET Web page in the Code or All tabs. For example, the Send Email Message Code Builder (see FIGURE 6), when dropped onto an ASP.NET page, prompts you automatically with a dialog box requesting information on the e-mail message to be sent (the To and From addresses, the Subject, the Mail Format, and the SMTP Server to use). Once you fill in these values and click on OK, Web Matrix creates code to send an e-mail message with the values selected from the dialog box. The Code Builder even leaves a helpful TODO message to remind you to fill in the body of the e-mail:
' Build a MailMessage
Dim mailMessage As System.Web.Mail.MailMessage = _
New System.Web.Mail.MailMessage
mailMessage.From = "[email protected]"
mailMessage.To = "[email protected]"
mailMessage.Subject = "Glad you like Web Matrix!"
mailMessage.BodyFormat = System.Web.Mail.MailFormat.Text
' TODO: Set the mailMessage.Body property
System.Web.Mail.SmtpMail.SmtpServer = "localhost"
System.Web.Mail.SmtpMail.Send(mailMessage)
Web Matrix also provides a means for developers to write their own Web Matrix-enhancing actions, called Add-Ins (these are similar to the Code Builders). You can write classes that hook into Web Matrix's design environment so you can launch them simply by selecting a menu option. When activated, these Add-Ins can prompt the user with a dialog box and auto-generate code, just like the Code Builders. Expect to find an active community of Web Matrix Add-In developers eagerly creating useful Add-Ins to allow developers to tackle many common ASP.NET development tasks quickly.
Web Matrix also contains a My Snippets toolbar. This toolbar serves as a persistent clipboard. If you have a particularly useful code snippet, you can highlight it in the editor and drag it to the "My Snippets" toolbar, where it is saved until you remove it. Then, when you're creating or editing a future ASP.NET Web page that needs to use the same code, you simply can drag the code snippet from the "My Snippets" toolbar into the editor. Additionally, if you have particularly useful code snippets you'd like to share with other developers, you can export your snippets to a file, which can then be imported by other Web Matrix users you send the file to.
Make Remote Web Development Easier
One of the things about Visual Studio and FrontPage that always rubbed me the wrong way was that to create and edit ASP and ASP.NET Web pages on a remote Web server, the Web server was required to have FrontPage Extensions installed. Web Matrix breaks from this model, allowing developers to FTP files directly to and from a target Web server. To connect to a remote Web server via FTP, select Workspace | Add FTP Connection. You'll be prompted for the server to FTP to, its FTP port number, and your username and password. Once you've established an FTP connection, it appears as a folder in your Workspace window, right along with the contents of your computer's hard drive.
But Comparing Web Matrix to VS .NET is a bit like comparing apples to oranges. Clearly VS .NET supports more features and is a more full-featured editor than Web Matrix can ever hope to be. (Recall that Visual Studio has been around for seven versions - Web Matrix is less than a year old!) Evaluating the feature sets of Web Matrix and VS .NET, though, is a bit misleading, because each tool is fit for a different job. Web Matrix is designed for ASP.NET developers. Its feature set is highly tuned to those features ASP.NET developers would benefit from the most.
On the other hand, VS .NET is a monolithic editor, designed for everything from ASP.NET development to building standalone Windows applications. As an owner of VS .NET, I've found myself using Web Matrix for ASP.NET Web page development but sticking with VS .NET for creating my business objects. FIGURE 6 outlines a summary of the differences and similarities between Web Matrix and VS .NET. Although Web Matrix has many useful and cool features, two important features are missing: IntelliSense and debugging support.
|
Features |
Web Matrix |
VS .NET |
|
Ability to create and edit ASP.NET Web pages and Web Services |
Yes |
Yes |
|
RAD by dragging and dropping Web controls onto an ASP.NET Web page |
Yes |
Yes |
|
ASP.NET Web page starter templates |
Yes |
No |
|
FTP support |
Yes |
No |
|
Custom Add-Ins and Code Builders |
Yes |
No |
|
IntelliSense |
No |
Yes |
|
Integrated debugging support |
No |
Yes |
FIGURE 6: Comparing and contrasting Web Matrix and VS .NET features.
Where's the IntelliSense?
If you use VS .NET, you know that whenever you type in an object or class name followed by a period, you expect to see a drop-down list displaying the object's or class's properties, methods, and events. Additionally, when making a call to a class's method, VS .NET provides a small label beneath the cursor showing the expected data types and parameters for the method. These features are referred to as IntelliSense and are extremely useful, especially when programming ASP.NET applications (due to the .NET Framework's multitude of classes, methods, and properties). Developers who have their hands on VS .NET might not find moving to Web Matrix a viable option - although features such as Add-Ins and FTP support are nice, once you get hooked on IntelliSense, it's next to impossible to give it up.
Should Web Matrix provide IntelliSense? I - along with millions of other developers - would like to see it, but don't hold your breath. IntelliSense is a difficult feature to add, one that would greatly increase the code size of Web Matrix (remember, Web Matrix can fit on a single floppy!). Also, it would be a feature that would push back the release date of Web Matrix by many months. Finally, by not providing IntelliSense, Microsoft gives its customers an incentive to upgrade to VS .NET.
Those developers who use VS .NET for ASP.NET development already might have a hard time giving up IntelliSense and opt not to use Web Matrix. Although I miss IntelliSense, I enjoy the many ASP.NET-specific features Web Matrix offers and treasure its lightweight memory requirements (at times, VS .NET seems to bog down my machine considerably). For those of you who have VS .NET, I encourage you to try out Web Matrix; perhaps you'll find it an indispensable development tool as well.
Missing Debugging Support
With ASP classic, developers commonly debugged their ASP.NET applications by littering their code with Response.Write statements to print out the values of certain variables at certain points of the ASP page. With ASP.NET, developers can use modern debugging techniques when debugging their ASP.NET application. These techniques include setting breakpoints, creating watches, and stepping through code. VS .NET makes debugging ASP.NET applications easy - simply set a break point in the ASP.NET Web page, then hit [F5] to view the page through Internet Explorer. When the breakpoint is reached, VS .NET regains focus, and the line with the breakpoint is highlighted. From here you can step through the code and use the various debugging windows to view the values of your variables.
Unfortunately, these ubiquitous debugging capabilities don't exist with Web Matrix. However, you can still debug ASP.NET Web pages (with or without Web Matrix) by using the free GuiDebug tool found at C:\Program Files\Microsoft.Net\FrameworkSDK\GuiDebug\DbgCLR.exe that's part of the .NET Framework SDK.
Until recently, there has been no development tool designed specifically for the needs of the ASP.NET developer community. However, Microsoft met this need Web Matrix. Although Web Matrix doesn't have all the features of VS .NET, it costs nothing and does have some exciting features even VS .NET lacks, such as FTP support and support for add-ins and code builders. If you're looking for a lightweight, easy-to-use development tool designed with you, the ASP.NET developer, in mind, your search has ended. And best of all, your search has led to a free solution that will have an active community built around it.
Speaker, author, and teacher, Scott Mitchell is the editor and founder of 4GuysFromRolla.com, one of the largest ASP resource sites on the Web. He has been avidly using and writing about Active Server Pages since January 1998, including several hundred ASP-related articles on his 4Guys site along with numerous beginner- and advanced-level books on ASP and ASP.NET. E-mail Scott at mailto:[email protected].
Tell us what you think! Please send any comments about this article to [email protected]. Please include the article title and author.
Any developer who's used Visual Studio .NET's Designer knows that although the Designer mode is great for quickly dropping HTML content and Web controls on a page, it can mangle your existing HTML, applying indenting and carriage returns at its own discretion. If you are a developer who detests this Designer behavior, you'll no doubt enjoy Web Matrix's Preview Mode. By selecting Preview Mode (Tools | Preferences | Web Editing) you will be presented with only two views: a Source view, which shows the complete source code of the page, and a Preview view, which shows what the page will look like when rendered in a browser. Absolutely no mangling of HTML occurs when switching between the two views. Note that with Preview mode you can't drag and drop HTML content or Web controls as you can in the Designer mode.
