Deitel & Associates, Inc. Logo

Back to
digg.png delicious.png blinkit.png furl.png
Visual Basic 2005
How to Program, 3/e

© 2005
pages: ~1500
Amazon logo

This is the fourth in a series of four tutorials that introduces ASP.NET 2.0 and Microsoft's Visual Web Developer Express IDE for building Web applications. The Visual Web Developer Express functionality we discuss is also part of the complete Visual Studio 2005. Both Visual Web Developer Express and Visual Studio 2005 are scheduled to be released in November 2005. This series of tutorials is a small part of Chapter 21, ASP.NET, Web Forms and Web Conrols, from our forthcoming book Visual Basic 2005 How to Program, 3/e. Chapter 21 is part of a four chapter sequence on XML, ADO.NET, ASP.NET and Web Services in which we discuss each of these technologies and demonstrate how to build substantial, data driven Web applications.

Part 1 provided a brief introduction to ASP.NET, Web Forms and Web controls. Part 2 discussed simple HTTP transactions that enable client/server interactions on the Web. Part 3 overviewed multitier application architecture. This part (which consists of several subsections that you can link to at the bottom of this page) presents a simple Web Form example, analyzes its parts, shows how it executes, and discusses how to build and deploy the Web Form. The tutorials in this series are intended for students and professionals who are already familiar with Visual Basic .NET programming. These tutorials are intended for students and professionals who are already familiar with Visual Basic .NET programming.

[Note: This series of tutorials is an excerpt (Sections 21.1-21.4) of Chapter 21, ASP.NET, Web Forms and Web Controls, from our forthcoming textbook Visual Basic 2005 How to Program, 3/e. These tutorials may refer to other chapters or sections of the book that are not included here. Permission Information: Deitel, Harvey M. and Paul J., Visual Basic 2005 How to Program, ©2005. Electronically reproduced by permission of Pearson Education, Inc., Upper Saddle River, New Jersey.]

Part 4 Continued: 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 will 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:\InetPub\wwwroot 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.
Fig. 21.7 Creating an ASP.NET Web Site in Visual Web Developer.

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

Note that 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. Leave the default setting as Visual Basic. Click OK to create the Web application project. This action creates the directory C:\Inetpub\wwwroot\WebTime 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; we begin with the Solution Explorer shown in Fig. 21.8. Like Visual Basic 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.vb. 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 button-this option is turned on by default, so clicking the button toggles the option off.
Fig. 21.8 Solution Explorer window for project WebTime.

Solution Explorer window for project WebTime.

The Properties and Refresh buttons in Visual Web Developer's Solution Explorer behave like those in Visual Basic 2005 Express. Visual Web Developer's Solution Explorer also contains three additional buttons-View 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 will discuss specific controls in Fig. 21.9 as they are used later in the chapter. Note that some controls in the Toolbox are similar to the Windows controls presented earlier in the book.
Fig. 21.9 Toolbox in Visual Web Developer.

Toolbox in Visual Web Developer.

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 soon modify. 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 onto the Web Form. You can also type text at the current cursor location to add text to the Web page. We demonstrate this shortly. Note that Design mode indicates the XHTML element where the cursor is currently located. In response to such actions, the IDE generates the appropriate markup in the ASPX file. Clicking the Source button returns the Web Forms Designer to Source mode, where you can see the generated markup.
Fig. 21.10 Source mode of the Web Forms Designer.

Source mode of the Web Forms Designer.

Fig. 21.11 Design mode of the Web Forms Designer.

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.vb-the code-behind file for Default.aspx. Recall that Visual Web Developer generates this code-behind file when the project is created. 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 an empty partial class declaration. We will add the Page_Init event handler to this code momentarily.   
Fig. 21.12 Code-behind file for Default.aspx generated by Visual Web Developer.

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 and hit Enter. This updates the names of both the ASPX file and the code-behind file. In this example, we use the name WebTime.aspx, so the code-behind file becomes WebTime.aspx.vb. 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 2 in Fig. 21.12) to WebTime, so that the partial class declaration appears as in line 3 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 that 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 remain the same for the application, or else errors will occur when building 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 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 <title> 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 either 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, so this type of layout is known as relative positioning.
In an alternative type of layout known as absolute positioning, controls are located exactly where they are dropped on the Web Form. You can enable absolute positioning by selecting Layout > Position > Auto-position Options...., then clicking the first check box in the Positioning options pane of the Options dialog that appears. However, we recommend using the default layout style-relative positioning-and achieving complex layouts through XHTML tables, as we demonstrate later in the chapter. This is more flexible, as tables can adapt better to different clients' screen and browser configurations.
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.
"ScreenFont" In this example, we use one piece of text and one Label. To add the text to the Web Form, click on the blank Web Form in Design mode and type Current time on the Web server:. Visual Web Developer is a WYSIWYG (What You See Is What You Get) editor-whenever 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, and 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 drop-down 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.
Fig. 21.13 WebTime.aspx after inserting text and a new paragraph.

WebTime.aspx after inserting text and a new paragraph.

You can place a Label on a Web Form either by drag-and-drop 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 runtime. The label name is a placeholder for design and layout purposes. We set timeLabel's BackColor, ForeColor and Font-Size 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.
Fig. 21.14 WebTime.aspx after adding a Label and setting its properties.

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

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 these properties later in the chapter.
Step 10: Adding Page Logic
Once the user interface has been designed, Visual Basic code must be added to the code-behind file. In this example, we add a Page_Init event handler (lines 7-13 of Fig. 21.5) to the code-behind file. Open WebTime.aspx.vb by double clicking its node in the Solution Explorer. To generate an empty Page_Init method, select (Page Events) from the left drop-down list above the code listing, then select the Init event from the right drop-down list. Recall that Page_Init handles the Init event and contains code to initialize the page. Add the statement in lines 11-12 of Fig. 21.5 to programmatically set 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 different 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 have done 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 directory WebTime, which is located in IIS's root directory. IIS must be running to be able 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.]
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 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 debugging a Web site cannot occur unless debugging is explicitly enabled by a Web.config file-a file that stores configuration settings for an ASP.NET Web application. However, 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. The IDE enters Running mode to prevent changes while the Web site is being debugged. 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. This opens a browser window and loads the Web page. This preview shows the user what the page would look like when requested by a client. 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.
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 on 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 tray icon for the test server) 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 any time it changes between HTTP requests. For example, suppose you browse to 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 behavior ensures that you or any other client requesting 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.

Tutorials in This Series:
ASP.NET Tutorial Part 1: Introduction to ASP.NET
ASP.NET Tutorial Part 2: Simple HTTP Transactions
ASP.NET Tutorial Part 3: Multitier Application Architecture
ASP.NET Tutorial Part 4: Creating and Running a Simple Web Form Example

Tutorial Index