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:
My First ASP.NET App
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 and tags. Second, the 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.
look at FIGURE 2, you can see that immediately inside the
tag is a tag containing the attribute runat="server". Just before the
tag is the corresponding tag. This defines the area where
the Web server controls can be placed. The Web server controls always begin
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.
are four Web server controls in this example, three
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.
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: