Creating and Running a Simple Web-Form Example

Our first example displays the Web server's time of day in a browser window. When run, this program displays the text A Simple Web Form Example, followed by the Web server's time. As mentioned previously, the program consists of two related filesan ASPX file (Fig. 21.4) and a C# code-behind file (Fig. 21.5). We first display the markup, code and output, then we carefully guide you through the step-by-step process of creating this program. [Note: The markup in Fig. 21.4 and other ASPX file listings in this chapter is the same as the markup that appears in Visual Web Developer, but we have reformatted the markup for presentation purposes to make the code more readable.]

Figure 21.4. ASPX file that displays the Web server's time.

 1 <%-- Fig. 21.4: WebTime.aspx --%>
 2 <%-- A page that displays the current time in a Label. --%>
 3 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="WebTime.aspx.cs" 
 4  Inherits="WebTime" EnableSessionState="False" %>  
 5
 6  "-//W3C//DTD XHTML 1.1//EN"
 7 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 8
 9 

"http://www.w3.org/1999/xhtml"> 10

"server"> 11

A Simple Web Form Example 12 13

14 "form1" runat="server" > 15 16

Current time on the Web server:

17

18 "timeLabel" runat="server" BackColor="Black" 19 Font-Size="XX-Large" ForeColor="Yellow" 20 EnableViewState="False"> 21

22 23 24 25

Figure 21.5. Code-behind file for a page that displays the Web server's time.

(This item is displayed on pages 1058 - 1059 in the print version)

 1 // Fig. 21.5: WebTime.aspx.cs
 2 // Code-behind file for a page that displays the current time.
 3 using System;
 4 using System.Data;
 5 using System.Configuration;
 6 using System.Web;
 7 using System.Web.Security;
 8 using System.Web.UI;
 9 using System.Web.UI.WebControls;
10 using System.Web.UI.WebControls.WebParts;
11 using System.Web.UI.HtmlControls;
12
13 public partial class WebTime : System.Web.UI.Page
14 {
15 // initializes the contents of the page
16 protected void Page_Init( object sender, EventArgs e )
17 {
18 // display the server's current time in timeLabel
19 timeLabel.Text = string.Format( "{0:D2}:{1:D2}:{2:D2}", 
20  DateTime.Now.Hour, DateTime.Now.Minute, DateTime.Now.Second );
21 } // end method Page_Init
22 } // end class WebTime

 

Visual Web Developer generates all the markup shown in Fig. 21.4 when you set the Web page's title, type text in the Web Form, drag a Label onto the Web Form and set the properties of the page's text and the Label. We show these steps shortly.

21.4.1. Examining an ASPX File

The ASPX file contains other information in addition to XHTML. Lines 12 are ASP.NET comments that indicate the figure number, the file name and the purpose of the file. ASP.NET comments begin with <%-- and terminate with --%>. We added these comments to the file. Lines 34 use a Page directive (in an ASPX file a directive is delimited by <%@ and %>) to specify information needed by ASP.NET to process this file. The Language attribute of the Page directive specifies the language of the code-behind file as C#; the code-behind file (i.e., the CodeFile) is WebTime.aspx.cs. Note that a code-behind file name usually consists of the full ASPX file name (e.g., WebTime.aspx) followed by the .cs extension.

The AutoEventWireup attribute (line 3) determines how Web Form events are handled. When AutoEventWireup is set to true, ASP.NET determines which methods in the class are called in response to an event generated by the Page. For example, ASP.NET will call methods Page_Load and Page_Init in the code-behind file to handle the Page's Load and Init events respectivel. (We discuss these events later in the chapter.)

The Inherits attribute (line 4) specifies the class in the code-behind file from which this ASP.NET class inheritsin this case, WebTime. We say more about Inherits momentarily. [Note: We explicitly set the EnableSessionState attribute (line 4) to False. We explain the significance of this attribute later in the chapter. The IDE sometimes generates attribute values (e.g., true and False) and control names (as you will see later in the chapter) that do not adhere to our standard code capitalization conventions (i.e., true and false). However, unlike C# code, ASP.NET markup is not case-sensitive, so using a different case is not problematic. To remain consistent with the code generated by the IDE, we do not modify these values in our code listings or in our accompanying discussions.]

For this first ASPX file, we provide a brief discussion of the XHTML markup. We do not discuss the majority of the XHTML contained in subsequent ASPX files. Lines 67 contain the document type declaration, which specifies the document element name (HTML) and the PUBLIC Uniform Resource Identifier (URI) for the DTD that defines the XHTML vocabulary.

Lines 910 contain the

and start tags, respectively. XHTML documents have the root element html and mark up information about the document in the head element. Also note that the html element specifies the XML namespace of the document using the xmlns attribute (see Section 19.4).

Line 11 sets the title of this Web page. We demonstrate how to set the title through a property in the IDE shortly. Notice the runat attribute in line 10, which is set to "server". This attribute indicates that when a client requests this ASPX file, ASP.NET processes the head element and its nested elements on the server and generates the corresponding XHTML, which is then sent to the client. In this case, the XHTML sent to the client will be identical to the markup in the ASPX file. However, as you will see, ASP.NET can generate complex XHTML markup from simple elements in an ASPX file.

Line 13 contains the

start tag, which begins the body of the XHTML document; the body contains the main content that the browser displays. The form that contains our XHTML text and controls is defined in lines 1423. Again, the runat attribute in the form element indicates that this element executes on the server, which generates equivalent XHTML and sends it to the client. Lines 1522 contain a div element that groups the elements of the form in a block of markup.

Line 16 is an H2 heading element that contains text indicating the purpose of the Web page. As we demonstrate shortly, the IDE generates this element in response to typing text directly in the Web Form and selecting the text as a second-level heading.

Lines 1721 contain a p element to mark up content to be displayed as a paragraph in the browser. Lines 1820 mark up a label Web control. The properties that we set in the Properties window, such as Font-Size and BackColor (i.e., background color), are attributes here. The ID attribute (line 18) assigns a name to the control so that it can be manipulated programmatically in the code-behind file. We set the control's EnableViewState attribute (line 20) to False. We explain the significance of this attribute later in the chapter.

The asp: tag prefix in the declaration of the Label tag (line 18) indicates that the label is an ASP.NET Web control, not an XHTML element. Each Web control maps to a corresponding XHTML element (or group of elements)when processing a Web control on the server, ASP.NET generates XHTML markup that will be sent to the client to represent that control in a Web browser.

Portability Tip 21 1

The same Web control can map to different XHTML elements, depending on the client browser and the Web control's property settings.

 

In this example, the asp:Label control maps to the XHTML span element (i.e., ASP.NET creates a span element to represent this control in the client's Web browser). A span element contains text that is displayed in a Web page. This particular element is used because span elements allow formatting styles to be applied to text. Several of the property values that were applied to our label are represented as part of the style attribute of the span element. You will soon see what the generated span element's markup looks like.

The Web control in this example contains the runat="server" attributevalue pair (line 18), because this control must be processed on the server so that the server can translate the control into XHTML that can be rendered in the client browser. If this attribute pair is not present, the asp:Label element is written as text to the client (i.e., the control is not converted into a span element and does not render properly).

21.4.2. Examining a Code-Behind File

Figure 21.5 presents the code-behind file. Recall that the ASPX file in Fig. 21.4 references this file in line 3.

Line 13 begins the declaration of class WebTime. Recall from Chapter 9 that a class declaration can span multiple source-code files and that the separate portions of the class declaration in each file are known as partial classes. The partial modifier in line 13 of Fig. 21.5 indicates that the code-behind file actually is a partial class. We discuss the remaining portion of this class shortly.

Line 13 indicates that WebTime inherits from class Page in namespace System.Web.UI. This namespace contains classes and controls that assist in building Web-based applications. Class Page provides event handlers and objects necessary for creating Web-based applications. In addition to class Page (from which all Web applications directly or indirectly inherit), System.Web.UI also includes class Controlthe base class that provides common functionality for all Web controls.

Lines 1621 define method Page_Init, which handles the page's Init event. This eventthe first event raised after a page is requestedindicates that the page is ready to be initialized. The only initialization required for this page is setting timeLabel's Text property to the time on the server (i.e., the computer on which this code executes). The statement in lines 1920 retrieves the current time and formats it as HH:MM:SS. For example, 9 AM is formatted as 09:00:00, and 2:30 PM is formatted as 14:30:00. Notice that the code-behind file can access timeLabel (the ID of the Label in the ASPX file) programmatically, even though the file does not contain a declaration for a variable named timeLabel. You will learn why momentarily.

21.4.3. Relationship Between an ASPX File and a Code-Behind File

How are the ASPX and code-behind files used to create the Web page that is sent to the client? First, recall that class WebTime is the base class specified in line 3 of the ASPX file (Fig. 21.4). This class (partially declared in the code-behind file) inherits from Page, which defines the general functionality of a Web page. Partial class WebTime inherits this functionality and defines some of its own (i.e., displaying the current time). The code-behind file contains the code to display the time, whereas the ASPX file contains the code to define the GUI.

When a client requests an ASPX file, ASP.NET creates two classes behind the scenes. Recall that the code-behind file contains a partial class named WebTime. The first file ASP.NET generates is another partial class containing the remainder of class WebTime, based on the markup in the ASPX file. For example, WebTime.aspx contains a Label Web control with ID timeLabel, so the generated partial class would contain a declaration for a Label variable named timeLabel. This partial class might look like

public partial class WebTime
{
 protected System.Web.UI.WebControls.Label timeLabel;
}

 

Note that a Label is a Web control defined in namespace System.Web.UI.WebControls, which contains Web controls for designing a page's user interface. Web controls in this namespace derive from class WebControl. When compiled, the preceding partial class declaration containing Web control declarations combines with the code-behind file's partial class declaration to form the complete WebTime class. This explains why line 19 in method Page_Init of WebTime.aspx.cs (Fig. 21.5) can access timeLabel, which is created in lines 1820 of WebTime.aspx (Fig. 21.4)method Page_Init and control timeLabel are actually members of the same class, but defined in separate partial classes.

The second class generated by ASP.NET is based on the ASPX file that defines the page's visual representation. This new class inherits from class WebTime, which defines the page's logic. The first time the Web page is requested, this class is compiled, and an instance is created. This instance represents our pageit creates the XHTML that is sent to the client. The assembly created from our compiled classes is placed within a subdirectory of

C:WINDOWSMicrosoft.NETFrameworkVersionNumber
 Temporary ASP.NET FilesWebTime

 

where VersionNumber is the version number of the .NET Framework (e.g., v2.0.50215) installed on your computer.

Performance Tip 21 1

Once an instance of the Web page has been created, multiple clients can use it to access the pageno recompilation is necessary. The project will be recompiled only when you modify the application; changes are detected by the runtime environment, and the project is recompiled to reflect the altered content.

 

21.4.4. How the Code in an ASP.NET Web Page Executes

Let's look briefly at how the code for our Web page executes. When an instance of the page is created, the Init event occurs first, invoking method Page_Init. Method Page_Init can contain code needed to initialize objects and other aspects of the page. After Page_Init executes, the Load event occurs, and the Page_Load event handler executes. Although not present in this example, this event is inherited from class Page. You will see examples of the Page_Load event handler later in the chapter. After this event handler finishes executing, the page processes events that are generated by the page's controls, such as user interactions with the GUI. When the Web Form object is ready for garbage collection, an Unload event occurs, which calls the Page_Unload event handler. This event, too, is inherited from class Page. Page_Unload typically contains code that releases resources used by the page.

21.4.5. Examining the XHTML Generated by an ASP.NET Application

Figure 21.6 shows the XHTML generated by ASP.NET when WebTime.aspx (Fig. 21.4) is requested by a client Web browser. To view this XHTML, select View > Source in Internet Explorer. [Note: We added the XHTML comments in lines 12 and reformatted the XHTML to conform to our coding conventions.]

Figure 21.6. XHTML response when the browser requests WebTime.aspx.

(This item is displayed on page 1061 in the print version)

 1 
 2 
 3  "-//W3C//DTD XHTML 1.1//EN"
 4 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
 5
 6 

"http://www.w3.org/1999/xhtml"> 7

8

A Simple Web Form Example 9 10

11 "post" action="WebTime.aspx" id="form1"> 12

13 "hidden" name="__VIEWSTATE" 14 id="__VIEWSTATE" value= 15 "/wEPDwUJODExMDE5NzY5ZGQ4n4mht8D7Eqxn73tM5LDnstPlCg==" /> 16

17 18 19

Current time on the Web server:

20

21 "timeLabel" style="color:Yellow; 22 background-color:Black;font-size:XX-Large;"> 23 17:13:52 24 25

26 27 28 29

The contents of this page are similar to those of the ASPX file. Lines 79 define a document header comparable to that in Fig. 21.4. Lines 1028 define the body of the document. Line 11 begins the form, a mechanism for collecting user information and sending it to the Web server. In this particular program, the user does not submit data to the Web server for processing; however, processing user data is a crucial part of many applications that is facilitated by the form. We demonstrate how to submit data to the server in later examples.

XHTML forms can contain visual and nonvisual components. Visual components include clickable buttons and other GUI components with which users interact. Nonvisual components, called hidden inputs, store data, such as e-mail addresses, that the document author specifies. One of these hidden inputs is defined in lines 1315. We discuss the precise meaning of this hidden input later in the chapter. Attribute method of the form element (line 11) specifies the method by which the Web browser submits the form to the server. The action attribute identifies the name and location of the resource that will be requested when this form is submittedin this case, WebTime.aspx. Recall that the ASPX file's form element contained the runat="server" attributevalue pair (line 14 of Fig. 21.4). When the form is processed on the server, the runat attribute is removed. The method and action attributes are added, and the resulting XHTML form is sent to the client browser.

In the ASPX file, the form's Label (i.e., timeLabel) is a Web control. Here, we are viewing the XHTML created by our application, so the form contains a span element (lines 2124 of Fig. 21.6) to represent the text in the label. In this particular case, ASP.NET maps the Label Web control to an XHTML span element. The formatting options that were specified as properties of timeLabel, such as the font size and color of the text in the Label, are now specified in the style attribute of the span element.

Notice that only those elements in the ASPX file marked with the runat="server" attributevalue pair or specified as Web controls are modified or replaced when the file is processed by the server. The pure XHTML elements, such as the h2 in line 19, are sent to the browser exactly as they appear in the ASPX file.

21.4.6. Building an ASP.NET Web Application

Now that we have presented the ASPX file, the code-behind file and the resulting Web page sent to the Web browser, we outline the process by which we created this application. To build the WebTime application, perform the following steps in Visual Web Developer:

Step 1: Creating the Web Application Project

Select File > New Web Site... to display the New Web Site dialog (Fig. 21.7). In this dialog, select ASP.NET Web Site in the Templates pane. Below this pane, the New Web Site dialog contains two fields with which you can specify the type and location of the Web application you are creating. If it is not already selected, select HTTP from the drop-down list closest to Location. This indicates that the Web application should be configured to run as an IIS application using HTTP (either on your computer or on a remote computer). We want our project to be located in http://localhost, which is the URL for IIS's root directory (this URL corresponds to the C:InetPubwwwroot directory on your machine). The name localhost indicates that the client and server reside on the same machine. If the Web server were located on a different machine, localhost would be replaced with the appropriate IP address or hostname. By default, Visual Web Developer sets the location where the Web site will be created to http://localhost/WebSite, which we change to http://localhost/WebTime.

Figure 21.7. Creating an ASP.NET Web Site in Visual Web Developer.

 

If you do not have access to IIS, you can select File System from the drop-down list next to Location to create the Web application in a folder on your computer. You will be able to test the application using Visual Web Developer's internal ASP.NET Development Server, but you will not be able to access the application remotely over the Internet.

The Language drop-down list in the New Web Site dialog allows you to specify the language (i.e., Visual Basic, Visual C# or Visual J#) in which you will write the code-behind file(s) for the Web application. Change the setting to Visual C#. Click OK to create the Web application project. This action creates the directory C:InetpubwwwrootWebTime and makes it accessible through the URL http://localhost/WebTime. This action also creates a WebTime directory in the Visual Studio 2005/Projects directory of your Windows user's My Documents directory to store the project's solution files (e.g., WebTime.sln).

Step 2: Examining the Solution Explorer of the Newly Created Project

The next several figures describe the new project's content, begining with the Solution Explorer shown in Fig. 21.8. Like Visual C# 2005 Express, Visual Web Developer creates several files when a new project is created. An ASPX file (i.e., Web Form) named Default.aspx is created for each new ASP.NET Web Site project. This file is open by default in the Web Forms Designer in Source mode when the project first loads (we discuss this momentarily). As mentioned previously, a code-behind file is included as part of the project. Visual Web Developer creates a code-behind file named Default.aspx.cs. To open the ASPX file's code-behind file, right click the ASPX file and select View Code or click the View Code button at the top of the Solution Explorer. Alternatively, you can expand the node for the ASPX file to reveal the node for the code-behind file (see Fig. 21.8). You can also choose to list all the files in the project individually (instead of nested) by clicking the Nest Related Files buttonthis option is turned on by default, so clicking the button toggles the option off.

Figure 21.8. Solution Explorer window for project WebTime.

(This item is displayed on page 1064 in the print version)

 

The Properties and Refresh buttons in Visual Web Developer's Solution Explorer behave like those in Visual C# 2005 Express. Visual Web Developer's Solution Explorer also contains three additional buttonsView Designer, Copy Web Site and ASP.NET Configuration. The View Designer button allows you to open the Web Form in Design mode, which we discuss shortly. The Copy Web Site button opens a dialog that allows you to move the files in this project to another location, such as a remote Web server. This is useful if you are developing the application on your local computer, but want to make it available to the public from a different location. Finally, the ASP.NET Configuration button takes you to a Web page called the Web Site Administration Tool, where you can manipulate various settings and security options for your application. We discuss this tool in greater detail in Section 21.8.

Step 3: Examining the Toolbox in Visual Web Developer

Figure 21.9 shows the Toolbox displayed in the IDE when the project loads. Figure 21.9(a) displays the beginning of the Standard list of Web controls, and Fig. 21.9(b) displays the remaining Web controls, as well as the list of Data controls used in ASP.NET. We discuss specific controls in Fig. 21.9 as they are used throughout the chapter. Notice that some controls in the Toolbox are similar to the Windows controls presented earlier in the book.

Figure 21.9. Toolbox in Visual Web Developer.

(a)

(b)

 

Step 4: Examining the Web Forms Designer

Figure 21.10 shows the Web Forms Designer in Source mode, which appears in the center of the IDE. When the project loads for the first time, the Web Forms Designer displays the auto-generated ASPX file (i.e., Default.aspx) in Source mode, which allows you to view and edit the markup that comprises the Web page. The markup listed in Fig. 21.10 was created by the IDE and serves as a template that we will modify shortly. Clicking the Design button in the lower-left corner of the Web Forms Designer switches to Design mode (Fig. 21.11), which allows you to drag and drop controls from the Toolbox on the Web Form. You can also type at the current cursor location to add text to the Web page. We demonstrate this shortly. In response to such actions, the IDE generates the appropriate markup in the ASPX file. Notice that Design mode indicates the XHTML element where the cursor is currently located. Clicking the Source button returns the Web Forms Designer to Source mode, where you can see the generated markup.

Figure 21.10. Source mode of the Web Forms Designer.

 

Figure 21.11. Design mode of the Web Forms Designer.

 

Step 5: Examining the Code-Behind File in the IDE

The next figure (Fig. 21.12) displays Default.aspx.csthe code-behind file generated by Visual Web Developer for Default.aspx. Right click the ASPX file in the Solution Explorer and select View Code to open the code-behind file. When it is first created, this file contains nothing more than a partial class declaration with an empty Page_Load event handler. We will add the Page_Init event handler to this code momentarily.

Figure 21.12. Code-behind file for Default.aspx generated by Visual Web Developer.

 

Step 6: Renaming the ASPX File

We have displayed the contents of the default ASPX and code-behind files. We now rename these files. Right click the ASPX file in the Solution Explorer and select Rename. Enter the new file name WebTime.aspx and press Enter. This updates the name of both the ASPX file and the code-behind file. Note that the CodeFile attribute of WebTime.aspx's Page directive is also updated by the IDE.

Step 7: Renaming the Class in the Code-Behind File and Updating the ASPX File

Although renaming the ASPX file causes the name of the code-behind file to change, this action does not affect the name of the partial class declared in the code-behind file. Open the code-behind file and change the class name from _Default (line 11 in Fig. 21.12) to WebTime, so the partial class declaration appears as in line 13 of Fig. 21.5. Recall that this class is also referenced by the Page directive of the ASPX file. Using the Web Forms Designer's Source mode, modify the Inherits attribute of the Page directive in WebTime.aspx, so it appears as in line 4 of Fig. 21.4. The value of the Inherits attribute and the class name in the code-behind file must be identical; otherwise, you'll get errors when you build the Web application.

Step 8: Changing the Title of the Page

Before designing the content of the Web Form, we change its title from the default Untitled Page (line 9 of Fig. 21.10) to A Simple Web Form Example. To do so, open the ASPX file in Source mode and modify the text between the start and end

tags. Alternatively, you can open the ASPX file in Design mode and modify the Web Form's Title property in the Properties window. To view the Web Form's properties, select DOCUMENT from the drop-down list in the Properties window; DOCUMENT is the name used to represent the Web Form in the Properties window.

Step 9: Designing the Page

Designing a Web Form is as simple as designing a Windows Form. To add controls to the page, you can drag-and-drop them from the Toolbox onto the Web Form in Design mode. Like the Web Form itself, each control is an object that has properties, methods and events. You can set these properties and events visually using the Properties window or programmatically in the code-behind file. However, unlike working with a Windows Form, you can type text directly on a Web Form at the cursor location or insert XHTML elements using menu commands.

Controls and other elements are placed sequentially on a Web Form, much like how text and images are placed in a document using word processing software like Microsoft Word. Controls are placed one after another in the order in which you drag-and-drop them onto the Web Form. The cursor indicates the point at which text and XHTML elements will be inserted. If you want to position a control between existing text or controls, you can drop the control at a specific position within the existing elements. You can also rearrange existing controls using drag-and-drop actions. The positions of controls and other elements are relative to the Web Form's upper-left corner. This type of layout is known as relative positioning.

An alternate type of layout is known as absolute positioning, in which controls are located exactly where they are dropped on the Web Form. You can enable absolute positioning in Design mode by selecting Layout > Position > Auto-position Options...., then clicking the first checkbox in the Positioning options pane of the Options dialog that appears.

Portability Tip 21 2

Absolute positioning is discouraged, because pages designed in this manner may not render correctly on computers with different screen resolutions and font sizes. This could cause absolutely positioned elements to overlap each other or display off-screen, requiring the client to scroll to see the full page content.

 

In this example, we use one piece of text and one Label. To add the text to the Web Form, click the blank Web Form in Design mode and type Currenttime on the Web server:. Visual Web Developer is a WYSIWYG (What You See Is What You Get) editorwhenever you make a change to a Web Form in Design mode, the IDE creates the markup (visible in Source mode) necessary to achieve the desired visual effects seen in Design mode. After adding the text to the Web Form, switch to Source mode. You should see that the IDE added this text to the div element that appears in the ASPX file by default. Back in Design mode, highlight the text you added. From the Block Format dropdown list (see Fig. 21.13), choose Heading 2 to format this text as a heading that will appear bold in a font slightly larger than the default. This action causes the IDE to enclose the newly added text in an h2 element. Finally, click to the right of the text and press the Enter key to move the cursor to a new paragraph. This action generates an empty p element in the ASPX file's markup. The IDE should now look like Fig. 21.13.

Figure 21.13. WebTime.aspx after inserting text and a new paragraph.

(This item is displayed on page 1068 in the print version)

 

You can place a Label on a Web Form either by draging-and-droping or by double clicking the Toolbox's Label control. Be sure the cursor is in the newly created paragraph, then add a Label that will be used to display the time. Using the Properties window, set the (ID) property of the Label to timeLabel. We delete timeLabel's text, because this text is set programmatically in the code-behind file. When a Label does not contain text, the name is displayed in square brackets in the Web Forms Designer (Fig. 21.14), but is not displayed at execution time. The label name is a placeholder for design and layout purposes. We set timeLabel's BackColor, ForeColor and FontSize properties to Black, Yellow and XX-Large, respectively. To change font properties, expand the Font node in the Properties window, then change each relevant property individually. Once the Label's properties are set in the Properties window, Visual Web Developer updates the ASPX file's contents. Figure 21.14 shows the IDE after these properties are set.

Figure 21.14. WebTime.aspx after adding a Label and setting its properties.

(This item is displayed on page 1069 in the print version)

 

Next, set the Label's EnableViewState property to False. Finally, select DOCUMENT from the drop-down list in the Properties window and set the Web Form's EnableSessionState property to False. We discuss both of these properties later in the chapter.

Step 10: Adding Page Logic

Once the user interface has been designed, C# code must be added to the code-behind file. Open WebTime.aspx.cs by double clicking its node in the Solution Explorer. In this example, we add a Page_Init event handler (lines 1621 of Fig. 21.5) to the code-behind file. Recall that Page_Init handles the Init event and contains code to initialize the page. The statement in lines 1920 of Fig. 21.5 programmatically sets the text of timeLabel to the current time on the server.

Step 11: Running the Program

After the Web Form is created, you can view it several ways. First, you can select Debug > Start Without Debugging, which runs the application by opening a browser window. If you created the application on your local IIS server (as we did in this example), the URL shown in the browser will be http://localhost/WebTime/WebTime.aspx (Fig. 21.5), indicating that the Web page (the ASPX file) is located within the virtual directory WebTime on the local IIS Web server. IIS must be running to test the Web site in a browser. IIS can be started by executing inetmgr.exe from Start > Run..., right clicking Default Web Site and selecting Start. [Note: You might need to expand the node representing your computer to display the Default Web Site.]

Note that if you created the ASP.NET application on the local file system, the URL shown in the browser will be http://localhost:PortNumber/WebTime/WebTime.aspx, where PortNumber is the number of the randomly assigned port on which Visual Web Developer's built-in test server runs. The IDE assigns the port number on a per solution basis. This URL indicates that the WebTime project folder is being accessed through the root directory of the test server running at localhost:PortNumber. When you select Debug > Start Without Debugging, a tray icon appears near the bottom-right of your screen next to the computer's date and time to show that the ASP.NET Development Server is running. The server stops when you exit Visual Web Developer.

You also can select Debug > Start Debugging to view the Web page in a Web browser with debugging enabled. Note that you cannot debug a Web site unless debugging is explicitly enabled by the Web.config filea file that stores configuration settings for an ASP.NET Web application. You will rarely need to manually create or modify Web.config. The first time you select Debug > Start Debugging in a project, a dialog appears and asks whether you want the IDE to generate the necessary Web.config file and add it to the project, then the IDE enters Running mode. You can exit Running mode by selecting Debug > Stop Debugging in Visual Web Developer or by closing the browser window that is displaying the Web site.

You also can right click either the Web Forms Designer or the ASPX file name (in the Solution Explorer) and select View In Browser to open a browser window and load the Web page. Right clicking the ASPX file in the Solution Explorer and selecting Browse With... also opens the page in a browser, but first allows you to specify the Web browser that should display the page and its screen resolution.

Finally, you can run your application by opening a browser window and typing the Web page's URL in the Address field. When testing an ASP.NET application on the same computer running IIS, type http://localhost/ProjectFolder/PageName.aspx, where ProjectFolder is the folder in which the page resides (usually the name of the project), and PageName is the name of the ASP.NET page. If your application resides on the local file system, you must first start the ASP.NET Development Server by running the application using one of the methods described above. Then you can type the URL (including the PortNumber found in the test server's tray icon) in the browser to execute the application.

Note that all of these methods of running the application compile the project for you. In fact, ASP.NET compiles your Web page whenever it changes between HTTP requests. For example, suppose you browse the page, then modify the ASPX file or add code to the code-behind file. When you reload the page, ASP.NET recompiles the page on the server before returning the HTTP response to the browser. This important new behavior of ASP.NET 2.0 ensures that the client that requests the page always sees the latest version of the page. You can, however, compile a Web page or an entire Web site by selecting Build Page or Build Site, respectively, from the Build menu in Visual Web Developer.

If you would like to test your Web application over a network, you may need to change your Windows Firewall settings. For security reasons, Windows Firewall does not allow remote access to a Web server on your local computer by default. To change this, open the Windows Firewall utility in the Windows Control Panel. Click the Advanced tab and select your network connection from the Network Connection Settings list, then click Settings.... On the Services tab of the Advanced Settings dialog, ensure that Web Server (HTTP) is checked.