Your First ASP.NET Application

Start Visual Studio .NET and choose to create a new Visual Basic project using the ASP.NET Web Application project type and name the project WebAppTest. Notice, as shown in Figure 8.1, that the location of the project is an HTTP address, not a directory on the machine. The server to which you connect must have Internet Information Server (IIS) 4.0 or higher. Windows 2000 ships with IIS 5.0, so if your Web server is running Windows 2000, you are fine. Don't forget, however, that IIS does not install, by default, on Windows 2000 Professional. The server must also have the .NET Framework loaded, so you might want to use your local machine as the Web server.

After you click the OK button, VS .NET attempts to communicate with the Web server. Provided this communication is successful, the project is created on the Web server, and you are ready to begin working with the project.

The page will open as a blank form in the designer, with a little descriptive text in the middle. If you look in the Solution Explorer, you will see that this page is named WebForm1.aspx. ASP uses the .asp extension, whereas ASP.NET files use the .aspx extension. ASP and ASP.NET can coexist in the same directory if desired.

If you look at the designer, it is just a blank form right now. The default starting point is for the form to be in GridLayout mode, which means that you can drag and drop controls onto the form and easily position them by using the standard snap-to-grid feature of the designer. There is also a FlowLayout mode that allows you to get absolute positioning by placing the controls exactly where you want. To switch between FlowLayout and GridLayout modes, change the pageLayout property in the Properties window.

Go ahead and switch the pageLayout property to FlowLayout. This mode works like a word processor in some ways. If you click once on the form, you have a cursor blinking in the upper-left corner. Type Welcome to my first ASP.NET page and then press the Enter key. As you can see, the text is placed on the form, just as you would expect in a word processor. Highlight the text and look at the toolbar. There is a drop-down box that says Normal. Drop down this list and choose Heading1. The text enlarges significantly.

Along the bottom of this window are two buttons: Design and HTML. If you click the HTML button, you will be shown the HTML making up the page. Right now, the line that creates the Heading1 is as follows:

<H1>
   Welcome to my first ASP.NET page
</H1>

Now, go back to the Design view by clicking the Design button. Highlight the text again, and click the Center button to center the text (it's the same Center button you're used to seeing in Word). If you switch back to the HTML view, you will see that the earlier Heading1 line has changed to this:

<H1 align="center">
   Welcome to my first ASP.NET page
</H1>

At this point, you might think you have a high-powered HTML editor, not much different from FrontPage or a hundred other HTML editors. Now, however, it is time to see an example of some ASP.NET.

Go back to the Design view and move to the line below the Heading1 line you added. Click on the Toolbox and notice that there is a tab for Web Forms. Click and drag a Label from the Web Forms tab to your form. Next, click and drag a button from the Web Forms tab to the form. You should now have a label and a button next to each other. Both the label and the button have a small green triangle in the upper-left corner.

Double-click on the button and you will open the code window. Notice that this code window creates a file with the same name as the ASPX, but the file has a .vb extension. As you will see, this is called a code-behind page. One of ASP.NET's design goals is to separate the code and the user interface.

In the code window, you will be in the Button1_Click event procedure. Type the following code:

Private Sub Button1_Click(ByVal sender As System.Object, _
 ByVal e As System.EventArgs) Handles Button1.Click
   Label1.Text = "Hello, World!"
End Sub

Notice that you are programming this just as you would a standard Windows application. Go ahead and click the Start button. The page renders in Internet Explorer (hereafter referred to as IE), as shown in Figure 8.2. What is interesting is not what you see in the browser, but the code behind it. On IE's menu bar, select View, Source and you will see the HTML that is making up the page. Examine this HTML (which has some lines shown as two lines so that they fit in this book).

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
   <HEAD>
      <title></title>
      <meta name="GENERATOR" _
         content="Microsoft Visual Studio.NET 7.0">
      <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
      <meta name="vs_defaultClientScript" content="JavaScript">
      <meta name="vs_targetSchema" _
         content="http://schemas.microsoft.com/intellisense/ie5">
   </HEAD>
   <body>
      <form name="Form1" method="post" _
         action="WebForm1.aspx" id="Form1">
<input type="hidden" name="__VIEWSTATE" value="dDw2NjY0NzU4OTc7Oz4=" />

         <H1 align="center">
            Welcome to my first ASP.NET page
         </H1>
         <P>
            <span id="Label1">Label</span>
            <input type="submit" name="Button1" _
               value="Button" id="Button1" />
         </P>
      </form>
   </body>
</HTML>

For now, just notice that there is no VB .NET code here. You created a procedure for the Button1_Click event and typed a line of code. However, none of that has made it to the client. This is because ASP.NET just sends HTML to the client, whereas the code is compiled and lives on the server. That means this page can be used by anyone, using any browser and operating system.

Test the page by clicking the button. You will notice the text Hello, World! now appears in the label. If you select View, Source again, you will notice that the Label1 tag has changed from this:

<span id="Label1">Label</span>

to this:

<span id="Label1">Hello, World!</span>

How did this change? How was the click event handled? The next section covers how ASP.NET processes pages.