ASP.NET Programming with Microsoft's ASP.NET Web Matrix - Second Renaissance
(Page 2 of 2 )

The ASP.NET Web Matrix project is an easy to use WYSIWYG application development tool for ASP.NET. It provides support for the creation and manipulation of Access, SQL Server, and MSDE databases, as well as the creation of applications on numerous languages, including VB.NET, C#, and J#. Additionally, you can easily generate data UIs, browse classes for properties, events, methods and associated data attributes, add XML Web Service support, build mobile-Web enabled applications, and allows you to browse ASP.NET forums and newsgroups via a built-in gateway to the ASP.NET community. It even provides a lightweight personal Web server that serves ASP Web content for local requests. Overall, this is a heck of a lot of stuff offered in this deceptively small 1.3MB package. You can download the software from the Web Matrix Project home page, at http://www.asp.net/WebMatrix, or by clicking here.

Before installing the ASP.NET Web Matrix, however, make sure that you have the.NET framework installed on your system. Click here to find out. If you don’t have it installed, you can grab the latest copy and instructions on how to install it from the Microsoft website. As of this writing, the latest version of the .NET Framework is version 1.1

After making sure that you’re up to date, we can begin installing the Web Matrix. Double click on the newly created icon, named WebMatrix.exe (or run the program from the File Download window) to begin the installation. Installing Web Matrix is a pretty straight forward process. Click “Next” in the start splash screen, accept the license agreement then fill out the required information. Keep the defaults during the course of installation.

You are now ready to get started. {mospagebreak title=The Web Matrix} Now that you’ve installed the Web Matrix editor, it’s time to get familiar with the interface and some of its features. Note that because this tutorial focuses on the HTML and ASP page creation aspects of the Web Matrix, I’ll be keeping my explanations geared towards those aspects of the Web Matrix.

Now, when you first fire up your editor, it’ll look like this without the red numbers or picture of the silver 1999 Lamborghini Diablo, that is. The workspace is divided into the following six sections (which is why the red numbers were there):

(1) Menu Bar	Contains the items File, Edit, View, Format, Layout, HTML, Tools, Window, and Help. Each item contains a menu of actions to be performed on the page being built. Of special note is the View menu, which contains the Start action, used to start the Web Matrix personal Web server, which is how you’ll test your applications.
(2) Standard Tool Bar	Allows one-click access to numerous common commands and functions.
(3) Toolbox	Displayed on the left hand side, this panel contains a set of tools and controls used in the creation of a Web application, separated functionally by four tabs: HTML Elements, Web Controls, Custom Controls, and My Snippets. You can drag and drop items from the Toolbox to the designer and visa versa, such as dragging a code fragment from the Document Window to the My Snippets Toolbox tab for later use.
(4) Document Window	This is the big area in the middle where you actually design the page. It has a tabbed interface (bottom). These change depending on which page designer you are using. For this tutorial we’ll only be covering the default setting which includes the following tabs: Design, HTML, Code and All. The Design tab is an editor for the page. It works much like MS Word, so even if you’ve never used any Web publishing software at all, you can still be at least a bit productive right from the start. Stick around until the end of this tutorial and you’ll learn to be even more productive. For those times when you’d rather work with the code, there are the HTML, Code, and All tabs. Click on the HTML tab and you see only the HTML code. Click on the Code tab and you see only the code portion in the language you chose when you started the page. Finally there’s the All tab, which will show you both the HTML and program code.
(5) Workspace Window	This window gives you a view of your file system as well as opens ASP.NET project files. Also allows you ready access to MSDE and SQL Server data stores and gives you the ability to connect these to your project, as well as manipulate data and maintain objects.
6) Properties Window	These settings define the state, behavior, and appearance of an ASP.NET page, document or control. Hey control everything from changing graphical properties to specifying how the page will interact with the user. These fields change according to the needs of a particular property. Note that properties in gray are read-only. You can also use this window to search for and view .NET Assemblies and search for help online.

Alright, now that you know your way around, it’s time to swallow the red pill.{mospagebreak title=Enter The Web Matrix} Before you get started, do your self a favor and stand up. Stretch a little bit. Practice some light Yoga. Go to the kitchen and grab yourself a cup of coffee, juice, or water. Relax for a bit – you deserve it.

Feeling better? Good. 

Now that you’re more relaxed, let’s create a new ASP.NET Web page. Go ahead and open up the application by going to Start -> Programs -> Microsoft ASP.NET Web Matrix -> ASP.NET Web Matrix. If you've already launched the application, then click on the New File icon on the top left hand side of the window, right under the File menu. On the Add New File window that comes up, select the ASP.NET Page. Note the Location setting at the bottom of the window. This is where the project will be housed, so try to make it something specific to the project you’re working on. Let’s call this FirstProject.aspx. Finally, for this example we’ll be using VB.NET, so make sure that the Language is set to Visual Basic .NET. Click OK. 

Make sure that you’re on the Design tab in the Document window. Go ahead and type a message. You can honor of the ancient gods of programming by beginning with the traditional plead for an easy journey: “Hello, World!” As for myself, I’ll forego the rituals and type in the following:

Look, maw! Instant HTML! Too bad it’s all static.

Go ahead and click on the All tab at the bottom of the Document window. You should see the following:

<%@ Page Language="VB" %>
<SCRIPT runat="server">
' Insert page code here
'
</SCRIPT>
 
<FORM runat="server">
Look, maw! Instant HTML! Too bad it's all static. 
<!-- Insert content here --></FORM>

Notice that you didn't have to type any actual code for all of this to appear. That's because like other editors, the Web Matrix will insert all the code needed to make sure that what you see is indeed what you get. Let’s take a glace at what the code means.

<%@ Page Language="VB" %>

This first line is the page directive. Every ASP.NET page will begin with this line, since it specifies which programming language the ASP.NET code section is using. As you can see, we’re using VB.NET. Other choices include C# and J#. 

Between the

<SCRIPT runat="server"> and </SCRIPT> 

tags you have the ASP.NET code. They’re known as HTML controls. When a page is served, the Web server will seek out these HTML controls and execute the code within. What goes on within these tags is what makes most of the magic happen in ASP.NET. I'll give you a few samples to play with in the next section. 

Presuming you’re familiar with HTML, what happens between the and tags should be pretty self explanatory. Every ASP.NET Web page created by the Web Matrix Project will contain the following HTML lines:

 
<FORM runat="server"><!-- Insert content here -->
</FORM> 

To look at the newly created Web page in action, click on View -> Start (you can also press the F5 key) to launch the Web Matrix personal Web server. Click on Start at the bottom of the page. If you’ve already gone ahead of this, then make sure to either stop any previous instances of the Web server or change the Application Port number, since two servers can’t be accessing the same port at the same time.

Congratulations! You’ve just written your first ASP.NET page. Now let’s have a little fun.{mospagebreak title=The Web Matrix Reloaded} Alright, now that we have a page made, let’s start taking a look at some of the features in the Web Matrix. Let's add a picture to the page. Click here to grab a picture of that nice Lamborghini Diablo. You'll need to click on File -> Save in order to save the picture. Make sure you save it in the same directory as your current project.

From the HTML Elements tab in the Toolbox, drag and drop the Image element unto the Design window. You should see a white box with a red X inside. Now, on the Properties window (at the bottom right hand side of the screen), scroll down until you see src. Make sure that the first drop-down menu says <IMG>. If not, then click once on that red X. Next to scr, type in the name of the image (ex.: Diablo.jpg). If you have the picture in a separate directory, say a subdirectory of the project folder, you'll have to type in the relative path (ex.: images/Diablo.jpg). You can control how big or small the image is by adjusting the height and width properties. As you can see, there are a number of other options, but this is enough for you to know a bit about how the Toolbox and Property windows work. Your Web page should now look something like this.

Ok, so we've got this entire HTML thing down - time to add some code. We'll start by erasing the "Look, maw!" line and replacing it with input from the Page_Load event handler. In short, an event handler looks for certain events to occur during the viewing of and interaction with the Web page and then sets in motion a preset action. In this case, the Page_Load event handler is looking for a page to load. After erasing the "Look, maw!" line, click on the Code tab of the Document window and type in the following:

Sub Page_Load(sender as 
Object, e as EventArgs) Response.Write("<B>How much would you have to pay for 
this beautiful car?</B>") End Sub

This will tell the server that as soon as the page is accessed, it should dynamically create the line "How much would you have to pay for this beautiful car?" with the formatting of bold. Test the page by running the Web Matrix personal server. Remember to stop any sessions currently running.

Let's go ahead and calculate how much this car would cost per month. In the Design tab of the Document window, place the cursor under the picture and hit the Enter key a couple of times to create some space. We'll need to turn on glyphs, markers that allow you to view and set up the locations of HTML controls and Web controls. Go to View -> Glyphs in order to view the glyphs. Your screen should look like this.

Now, place the cursor between the Form glyphs and type in the name of the first field, "Value of the Car." Make sure you're in the Web Controls view of the Toolbox and drag and drop the TextBox control next to the name of the field. Over on the Properties window, change the current name of the control's (ID) from TextBox1toautoLoanAmount. We'll need this later on. Repeat these steps two more times, adding in the annual interest rate as well as the auto loan length. The control's IDs should be changed to rate and autoLoanLength, respectively. Your screen should now look like this.

Next you'll need to add a button to activate the calculation sequence. The steps are the pretty much the as before. From the Web Controls view in the Toolbox, drag and drop the Button control under the last TextBox entry. In the Properties window, change the Text property from Button to Figure out Your Monthly Payments. Also change the (ID) field in the Property window to performCalc.

This is getting monotonously easy, isn't it?

Finally, we'll need to add the control which will display our output. The process is, again, pretty much the same. This time, you're dragging the Label control from the Web Controls view of the Toolbox. We'll place it under our button. Clear out the Text property in the Properties window to ensure that nothing is displayed until the user actually performs a calculation. Also, change the (ID) field to display results.

After this has been done, switch to the Code view. Copy and paste in the following code:

Sub 
performCalc_Click(sender As Object, e As EventArgs) 'Specify Constant values 
Const INTEREST_CALCS_PER_YEAR as Integer = 12 Const PAYMENTS_PER_YEAR as Integer 
= 12 'Create variables to hold the values entered by the user Dim P as Double = 
autoLoanAmount.Text Dim r as Double = rate.Text / 100 Dim t as Double = 
autoLoanLength.Text Dim ratePerPeriod as Double ratePerPeriod = 
r/INTEREST_CALCS_PER_YEAR Dim payPeriods as Integer payPeriods = t * 
PAYMENTS_PER_YEAR Dim annualRate as Double annualRate = 
Math.Exp(INTEREST_CALCS_PER_YEAR * Math.Log(1+ratePerPeriod)) - 1 Dim 
intPerPayment as Double intPerPayment = 
(Math.Exp(Math.Log(annualRate+1)/payPeriods) - 1) * payPeriods 'Now, computer 
the total cost of the loadn Dim intPerMonth as Double = intPerPayment / 
PAYMENTS_PER_YEAR Dim costPerMonth as Double costPerMonth = P * 
intPerMonth/(1-Math.Pow(intPerMonth+1,-payPeriods)) 'Now display the results in 
the label Web Control results.Text = "Your mortgage payment per month is $" 
& costPerMonth End Sub 

Press F5 to start up the personal Web server and check out your newly created dynamic Web page. You’re now the proud owner of a page where you can look at a picture of a spectacular car, look at the monthly payments and realize once again why you’re driving a Honda instead. Congratulations!

By the way, your page should now look something like this.

Alright, now that you’re familiar with the way Microsoft’s ASP.NET Web Matrix creates dynamic Web pages, it’s time to take your ASP.NET knowledge to the next level. The best way to do this is by exploring the rest of the articles here at ASPFree. Feel free to copy and paste the code you find in those articles into the All tab in order to see the examples in action. 

Happy coding!

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

Comments On: ASP.NET Programming with Microsoft's ASP.NET Web Matrix

>>> Be the FIRST to comment on this article!