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.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 1-2 and reformatted the XHTML to conform to our coding conventions.]
Fig. 21.6
XHTML response when the browser requests WebTime.aspx.
|
|
|
|
3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
|
4 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
|
|
|
6 <html xmlns="http://www.w3.org/1999/xhtml">
|
|
|
8 <title>A Simple Web Form Example</title>
|
|
|
|
|
11 <form method="post" action="WebTime.aspx" id="form1">
|
|
|
13 <input type="hidden" name="__VIEWSTATE"
|
14 id="__VIEWSTATE" value=
|
15 "/wEPDwUJODExMDE5NzY5ZGQ4n4mht8D7Eqxn73tM5LDnstPlCg==" />
|
|
|
|
|
|
|
19 <h2>Current time on the Web server:</h2>
|
|
|
21 <span id="timeLabel" style="color:Yellow;
|
22 background-color:Black;font-size:XX-Large;">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
The contents of this page are similar to those of the ASPX file. Lines 7-9 define a document header comparable to the one in
Fig. 21.4. Lines 10-28 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, doing this is a crucial part of many applications and 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 any data that the document author specifies, such as e-mail addresses. One of these hidden inputs is defined in lines 13-15. 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 submitted; in this case,
WebTime.aspx. Recall that the ASPX file's
form element contained the
runat="server" attribute-value 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 21-24 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.
Note that only those elements in the ASPX file marked with the
runat="server" attribute-value 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. (
Continue to "Building an ASP.NET Web Application".)
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
