The most proficient developers are those who possess an intimate understanding of the platforms they program and the tools they use to program them. Because it’s difficult to understand how Web forms work if you lack a more general understanding of Web applications and the protocols that drive them, the next several sections provide a working introduction to the operation of Web apps. They’re for developers who have little or no Web programming experience. If you’re already familiar with HTTP, HTML forms, and other Web-related technologies, feel free to skip ahead to the section entitled “Your First Web Form.” If, however, Web apps are a new frontier for you, you’ll find the following discussion helpful in building an in-depth understanding of the Web Forms programming model.
Hypertext Transfer Protocol
The Hypertext Transfer Protocol, better known as HTTP, is the protocol that drives the World Wide Web. Invented by Tim Berners-Lee ("father of the Web") and documented in RFC 2068, which is available online at
www.w3.org/Protocols/rfc2068/rfc2068
, HTTP is arguably the most important network protocol ever invented, with the notable exception of TCP/IP.
HTTP defines how Web browsers and Web servers communicate with each other. It’s entirely text based, and it’s typically transmitted over TCP connections linking Web browsers to Web servers. Suppose the following HTML file is deployed on a Web server, that its name is Simple.html, and that its URL is www.wintellect.com/simple.html:
<html>
<body>
Hello, world
</body>
</html>
If a user types http://www.wintellect.com/simple.html into Internet Explorer’s address bar, Internet Explorer (IE) uses the Internet’s Domain Name System (DNS) to convert www.wintellect.com into an IP address (for example, 66.45.26.25). Then IE opens a socket connection to the server at that address using a well-known port number (port 80) and transmits an HTTP request similar to this one:
GET /simple.html HTTP/1.1
Accept: */*
Accept-Language: en-us
Accept-Encoding: gzip, deflate
If-Modified-Since: Wed, 24 Oct 2001 14:12:36 GMT
If-None-Match: "50b0d3ee955cc11:a78"
User-Agent: Mozilla/4.0.(compatible; MSIE.6.0; Windows NT 5.1)
Host: www.wintellect.com
Connection: Keep-Alive
[blank line]
The first line of the request is called the start line. It consists of a method name (GET), the name of the resource being requested (simple.html), and an HTTP version number (1.1). GET is one of seven methods defined in HTTP 1.1; it requests a resource from a Web server. The next eight lines make up the message header. Each line, or header, contains additional information about the request, including information about the browser that originated the request (User-Agent). A blank line (a simple carriage return/line feed pair) marks the end of the message header and also the end of the request.
How does the Web server respond to the GET command? Assuming /simple.html is a valid resource identifier and security settings don’t prevent the file from being returned, the server transmits an HTTP response like this one:
HTTP/1.1 200 OK
Server: Microsoft-IIS/5.0
Date: Wed, 24 Oct 2001 14:12:37 GMT
Content-Type: text/html
Accept-Ranges: bytes
Last-Modified: Wed, 24 Oct 2001 14:00:53 GMT
ETag: "d02acf81975cc11:a78"
Content-Length: 46
[blank line]
<html>
<body>
Hello, world
</body>
</html>
Upon receiving the response, the browser parses the HTML returned by the Web server and displays the resulting Web page. The Content-Type header identifies the returned data as HTML, while Content-Length tells the browser how much HTML was returned. The “200” in the first line of the response is an HTTP status code signifying that the server fulfilled the browser’s request. The HTTP specification defines about 40 different status codes, including the infamous 401 (“Unauthorized”) code indicating that the user isn’t authorized to view this resource.
Conversations such as these form the backbone for communications over the Web. As you surf the Web by typing URLs and clicking hyperlinks, your browser issues one GET command after another. Tools such as NetMon—the network packet-sniffing utility that comes with server editions of Windows—let you spy on the HTTP traffic flying back and forth. You don’t have to be an HTTP guru to write ASP.NET applications, but a knowledge of basic HTTP semantics and a familiarity with commonly used request and response headers are a big help in understanding the ASP.NET object model.
HTML Forms
Simple.html is a far cry from a full-blown Web application. It’s a static HTML file that solicits no user input. Real Web applications like the ones located at
www.amazon.com
and
www.ebay.com
accept input from their users, and they vary the HTML that they return to Web browsers based on the contents of that input.
At the heart of almost every genuine Web application is an HTML form. An HTML form is the portion of an HTML document that appears between <form> and </form> tags. The HTML in Figure 5-1 describes a simple form representing a Web-based adding machine. The form contains two text input fields for the user to type numbers into and an equals button that submits the form back to the server. Figure 5-2 shows how the form appears in Internet Explorer. As you can see, the browser renders an <input type=“text”> tag as a text input field and an <input type=“submit”> tag as a push button. Similar tags can be used to create check boxes, radio buttons, list boxes, and other basic control types.
Calc.html
<html>
<body>
<form>
<input type="text" name="op1" />
+
<input type="text" name="op2" />
<input type="submit" value=" = " />
</form>
</body>
</html>
Figure 5-1
A simple HTML form.
.chm::/netcorehtml/images/F05om02.jpg)
Figure 5-2
Calc.html displayed in Internet Explorer.
A submit button (<input type=“submit”>) plays a special role in an HTML form. When clicked, it submits the form to a Web server. To be more precise, the browser submits the form along with any input in the form’s controls. How the form is submitted depends on whether the <form> tag includes a Method attribute and the value of that attribute, if present. If the <form> tag lacks a Method attribute or includes a method=“get” attribute, the browser sends an HTTP GET command to the server with the user’s input appended to the URL in the form of a query string:
GET /calc.html?op1=2&op2=2 HTTP/1.1
.
.
.
Connection: Keep-Alive
[blank line]
If, on the other hand, the <form> tag includes a method=“post” attribute, the form is submitted to the server using an HTTP POST command. Rather than transmit user input in the URL, with a POST command the browser passes it in the body of the HTTP request:
POST /calc.html HTTP/1.1
.
.
.
Content-Type: application/x-www-form-urlencoded
Content-Length: 11
[blank line]
op1=2&op2=2
Regardless of whether a GET or a POST command is used, when input from an HTML form is submitted back to the server, we say that a “postback” has occurred. Remember that term because you’ll encounter it repeatedly in this and the next several chapters.
For a first-hand look at HTML forms in action, copy Calc.html to your PC’s \Inetpub\wwwroot directory and call it up in Internet Explorer by typing the following URL:
http://localhost/calc.html
Now type 2 into each of the form’s text boxes and click the = button. As evidence that a postback occurred, observe what appears in the browser’s address bar (shown in Figure 5-3). If you change the <form> tag to
<form method="post">
and repeat the experiment, you won’t see any change in the URL. But the postback occurs just the same, and the Web server can access the user’s input by examining the body of the request.
.chm::/netcorehtml/images/F05om03.jpg)
Figure 5-3
Calc.html following a postback.
Server-Side Processing(cgi &&isipi)
So far, so good. As Calc.html demonstrates, building the client half of a Web application is easy. After all, it’s just HTML. The hard part is building the code that runs on the Web server. Something has to be running there to extract the user input from the URL (or from the body of the HTTP request if the postback was performed with POST instead of GET) and generate a new Web page that displays the sum of the inputs next to the = button. In other words, if the user enters 2 and 2 and clicks the = button, we’d like the Web server to respond by returning the following HTML:
<html>
<body>
<form>
<input type="text" name="op1" value="2" />
+
<input type="text" name="op2" value="2" />
<input type="submit" value=" = " />
4
</form>
</body>
</html>
Note the Value attributes added to the <input type=“text”> tags. Including the inputs in the page returned from the Web server following a postback perpetuates the illusion that the user is seeing one Web page when in fact he or she is seeing two in succession.
There are many ways to write applications that process input from HTML forms. One solution is an application that uses the Common Gateway Interface (CGI). CGI defines a low-level programmatic interface between Web servers and applications that run on Web servers. Applications that use it are typically written in a programming language called Perl, but they can be written in other languages as well. CGI applications read the input accompanying postbacks through server environment variables and standard input (stdin), and they write HTTP responses to standard output (stdout).CGI has a reputation for being slow because many implementations of it launch a new process to handle each incoming request. Despite this, CGI enjoys widespread use on UNIX-based Web servers. It’s rarely used on the Windows platform.
Another solution—one that’s more likely to find favor among Windows developers—is an ISAPI extension DLL. ISAPI stands for Internet Server Application Programming Interface. ISAPI extensions are Windows DLLs that are hosted by Internet Information Services. They’re referenced by URL just like HTML files (for example, http://www.wintellect.com/calc.dll). IIS forwards HTTP requests to an ISAPI DLL by calling a special function exported from the DLL. The DLL, in turn, generates HTTP responses.ISAPI DLLs are faster than CGI applications because they (typically) run in the same process as IIS. And once loaded, they remain in memory awaiting subsequent requests. The downside to ISAPI DLLs is that they’re difficult to write. An ISAPI developer must be comfortable with the architecture of Windows DLLs and also be willing to deal with HTTP messages at a very low level.
Curious to know what an ISAPI DLL looks like? Figure 5-4 shows the C++ source code for an ISAPI DLL that implements a Web calculator identical to the one shown in Figure 5-2. The heart of the DLL is the HttpExtensionProc function, which IIS calls on each and every request. The pECB parameter points to a structure containing information about the request, including a pointer to the query string (if any) accompanying the request. If the query string is empty, this implementation of HttpExtensionProc returns an HTML page depicting an empty calculator. Following a postback, however, it parses the op1 and op2 parameters from the query string and returns an HTML page that includes the sum of the inputs. In other words, it returns precisely the HTML we set as our goal a moment ago.
ISIPI实现:
Calc.cpp
#include <windows.h>
#include <httpext.h>
#include <string.h>
#include <stdlib.h>
int GetParameter (LPSTR pszQueryString, LPSTR pszParameterName);
BOOL WINAPI DllMain (HINSTANCE hInstance, DWORD fdwReason,
LPVOID lpvReserved)
{
return (TRUE);
}
BOOL WINAPI GetExtensionVersion (HSE_VERSION_INFO* pVer)
{
pVer->dwExtensionVersion =
MAKELONG (HSE_VERSION_MINOR, HSE_VERSION_MAJOR);
lstrcpy (pVer->lpszExtensionDesc, "Calc ISAPI Extension");
return (TRUE);
}
DWORD WINAPI HttpExtensionProc (EXTENSION_CONTROL_BLOCK* pECB)
{
static char* szPrePostbackMessage =
"<html>\r\n" \
"<body>\r\n" \
"<form>\r\n" \
"<input type=\"text\" name=\"op1\" />\r\n" \
"+\r\n" \
"<input type=\"text\" name=\"op2\" />\r\n" \
"<input type=\"submit\" value=\" = \" />\r\n" \
"</form>\r\n" \
"</body>\r\n" \
"</html>";
static char* szPostPostbackMessage =
"<html>\r\n" \
"<body>\r\n" \
"<form>\r\n" \
"<input type=\"text\" name=\"op1\" value=\"%d\" />\r\n" \
"+\r\n" \
"<input type=\"text\" name=\"op2\" value=\"%d\" />\r\n" \
"<input type=\"submit\" value=\" = \" />\r\n" \
"%d\r\n" \
"</form>\r\n" \
"</body>\r\n" \
"</html>";
//
// Build the response message body.
//
char szMessage[512];
if (lstrlen (pECB->lpszQueryString) == 0) {
// If the query string is empty, return a page that shows
// an empty calculator.
lstrcpy (szMessage, szPrePostbackMessage);
}
else {
// If the query string is not empty, extract the user input,
// process it, and return a page that shows inputs and outputs.
int a = GetParameter (pECB->lpszQueryString, "op1");
int b = GetParameter (pECB->lpszQueryString, "op2");
wsprintf (szMessage, szPostPostbackMessage, a, b, a + b);
}
//
// Build the response message header.
//
char szHeader[128];
DWORD dwCount = lstrlen (szMessage);
wsprintf (szHeader, "Content-type: text/html\r\n" \
"Content-Length: %lu\r\n\r\n", dwCount);
//
// Output the response message header.
//
HSE_SEND_HEADER_EX_INFO shei;
shei.pszStatus = "200 OK";
shei.pszHeader = szHeader;
shei.cchStatus = lstrlen (shei.pszStatus);
shei.cchHeader = lstrlen (shei.pszHeader);
shei.fKeepConn = FALSE;
pECB->ServerSupportFunction (pECB->ConnID,
HSE_REQ_SEND_RESPONSE_HEADER_EX, &shei, NULL, NULL);
//
// Output the response message body.
//
pECB->WriteClient (pECB->ConnID, szMessage, &dwCount, 0);
//
// Indicate that the request was processed successfully.
//
return HSE_STATUS_SUCCESS;
}
int GetParameter (LPSTR pszQueryString, LPSTR pszParameterName)
{
char* p = strstr (pszQueryString, pszParameterName);
if (p != NULL) {
p += strlen (pszParameterName) + 1;
for (char* tmp = p; *tmp != '&' && *tmp != 0; tmp++)
;
int len = tmp - p;
char* buffer = new char[len + 1];
strncpy (buffer, p, len);
int val = atoi (buffer);
delete buffer;
return val;
}
return 0;
}
Figure 5-4
Source code for an ISAPI DLL.
The Active Server Pages Solution
A third solution to the problem of processing input from HTML forms on Web servers, and the one that made Windows a popular platform for Web applications in the second half of the 1990s, is Active Server Pages (ASP). Active Server Pages lower the barrier to entry for Web developers by allowing HTML and server-side script to be freely mixed in ASP files. Scripts are typically written in JScript (Microsoft’s version of JavaScript) or VBScript, but they can be written in other languages as well. Intrinsic objects available to those scripts abstract the low-level details of HTTP and make it exceedingly easy to write code that generates HTML content dynamically. Just how easy is ASP? Compare the code in Figures 5-4 and 5-5 and judge for yourself.
When an Active Server Page is requested, ASP parses the page and executes any scripts contained inside it. Scripts access the input accompanying the request by using the ASP Request object, and they write HTML to the HTTP response using the ASP Response object. Figure 5-5 shows the ASP version of Calc.html. The VBScript between <% and %> tags checks the incoming request for inputs named op1 and op2. If the inputs aren’t present, an empty calculator is rendered back to the client. If the inputs are present—that is, if Request (“op1”) and Request (“op2”) evaluate to non-null strings—the server-side script converts the inputs to integers, adds them together, converts the result to a string, and writes the string to the HTTP response using Response.Write.
To prevent the numbers typed into the text boxes from disappearing following a postback, Calc.asp uses ASP’s inline output syntax (<%= … %>) to initialize the Value attributes returned in the <input type=“text”> tags. When the page is first requested from the server, Request (“op1”) and Request (“op2”) return empty strings, so the tags output to the client produce empty text boxes:
<input type="text" name="op1" value=""/>
<input type="text" name="op2" value=""/>
But when the form is rendered again following a postback, Request (“op1”) and Request (“op2”) return the values input by the user and are echoed to the client in the tags’ Value attributes:
<input type="text" name="op1" value="2"/>
<input type="text" name="op2" value="2"/>
To verify that this is the case, drop Calc.asp into \Inetpub\wwwroot and bring it up by typing http://localhost/calc.asp. Then enter a couple of numbers, click the = button, and use the View/Source command in Internet Explorer to view the HTML returned by ASP.
The appeal of ASP—and the reason it caught on so quickly after its introduction in 1996—is that it provides an easy-to-use model for dynamically generating HTML on Web servers. ASP provides a higher level of abstraction than either CGI or ISAPI, which means a flatter learning curve and faster time to market. And ASP integrates seamlessly with ActiveX Data Objects (ADO), which makes it a great solution for writing Web apps that interact with back-end databases.
Calc.asp
<%@ Language="VBScript" %>
<html>
<body>
<form>
<input type="text" name="op1" value="<%= Request ("op1") %>"/>
+
<input type="text" name="op2" value="<%= Request ("op2") %>" />
<input type="submit" value=" = " />
<%
If Request ("op1") <> "" And Request ("op2") <> "" Then
a = CInt (Request ("op1"))
b = CInt (Request ("op2"))
Response.Write (CStr (a + b))
End If
%>
</form>
</body>
</html>
Figure 5-5
ASP calculator applet.
Your First Web Form
ASP is a fine solution for performing server-side processing of HTML form input and dynamically generating HTML, but despite its youth, ASP has already grown long in the tooth. What’s wrong with ASP? For starters, it’s slow. ASP scripts are interpreted rather than compiled, so you incur the cost of recompiling your scripts on each and every page access. Another problem is that ASP lacks a true encapsulation model. It’s not possible, for example, to build reusable ASP controls that encapsulate complex rendering and behavioral logic without resorting to COM.
Enter ASP.NET Web forms. Web forms bring object-oriented programming to the Web. They also combine ASP’s ease of use with the speed of compiled code. Figure 5-6 holds the source code for the Web Forms version of Calc.asp. The .aspx file name extension identifies the file as an ASP.NET resource. Figure 5-7 shows how Calc.aspx appears in Internet Explorer. Here’s how to run it on your PC:
-
Copy Calc.aspx to your PC’s \Inetpub\wwwroot directory.
-
Start Internet Explorer or the browser of your choice and type http://localhost/calc.aspx in the browser’s address bar. The Web form will appear in the browser window.
-
Type 2 and 2 into the input fields and click the = button. The number 4 should appear to the right of the button.
The \Inetpub\wwwroot directory is an IIS virtual directory; it’s created automatically when you install IIS. If you’d prefer not to clutter \Inetpub\wwwroot, you can set up virtual directories of your own using the Internet Services Manager applet found under Administrative Tools. You could, for example, put Calc.aspx in a directory named Samples and make Samples a virtual directory. If you assign the Samples directory the logical name “Samples” (virtual directory names don’t have to equal physical directory names, although they often do), you’d run Calc by typing http://localhost/samples/calc.aspx in the browser’s address bar. The same goes for other ASPX files presented in this chapter and throughout the remainder of the book.
Calc.aspx
<html>
<body>
<form runat="server">
<asp:TextBox ID="op1" RunAt="server" />
+
<asp:TextBox ID="op2" RunAt="server" />
<asp:Button Text=" = " OnClick="OnAdd" RunAt="server" />
<asp:Label ID="Sum" RunAt="server" />
</form>
</body>
</html>
<script language="C#" runat="server">
void OnAdd (Object sender, EventArgs e)
{
int a = Convert.ToInt32 (op1.Text);
int b = Convert.ToInt32 (op2.Text);
Sum.Text = (a + b).ToString ();
}
</script>
Figure 5-6
ASP.NET Web form calculator.
.chm::/netcorehtml/images/F05om07.jpg)
Figure 5-7
Calc.aspx in action.
Web forms are built from a combination of HTML and server controls. Calc.aspx contains four server controls: two TextBox controls, a Button control, and a Label control. TextBox, Button, and Label are classes defined in the System.Web.UI.WebControls namespace in the .NET Framework class library (FCL). Each time Calc.aspx is requested, ASP.NET instantiates TextBox, Button, and Label objects and asks each object to render itself into HTML. The HTML returned by the controls is included in the HTTP response. Execute a View/Source command while Calc.aspx is displayed in Internet Explorer and you’ll see the following HTML:
<html>
<body>
<form name="_ctl0" method="post" action="calc.aspx" id="_ctl0">
<input type="hidden" name="__VIEWSTATE" value="dDwxOTE0NDY4ODE2Ozs+" />
<input name="op1" type="text" id="op1" />
+
<input name="op2" type="text" id="op2" />
<input type="submit" name="_ctl1" value=" = " />
<span id="Sum"></span>
</form>
</body>
</html>
The TextBox controls turned into <input type=“text”> tags, the Button control turned into an <input type=“submit”> tag, and the Label control turned into a <span> tag. In effect, these controls “project” a user interface to the browser by rendering themselves into HTML.
What about the <input> tag named __VIEWSTATE in the HTML returned by Calc.aspx? That’s the mechanism ASP.NET uses to round-trip data from the server to the client and back to the server again. You’ll learn all about it in Chapter 8.
Control Properties
Server controls do more than render HTML. They also implement methods, properties, and events that make them highly programmable. For example, TextBox, Button, and Label controls each expose text through a read/write property named Text. If you wanted “2” to appear in the TextBox controls by default, you could modify the control tags as follows:
<asp:TextBox Text="2" ID="op1" RunAt="server" />
<asp:TextBox Text="2" ID="op2" RunAt="server" />
Any public property that a control implements and that can be represented as a name/value pair can be initialized by using the property name as an attribute in the tag that declares the control.
Properties can also be accessed from server-side scripts. In Calc.aspx, the server-side script is the code that appears between the <script> and </script> tags. The statements
int a = Convert.ToInt32 (op1.Text);
int b = Convert.ToInt32 (op2.Text);
extract user input from the TextBox controls by reading their Text properties, while the statement
Sum.Text = (a + b).ToString ();
displays the sum of the inputs by writing to the Label control’s Text property. The names op1, op2, and Sum are the controls’ programmatic IDs. Control IDs are defined by including ID attributes in control tags. In Calc.aspx, the Label control serves as a placeholder for the Web form’s output. Because the default value of a Label control’s Text property is an empty string, nothing appears in the form where the Label control is positioned until the server-side script assigns a string to the control’s Text property.
Control Events
The ability to encapsulate complex rendering and behavioral logic in reusable control classes is one of the fundamental tenets of the Web Forms programming model. Another is the use of events and event handling. Most server controls fire events in response to user input. Button controls, for example, fire Click events when they’re clicked. Wiring an event to an event handler is accomplished by prefixing the event name with “On” and using the resulting text as an attribute in the tag that declares the control. In Calc.aspx, the statement
<asp:Button Text=" = " OnClick="OnAdd" RunAt="server" />
serves the dual purpose of declaring a Button control and designating OnAdd as the handler for the Button control’s Click events. That’s why the code in OnAdd executed when you clicked the = button. Knowing this, it’s a simple matter to consult the documentation for the list of events a control is capable of firing and connecting handlers to the events that interest you.
What happens under the hood to support the Web Forms event model is a little more complex. Look again at the HTML returned by Calc.aspx. Notice that it contains an HTML form and a submit button. Clicking the button posts the form back to the server using an HTTP POST. Recognizing that the POST command represents a postback that occurred because the user clicked the = button, ASP.NET notifies the Button object and the Button responds by firing a Click event on the server. ASP.NET subsequently calls OnAdd and then renders the page again into HTML. Because the Label control’s Text property now has a non-null string assigned to it, this time the HTML output by the Label control includes a text string between the <span> and </span> tags.
Implementation Notes
Calc.aspx contains no code to prevent the numbers typed into the TextBox controls from disappearing following a postback. The <asp:TextBox> tags in Figure 5-6 lack Value attributes such as the ones in Figure 5-5’s <input type= “text”> tags. Yet the inputs don’t disappear when you click the = button. Why? Because TextBox controls automatically persist their contents across postbacks. Check the HTML returned to the browser following the postback and you’ll find that <input type=“text”> tags rendered by the TextBox controls have Value attributes that equal the text typed by the user.
To make Calc.aspx as simple as possible, I purposely omitted error checking code. To see what I mean, type something other than a simple integer value (say, “hello”) into one of the text boxes and click the = button. The page you see is ASP.NET’s way of responding to unhandled exceptions. To prevent this error, rewrite Calc.aspx’s OnAdd method as follows:
void OnAdd (Object sender, EventArgs e)
{
try {
int a = Convert.ToInt32 (op1.Text);
int b = Convert.ToInt32 (op2.Text);
Sum.Text = (a + b).ToString ();
}
catch (FormatException) {
Sum.Text = "Error";
}
}
This version of OnAdd catches the exception thrown when Convert.ToInt32 is unable to convert the input to an integer and responds by displaying the word “Error” to the right of the push button.