ASP.NET pages, like all Web pages, reside in Web-accessible directories on the Web server. A URL request submitted through the browser retrieves the page for delivery to the client PC. Whereas standard Web pages are simply transmitted back to the requesting browser for immediate display, ASP.NET pages are first intercepted by the server. The ASP.NET processor scans the page for processing scripts. These scripts are run at the server, often resulting in new information being generated and added to the page, appearing among the XHTML code and hard-coded text composing the original page. In other words, the ASP.NET processor builds a new Web page combining the original XHTML code with script-generated information. This revised page is then returned to the requesting browser. The whole purpose is to produce a Web page containing the latest information generated at or available from the server.

Scripts and Server Controls

In order to accomplish server processing, ASP.NET pages are composed of two main sections. The SCRIPT section of a page, normally coded at the top of the page, contains server code to process input data and produce output information. The XHTML section of a page displays the visual results of server processing in the user's browser.

As shown in Figure 2-1, there is direct interaction between the two sections of the page. XHTML code makes a call to the script portion of the page, often times supplying data for processing. The script code processes this and possibly other input data to generate output information. This output is then placed in the XHTML section of the page where it is viewable when the page is returned to the user.

Script Block

Server scripts are encapsulated inside a script block identified by a <script> tag. This tag encloses Visual Basic subprograms and functions that process supplied input data and generate output information. Subprograms are named sections of code containing Visual Basic statements to perform a focused set of processing actions to generate page output; functions are similar code groupings that return a generated data value to its calling statement. Input data can be supplied by the user, extracted from files and databases residing on the server, or generated internally by the script. Output information is available for browser viewing or may be used to update files and databases with new or changed values.

Web Form

The XHTML section of the page contains XHTML code surrounding content for presentation in a browser, much like standard XHTML pages are coded. In addition, the page serves three other primary purposes. It captures data from users as input to server scripts, it makes calls to subprograms and functions to process this and other data, and it displays output results from server processing. These three activities and others take place through a Web Form containing various server controls coded on the page.

Server controls are XHTML-like tags with the special property that they can be directly accessed by server scripts appearing on the page. Server controls are coded much like standard XHTML tags, but with the asp: prefix to identify them as script-accessible XHTML elements. For instance, the <asp:TextBox> server control produces a textbox for data entry resembling that of a standard <input type="text"> XHTML tag. The difference is that the <asp:TextBox> control can be directly referenced by a server script appearing on the same page. The script can use the value entered into the textbox for processing input, or it can target the textbox for script output.

It is common for ASP.NET pages to supply three types of server controls to effect information processing. Data input controls are needed to capture and supply user data for processing; script activation controls are needed to call upon scripts to process the submitted data; information output controls are required to identify areas on the page where script output can appear. Together, server controls interacting with server scripts encapsulate on a single page all the functionality needed to turn Web pages from simple information displays into full-featured information processors.

Implementing Scripts and Controls

The following example is a simple demonstration of how server controls interact with subprograms to produce page output. Enter your name in the textbox and click the button; the entered name is displayed as part of a text message returned from server processing.

The following code implements this application. This listing shows the code for a complete, stand-alone Web page.

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<SCRIPT Runat="Server">

Sub Page_Load
  DateOut.Text = "The current date and time are " & Now & "."
End Sub

Sub Display_Welcome (Src As Object, Args As EventArgs)
  If NameIn.Text <> "" Then
    WelcomeOut.Text = "Welcome, " & NameIn.Text & ", to the world of ASP.NET."
  End If
End Sub

</SCRIPT>

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<body>
<form Runat="Server">

<asp:Label id="DateOut" Runat="Server"/><br/>
<br/>
Enter your first name: <br/>
<asp:TextBox id="NameIn" Runat="Server"/>
<asp:Button Text="Click Me" OnClick="Display_Welcome" Runat="Server"/><br/>
<br/>
<asp:Label id="WelcomeOut" Runat="Server"/>

</form>
</body>
</html>

XHTML Conformance

First, notice that the page conforms to XHTML 1.0 Transitional standards as published by the World Wide Web Consortium (W3C). It includes an XML declaration at the top of the page, along with a Document Type Definition (DTD) to indicate the Transitional conformance standard:

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE html 
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Also, the root element (the opening tag) of the page is an <html> tag indicating the namespace of the applicable standard, that is, the Web location of the XHTML standard being applied to the page:

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

Although these XHTML tags should appear on all Web pages, they do not appear in all examples shown in these tutorials. They are missing from the listings simply to save space and so as not to detract from other coding being discussed. Still, you should include these XHTML prolog sections on all pages that you create.

Control Coding

The body of the page is enclosed inside a Web form identified by the special <form Runat="Server"> tag. This tag indicates the enclosed presence of server controls which are accessible by and interact with the server script.

<form Runat="Server">

<asp:Label id="DateOut" Runat="Server"/><br/>
<br/>
Enter your first name: <br/>
<asp:TextBox id="NameIn" Runat="Server"/>
<asp:Button Text="Click Me" OnClick="Display_Welcome" Runat="Server"/><br/>
<br/>
<asp:Label id="WelcomeOut" Runat="Server"/>

</form>

Besides normal text and XHTML tags, the page includes four server controls. An <asp:Label> control identifies an output area where a subprogram writes the current date and time when the page opens. An <asp:TextBox> control supplies an input area where the user enters a name. An <asp:Button> control calls a subprogram when clicked. A second <asp:Label> control identifies an output area where this subprogram writes its welcome message, integrating the name entered in the textbox. All four controls are script-accessible server controls identified by their asp: prefixes and their inclusion of Runat="Server" attributes.

Script Coding

The script contains two subprograms. The one named Page_Load is run each time there is a URL request for this page. It runs automatically in response to a page's load event, that is, when the page is retrieved from its server directory and loaded into server memory at the start of page processing. The subprogram named Display_Welcome is run on a page's post-back event, that is, when a server control explicitly calls a subprogram and the page is reloaded to run that script. In this example, the subprogram is called when the button is clicked.

The following is a quick synopsis of page processing.

Page Load Event. When this page is first requested and loaded into server memory to begin processing, its Page_Load subprogram is run.

Sub Page_Load
  DateOut.Text = "The current date and time are " & Now & "."
End Sub

The system's current date and time are retrieved through the Visual Basic Now property and written to the <asp:Label id="DateOut"> control so that the date and time appear on the page at the location of the Label control. Then the page is sent to the browser for display, showing the date and time along with the textbox and button coded in the XHTML section of the page.

Page Post-Back Event. After a name is entered into the textbox, the button is clicked. This action again causes the page to be retrieved by the server and the Page_Load subprogram to run. In addition, the Display_Welcome subprogram is run since it is called by the button click.

Sub Page_Load
  DateOut.Text = "The current date and time are " & Now & "."
End Sub

Sub Display_Welcome (Src As Object, Args As EventArgs)
  If NameIn.Text <> "" Then
    WelcomeOut.Text = "Welcome, " & NameIn.Text & ", to the world of ASP.NET."
  End If
End Sub

If the textbox is not empty, the entered name is concatenated (&) inside a text welcome message that is assigned to the <asp:Label id="WelcomeOut"> control. After this processing is completed, the server again returns the page to the requesting browser to display these processing results.

Although you might not understand all the code and its interactions, you can see that an ASP.NET page is not just a static display of the same information each time it is accessed by the browser. Server controls interact with server scripts to produce dynamic, changing output each time the page is displayed. You will notice that each time the button is clicked the date and time are updated and the page displays whatever content has been entered in the textbox.

Events and Handlers

Web page processing takes place through Visual Basic subprograms coded in the script section of the page. Subprograms carry out processing in response to two kinds of events that surround a page. Page events occur during the process of retrieving a page and loading it into server memory. There is, for example, a preInit event that takes place when the server begins its process of loading the page from a server directory; there is a load event that occurs when the page is loaded into server memory; there is an unload event that happens after the page has completed its processing. These and other page events can be occasions for activating specially-named subprograms to support page processing. The Page_PreInit, Page_Load, and Page_Unload subprograms, for example, are so-named to run when their associated events occur. Whether or not you need to include these or other page-event subprograms depends on your processing needs.

Control events occur relative to server controls coded on the page. These events, as well, are occasions to call upon subprograms to carry out page processing. All controls, for instance, have load and unload events that happen as they are loaded into and unloaded from server memory. Most controls also recognize the click event that occurs when the user clicks the mouse button while the cursor is positioned over the control. This is obviously the case with an <asp:Button> control, whose purpose is to capture a click event as a trigger event for calling a subprogram to respond to this user action. Subprograms called by control events are named by the programmer, usually with names suggestive of the processing being performed.

Unlike page events, control events must be explicitly trapped by coding event handlers in the control. These events do not automatically cause subprograms to run as in the case of page events. You will notice in the example <asp:Button> control coded above that it contains an OnClick event handler to explicitly call subprogram Display_Message to write the welcome message to a Label control. Other controls have OnClick event handlers, as well as other handlers, to respond to various user actions surrounding these controls. Again, whether or not you need to trap these events and provide subprograms for them depends on your processing needs.

In this tutorial you have been introduced to the overall organization of an ASP.NET page, along with typical server controls and script processing actions. In the following tutorial you are given an overview of the main script components that appear in the script section of a page; the follow-up tutorial overviews the main control components that appear in the XHTML section of a page. These two tutorials provide the crucial background you will need to write your own ASP.NET pages.