asp:coverstory

Languages: VB |C# | JScript | J#

Technologies: DevelopmentTools | Editors

Meet theWeb Matrix Project

Focused.Light. Free.

By ScottMitchell

Applicationdevelopers have long enjoyed development tools such as Microsoft's VisualStudio suite, but development tools targeted specifically to ASP and ASP.NETdevelopers have been few and far between. Sure, there have been developmenttools for HTML designers such as Microsoft's FrontPage and Macromedia'sDreamweaver, but ASP.NET developers creating the back-end code for data-drivenWeb applications have had to use tools not quite fit for the job. We've eitherbeen 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 aflea with a cannonball. Not to mention VS .NET's imposing price tag. If it'syour job to do application or Web development, you can justify VS .NET'sUS$1,000 to US$2,500 price, but if you do ASP.NET development as a hobby inyour spare time or simply want to check out what ASP.NET has to offer,purchasing VS .NET might not be an option.

Severalmonths prior to the public release of ASP.NET beta 2, Microsoft's ASP.NET teamtook it upon itself to create a tool that would be designed specifically forASP.NET developers with a sensible price tag - free! Furthermore, the ASP.NETteam didn't want to restrict this tool or the ability to test ASP.NET Web pagesonly to those developers using Windows 2000 or XP Professional. That is, thegoal 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 developercommunity, but also would provide the motivation for those interested injumping into ASP.NET.

ThisASP.NET-specific product is called Microsoft ASP.NET Web Matrix Project (or WebMatrix, for short). Formerly known by the code name "Saturn," Web Matrix isfreely downloadable from Microsoft's ASP.NET Web site, http://www.asp.net. I wrote this article usingan alpha version of Web Matrix; the Technology Preview 1 version should beavailable by the time you read this. In this article, I'll examine the ins andouts of Web Matrix and some of its most impressive features, and I'll show youhow to start building ASP.NET Web applications using this new tool.

Get Started

One ofthe first things you'll notice when downloading Web Matrix is its small filesize. At the time of this writing, the Web Matrix download checked in at a slim1.05 mb. This incredibly small file downloads quickly and can fit on a singlefloppy disk - an amazing feat considering Web Matrix's big brother, VS .NET,requires several full CDs. (Please note that you'll need the .NET Frameworkinstalled on the computer on which you wish to run Web Matrix.)

Onceyou've downloaded and installed Web Matrix and have the .NET Frameworkinstalled, navigate to the Web Matrix starting folder in the Start Menu (Start | Programs | ASP.NET Web Matrix). Notice there are twoapplications here - the ASP.NET Web Matrix (the development environment) and ClassBrowser.The class browser is a tool for displaying the .NET Framework classes alongwith their methods, properties, and constructors.

Althoughthe class browser might seem to be a rehash of existing tools, the Web Matrixeditor is anything but. When launching Web Matrix, you're first presented witha modal dialog box to create a new file of a certain type. The types of filesyou 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.

Alongwith these "blank" file types, you can choose frommany template files organized by category. For example, under the Data Pagescategory, you can create simple data reports, filtered data reports, paged datareports, and generic reports, each of which contains a simple, easy to extendASP.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 asubfolder under the Web Matrix installation directory.) Other such "quick start" template categories include MobilePages, Output Caching, Security, and Web Services.

Build an ASP.NET Web Page

Butenough theory - let's get started with Web Matrix by creating a simple ASP.NETWeb page that prompts the user to enter their age and calculates the amount ofmoney 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 seemlike a simple exercise, its purpose is to familiarize yourself with WebMatrix's features.

Begin bycreating a new ASP.NET Web page at the default directory; name itShouldHaveSaved.aspx. Note that you also can select whether to use Visual Basic.NET (the default) or C#. For this page, use Visual Basic .NET.

Onceyou'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, andAll. The Designtab shows a designer view of the ASP.NET Web page allowing you to drag and dropHTML elements and Web controls from the Toolbox on the left. This design viewis strikingly similar to VS .NET's design view, and it allows for true rapidapplication development (RAD).

FIGURE 1: The Web Matrix ASP.NET DeveloperEditor, in designer mode.

The HTMLtab displays only the HTML code of the ASP.NET Web page (that is, it hides anycode that appears in server-side script blocks on the page). The Code tabdisplays the code in the server-side script blocks, hiding the <scriptlanguage= "VB" runat= "server"> and </script> tags.Finally, the All tab shows both the code and HTML portions along with a linenumber. Note that, like VS .NET, the HTML tags are color-coded red and the tagattributes are bright red. In the server-side script blocks, keywords arecolor-coded blue, while comments are green and strings are purple. FIGURE 2shows a view of the All tab for the ShouldHaveSaved.aspx file.

FIGURE 2: The All tab shows both code andHTML content.

WebMatrix encourages the use of server-side script blocks in ASP.NET Web pagesinstead of VS .NET's code-behind files. Although you can create code-behindpages in Web Matrix by creating class files and ASP.NET Web pages, you mustcreate two separate files and set the CodeBehind Page directiveyourself. This requires a bit more work than in VS .NET, where code-behindpages are created automatically.

Now thatyou've examined the four views, it's time to get started on creating thisASP.NET Web page. Because you're querying the user for their age, clearlyyou'll need a TextBox Web control within a server-side form on yourASP.NET Web page. Note that when creating a new ASP.NET Web page, Web Matrixprovides some default code automatically, namely the <html>, <head>,and <body> HTML tags, along with a server-side form. Therefore,you don't need to worry about creating a server-side form; you simply cannavigate to the Design tab and drop a TextBox in between the server-side formtags. From the designer, you can select the TextBox that was just addedand set its properties from the Properties window. Set the TextBox's IDto "txtAge" and its MaxLength and Columnsproperties to 3.

Thentype in text that you'd like to appear on the Web page from Design view, suchas "What is your age?" placing it in front of the TextBox.Next, add a Button Web control after the TextBox with its IDset to "btnSubmit" and its Text property setto "Submit". Finally, add a Label Webcontrol after the button, setting its ID to "lblResults" and its Text property to ablank 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 andHTML content.

FIGURE 3: Web Matrix's Design view supportsdrag and drop for true RAD.

At thispoint, you could (and are encouraged to) add a RequiredFieldValidatorcontrol to ensure the user entered a value, and a pair of RangeValidatorcontrols to ensure the user's age entry was between some specified set ofvalues. Adding such Web controls in Design view is as easy as dragging themfrom the Toolbox and setting a few properties.

Now thatyou have all the ASP.NET Web controls and HTML code you need, all that remainsis to write the code to perform the required computations. Essentially, whenthe user submits the form (by clicking the Submit button), you'd like to determinehow many years the user has been alive and plug that value into a function thatcomputes compound interest. To accomplish this, you need to add an eventhandler for the Submit button's OnClick event. Adding such an event handler is assimple as moving your mouse over the Submit button in Design view anddouble-clicking on it. This takes you directly to Code view, displaying thisstub of an event handler:

Sub btnSubmit_Click(sender As Object, e As EventArgs)

End Sub

You needto enter only the code necessary to compute the compound interest of $1,000over a period of years specified by the user's entered age (txtAge.Text).The basic formula to compute the total money possessed after Time yearsof continuous compounding interest at the specified Rate is:

Total = Principal * eRate * Time

FIGURE 4 shows the complete event handler that implements thisformula.

Sub btnSubmit_Click(sender As Object, e As EventArgs)

    ' Store the user's ageas an integer

    Dim iAge as Integer

    iAge = Convert.ToInt32(txtAge.Text)

    ' Assume an averageannual interest rate of 6%

    Const Rate as Double = 0.06

    ' Assume the user'sparents 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 parentshad 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'sit for the code. Now that the ASP.NET Web page is complete, you can go aheadand test it. In order to run ASP.NET Web pages prior to Web Matrix, you neededInternet Information Server (IIS) 5.0 or higher installed on your computer. WebMatrix allows you to run ASP.NET Web pages on your Windows 2000 or Windows XPmachine using a built-in, lightweight Web server. However, the Web Matrix WebServer can accept incoming requests only from the localhost (IP address127.0.0.1) so you don't open up your computer to Web server attacks like CodeRed while running the Web Matrix Web Server. This limitation also means youcan'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 asmall Web server intended for testing ASP.NET Web pages on computers that don'thave IIS installed. It is important to note that Web Matrix's Web server can'tprocess ASP.NET Web pages on Windows 9X or Windows NT. You still needWindows 2000 or Windows XP, although Web Matrix's Web server will run onWindows XP Home edition while IIS 6.0 will not.

To testthe 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 amachine with IIS 5.0 or higher, you can opt to create a new IIS virtual rootand view the Web page through IIS. If you don't have IIS (or if you do, butstill wish to use the Web Matrix Web Server), choose Start tostart the Web Matrix Web Server.

Uponstarting the Web Matrix Web Server, a new icon appears in the taskbar. Thisindicates that the Web Matrix Web Server is running. Once the Web Serverstarts, 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 specifythis when launching the Web Matrix Web Server). This ensures you can use theWeb Matrix Web Server on a machine running IIS (which uses port 80) and the twowon't conflict.

Now thatthe Web Matrix Web Server has started and the ShouldHaveSaved.aspx has beenloaded into IE, go ahead and enter your age and submit the form to see how muchmoney you could have today had your parents tucked away $1,000 when you wereborn. See FIGURE 5 for a view of what I'd have.

FIGURE 5: Testing ShouldHaveSaved.aspxthrough 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'sa development tool geared directly toward the ASP.NET developer community. TheDesign 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 asHomeSite and Visual InterDev.

Some ofWeb Matrix's other impressive features include a Code Builders section in theToolbox. This section contains short, simple code snippets that you can dragfrom 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 droppedonto an ASP.NET page, prompts you automatically with a dialog box requestinginformation on the e-mail message to be sent (the To and From addresses, theSubject, the Mail Format, and the SMTP Server to use). Once you fill in thesevalues and click on OK, Web Matrix creates code to send an e-mail message with thevalues selected from the dialog box. The Code Builder even leaves a helpfulTODO message to remind you to fill in the body of the e-mail:

' Build a MailMessage

Dim mailMessageAs System.Web.Mail.MailMessage = _

                          New System.Web.Mail.MailMessage

mailMessage.From= "billg@microsoft.com"

mailMessage.To= "mitchell@4guysfromrolla.com"

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)

WebMatrix also provides a means for developers to write their own WebMatrix-enhancing actions, called Add-Ins (these are similar to the CodeBuilders). You can write classes that hook into Web Matrix's design environmentso you can launch them simply by selecting a menu option. When activated, theseAdd-Ins can prompt the user with a dialog box and auto-generate code, just likethe Code Builders. Expect to find an active community of Web Matrix Add-Indevelopers eagerly creating useful Add-Ins to allow developers to tackle manycommon ASP.NET development tasks quickly.

WebMatrix also contains a My Snippets toolbar. This toolbar serves as a persistentclipboard. If you have a particularly useful code snippet, you can highlight itin the editor and drag it to the "My Snippets"toolbar, where it is saved until you remove it. Then, when you're creating orediting a future ASP.NET Web page that needs to use the same code, you simplycan drag the code snippet from the "My Snippets"toolbar into the editor. Additionally, if you have particularly useful codesnippets you'd like to share with other developers, you can export yoursnippets to a file, which can then be imported by other Web Matrix users yousend the file to.

Make Remote Web Development Easier

One ofthe things about Visual Studio and FrontPage that always rubbed me the wrongway 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 Matrixbreaks from this model, allowing developers to FTP files directly to and from atarget 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 portnumber, and your username and password. Once you've established an FTPconnection, it appears as a folder in your Workspace window, right along withthe contents of your computer's hard drive.

ButComparing 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 thanWeb Matrix can ever hope to be. (Recall that Visual Studio has been around forseven versions - Web Matrix is less than a year old!) Evaluating the featuresets of Web Matrix and VS .NET, though, is a bit misleading, because each toolis fit for a different job. Web Matrix is designed for ASP.NET developers. Itsfeature set is highly tuned to those features ASP.NET developers would benefitfrom the most.

On theother hand, VS .NET is a monolithic editor, designed for everything fromASP.NET development to building standalone Windows applications. As an owner ofVS .NET, I've found myself using Web Matrix for ASP.NET Web page developmentbut sticking with VS .NET for creating my business objects. FIGURE 6 outlines asummary of the differences and similarities between Web Matrix and VS .NET.Although Web Matrix has many useful and cool features, two important featuresare missing: IntelliSense and debugging support.

FIGURE 6:Comparing and contrasting Web Matrix and VS .NET features.

Where's the IntelliSense?

If youuse VS .NET, you know that whenever you type in an object or class namefollowed by a period, you expect to see a drop-down list displaying theobject's or class's properties, methods, and events. Additionally, when makinga call to a class's method, VS .NET provides a small label beneath the cursorshowing the expected data types and parameters for the method. These featuresare referred to as IntelliSense and are extremely useful, especially whenprogramming ASP.NET applications (due to the .NET Framework's multitude ofclasses, methods, and properties). Developers who have their hands on VS .NETmight not find moving to Web Matrix a viable option - although features such asAdd-Ins and FTP support are nice, once you get hooked on IntelliSense, it'snext to impossible to give it up.

ShouldWeb Matrix provide IntelliSense? I - along with millions of other developers -would like to see it, but don't hold your breath. IntelliSense is a difficultfeature 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 featurethat would push back the release date of Web Matrix by many months. Finally, bynot providing IntelliSense, Microsoft gives its customers an incentive toupgrade to VS .NET.

Thosedevelopers who use VS .NET for ASP.NET development already might have a hardtime giving up IntelliSense and opt not to use Web Matrix. Although I missIntelliSense, I enjoy the many ASP.NET-specific features Web Matrix offers andtreasure its lightweight memory requirements (at times, VS .NET seems to bogdown my machine considerably). For those of you who have VS .NET, I encourageyou to try out Web Matrix; perhaps you'll find it an indispensable developmenttool as well.

Missing Debugging Support

With ASPclassic, developers commonly debugged their ASP.NET applications by litteringtheir code with Response.Write statements to print out the values ofcertain variables at certain points of the ASP page. With ASP.NET, developerscan use modern debugging techniques when debugging their ASP.NET application.These techniques include setting breakpoints, creating watches, and steppingthrough code. VS .NET makes debugging ASP.NET applications easy - simply set abreak point in the ASP.NET Web page, then hit [F5] to view the page through InternetExplorer. When the breakpoint is reached, VS .NET regains focus, and the linewith the breakpoint is highlighted. From here you can step through the code anduse 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 thefree GuiDebug tool found at C:\Program Files\Microsoft.Net\FrameworkSDK\GuiDebug\DbgCLR.exethat's part of the .NET Framework SDK.

Untilrecently, there has been no development tool designed specifically for theneeds of the ASP.NET developer community. However, Microsoft met this need WebMatrix. Although Web Matrix doesn't have all the features of VS .NET, it costsnothing and does have some exciting features even VS .NET lacks, such as FTPsupport and support for add-ins and code builders. If you're looking for alightweight, easy-to-use development tool designed with you, the ASP.NETdeveloper, in mind, your search has ended. And best of all, your search has ledto 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 andwriting about Active Server Pages since January 1998, including several hundredASP-related articles on his 4Guys site along with numerous beginner- and advanced-levelbooks on ASP and ASP.NET. E-mail Scott at mailto:mitchell@4guysfromrolla.com.

Tell us what you think! Please send any comments about thisarticle to mailto:feedback@aspnetPRO.com.Please include the article title and author.

No MoreHTML Mangling

Any developer who's used Visual Studio .NET's Designerknows that although the Designer mode is great for quickly dropping HTMLcontent and Web controls on a page, it can mangle your existing HTML, applyingindenting and carriage returns at its own discretion. If you are a developerwho detests this Designer behavior, you'll no doubt enjoy Web Matrix's PreviewMode. 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 Previewview, 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 Webcontrols as you can in the Designer mode.