asp:StartingLine

Language: VB

Technologies: ASP .NET | Web Server Controls | Event Handling

 

Get Started With ASP.NET

If you're interested in ASP.NET, but don't know where to start, look no further.

 

By Wayne S. Freeze

 

Jumping into ASP.NET can be scary, but it really doesn't need to be. ASP.NET programs are easy to build. If you're familiar with HTML and Visual Basic, developing ASP.NET programs is a snap. In this article, you will start building a simple calculator program. Your challenge will be to complete the program, using the techniques discussed in this article.

 

In order to get started, you're going to need a computer running Windows 2000 Professional or Server or Windows XP Professional. Currently, you cannot develop ASP.NET applications on Windows XP Home because Windows XP Home doesn't have a local Web server. In this article, I will assume you have administrator access to a Windows 2000 Server system with Internet Information Server installed, so you may have to adapt the instructions to your version of Windows.

 

Next, you'll need a copy of the .NET Framework. You can download a copy from http://www.asp.net/download.aspx. There, you'll see two choices for download. The .NET Framework Redistributable is 21 mb in size and contains only the files that are absolutely necessary to run a production ASP.NET Web server. The .NET Framework SDK is 131 mb in size and contains all of the tools necessary to build your own ASP.NET applications, plus all of the documentation and sample programs. If you can afford the download time, you should install the SDK rather than the Redistributable just to get the documentation. (See the end of the article for details about downloading code I'll be using.)

 

Create a Simple Web Page

Once the .NET Framework is installed, you need to create a directory in which you can test your application. Using the Windows Explorer, create a directory named StartingLine under the Web server's root directory. The full path would be c:\inetpub\wwwroot\StartingLine under Windows 2000 Server. This directory will keep your application isolated from any other Web pages you may have installed on your computer.

 

Use a text editor such as Notepad to enter these HTML tags:

 

<html>

<head>

<title>My First ASP.NET App</title>

</head>

<body>

<h1 align="center">My First ASP.NET App</h1>

</body>

</html>

 

Then, save these statements in a file named First-1.aspx in the StartingLine directory you just created. (See the sidebar "ASP.NET Development Tools" for a brief introduction to the various tools you can use to create ASP.NET applications.)

 

You can use this simple Web page to verify that the .NET Framework is installed properly. If you start your Web browser and enter the URL http://localhost/StartingLine/First-1.aspx into the Address box, you should see a display similar to FIGURE 1.

 


FIGURE 1: Here's the output of First-1.aspx. Even though this file contains only simple HTML tags, the file type is aspx, which means it should be processed as an ASP.NET application, not as a simple HTML file.

 

When a Web browser requests an HTML file, the Web server simply returns it to the client. However, when a Web browser requests an aspx file, the Web server passes the request to a program named aspnet_wp.exe (the "wp" stands for worker process). The aspnet_wp.exe program examines its local cache to determine if the file has been compiled previously. If not, aspnet_wp.exe compiles the program and stores it in its local cache. Then aspnet_wp.exe loads and runs the compiled program. The results are returned to the browser in the form of an HTML file.

 

Even though the First-1.aspx program contains only HTML tags, it must be compiled and executed just like any other ASP.NET program. The resulting HTML sent to the Web browser will be identical to the HTML in the original First-1.aspx file.

 

Add Web Server Controls

The next step in your first ASP.NET application is to add some Web server controls that will be used to display information and control the processing of your calculator. Web server controls are similar to the controls used when building a Windows Visual Basic application and represent a high-level way to manipulate data and control processing on a Web page.

 

Web server controls are treated like HTML tags, so you can place them where you would place an equivalent HTML tag. However, Web server controls have some restrictions you must take into consideration. First, Web server controls only work between the <form> and </form> tags. Second, the <form> tag, along with all of the Web server controls requires a special attribute named runat. The runat attribute must have a value of server, which means that the control can be accessed from code running on the server.

 

If you look at FIGURE 2, you can see that immediately inside the <body> tag is a <form> tag containing the attribute runat="server". Just before the </body> tag is the corresponding </form> tag. This defines the area where the Web server controls can be placed. The Web server controls always begin with <asp: and must end with either a separate closing tag (i.e., </asp:TextBox>)or with a forward slash (/) just like before the end of the tag (<asp:TextBox id= "TextBox1" runat= "server" />).

 

<html>

<head>

<title>My First ASP.NET App</title>

</head>

<body>

<form runat="server">

<h1 align="center">My First ASP.NET App</h1>

<asp:TextBox id="First" width="200px" runat="server"/>

<br>

<asp:TextBox id="Second" width="200px" runat="server"/>

<br>

<asp:Button id="AddButton" width="25px" text="+"

runat="server" />

<hr width="200px" align="left">

<asp:TextBox id="Answer" width="200px" runat="server"/>

</form>

</body>

</html>

FIGURE 2: You can add Web server controls to HTML documents the same way you add an ordinary HTML tag.

 

You should enter these tags into a new file named First-2.aspx and save it into the StartingLine directory. If you enter http://localhost/StartingLine/First-2.aspx into your browser, you'll see the results shown in FIGURE 3.

 


FIGURE 3: Running the First-2.aspx displays the text-box controls where the user can enter the values to be added, along with the button control the user can press to add the numbers together. At this point, the user interface is complete, and all that remains is to add the code to add the two numbers together.

 

There are four Web server controls in this example, three <asp:TextBox> controls and one <asp:Button> control. The text-box controls define an area where the user is permitted to enter data. The button control defines a button where the user can click.

 

The first text-box control has a name of First, which was defined using the id tag. The id attribute identifies a Web server control. This value should be unique within the ASP.NET program, so you can access the control from code that runs on the server. The IDs for the other controls are Second and Answer.

 

The width attribute on each of the text-box controls defines their widths. A value of 200px means that the control is 200 pixels wide. This attribute is supported by most Web-server controls as well as many HTML tags.

 

The button control has an ID value of AddButton, plus it introduces a new attribute named text. The text attribute defines the text that will be displayed in the control. In this case, a plus sign (+)will be displayed as the button's caption. You also could use the text attribute with the text-box controls to give each control an initial value.

 

Handle Events

So far, you've built the user interface for your first ASP.NET application. To complete the application, you need to add a little Visual Basic code to perform the arithmetic. Your goal here is this: When someone presses the + button, the two values entered in the First and Second text boxes should be added together with the answer appearing in the Answer text box. To accomplish this feat, you'll need to define an event handler that will be called each time the user clicks the + (plus) button.

 

You create the event handler by modifying the button control's definition on the Web page. Each Web server control supports a collection of events, which you can find in the .NET Framework SDK documentation.

 

You create a Click event handler by using the Web server control's onclick attribute. You set the onclick attribute's value to the name of a Visual Basic subroutine that is included elsewhere in the ASP.NET application. Typically, you will create this name by taking the ID of the control and appending an underscore followed by the name of the event. (If you're using Visual Studio .NET, you don't need to worry about naming the event-handler subroutine because Visual Studio .NET automatically names it and wires it up to the control's event.) Thus, for the Click event of the AddButton control, you might use the name AddButton_Click, which is shown in this code fragment:

 

<asp:Button id="AddButton" width="25px" text="+"

onclick="AddButton_Click" runat="server" />

 

The Visual Basic subroutine is defined inside a server-side script that is delineated using the <script> and </script> tags, which immediately follow the <html> tag at the start of the ASP.NET program (see FIGURE 4). Inside the <script> tag are two attributes. The language attribute defines that this is a Visual Basic application (as opposed to a C# or JScript .NET application), and the runat attribute defines that this script should be run on the server.

 

<html>

<script language="VB" runat="server">

Private Sub AddButton_Click( _

   ByVal sender As System.Object, _

   ByVal e As System.EventArgs)

 

Try

   Answer.Text = CSng(First.Text) + CSng(Second.Text)

 

Catch ex As Exception

   Answer.Text = "Error!"

 

End Try

 

End Sub

</script>

FIGURE 4: The AddButton_Click event adds the numbers entered in the First and Second text boxes and displays the result in the Answer text box.

 

The Click event handler you create must include two parameters, the first of type System.Object, which you can abbreviate to Object; and the second of type System.EventArgs, which you can abbreviate to type EventArgs. The number and data types of the parameters you supply to an event handler are known as its signature and must always match the signature ASP.NET expects, as defined in the .NET Framework SDK documentation for a particular control's event. This is true, whether or not you actually use the parameters that are passed to your handler. The parameters contain information about how the event was called. In this case, the parameters can be ignored.

 

The text boxes return their values as strings. Because it is possible that the text boxes could contain values other than numbers, you can't simply convert the values from the text boxes to numbers and add them. If the conversion fails, the user will get a nasty error message. However, if you put the code to convert inside a Try statement and add the numbers, any errors will cause the statement inside the Catch statement to be executed, and the user will never see those nasty error messages. Instead, you have the freedom to display your own error message, which is much nicer than having the Web page fail.

 

After adding the code from FIGURE 4 and making the change in the button control as described earlier, your first ASP.NET application is ready for testing. After entering a couple of numbers and pressing the AddButton button, you should see a Web page like the one shown in FIGURE 5.

 


FIGURE 5: Pressing the + (plus) button executes the code in the AddButton_Click event, which adds the values in the top two text boxes and displays the results in the bottom text box.

 

Your Assignment

Now that you understand how to build your first ASP.NET application, you should demonstrate your knowledge by making the application more useful. A calculator that only does addition isn't very useful, so you should modify First-3.aspx to include the ability to subtract, multiply, and divide the two numbers. You also should include an equals function that takes the result from the Answer text box and moves it to the First text box, and then clears the Second and Answer text boxes so you can perform another operation.

 

The files referenced in this article are available for download.

 

Wayne S. Freeze is a full-time author of computer books, with more than a dozen titles to his credit. His books include ASP.NET Database Programming Bible (Hungry Minds, 2002), Windows Game Programming with Visual Basic and DirectX (Que, 2001), and Unlocking OLAP with SQL Server and Excel 2000 (Hungry Minds, 2000). He has more than 25 years of experience using all types of computers, from small, embedded microprocessor control systems to large-scale IBM mainframes. Wayne has a master's degree in management-information systems as well as degrees in computer science and engineering. You can visit his Web site at http://www.JustPC.com and send him e-mail at mailto:WFreeze@JustPC.com. He loves reading e-mail from his readers, whose ideas, questions, and insights often provide inspiration for future books and articles.

 

Tell us what you think! Please send any comments about this article to editors@devproconnections.com. Please include the article title and author.

 

ASP.NET Development Tools

There are many ways to create ASP.NET applications. In this article, you'll learn how to use Notepad to create your Web pages. Notepad has a couple of advantages when compared with other ASP.NET development tools. First, Notepad is a small, lightweight program that allows you to edit a file and save it quickly, allowing you to make easy fixes to your existing ASP.NET programs or write small programs such as those found in this article. Second, Notepad will not reformat your code like many other tools, which can change the way your Web pages work. Finally, Notepad is included with Windows, so you can begin developing your ASP.NET programs without spending a dime.

 

Visual Studio .NET comes in several different editions, starting at about $100 for a Visual Basic-only version with limited features, and costing as much as $2,500 for a comprehensive development tool that includes extensive support for database programming and database design. Visual Studio .NET includes features such as IntelliSense, which helps you navigate through the complex .NET class libraries. However, you must pay a price for all these features. At a minimum, you need at least 256 mb of memory to run Visual Studio .NET. You won't really be happy, though, unless you have 512 mb or more of main memory.

 

There are several other tools people use when developing ASP.NET applications. Many people swear by Dreamweaver, and others prefer HomeSite or ColdFusion. However, Microsoft has a new product named ASP.NET Web Matrix that you may find interesting (see Meet the Web Matrix Project in this issue for more details). Web Matrix was a "technical preview" when we went to press, but it's already an outstanding tool. Like Notepad, it's a very small program, meaning it's quick to load. Also, like Notepad, it's free. Web Matrix lacks some of the features of Visual Studio, such as IntelliSense, but it does include many graphical tools that make it easier for you to build your ASP.NET applications.