Server-side HTML Controls
ASP has always provided the opportunity to execute components on the server,
and these components can generate sections of the page that is returned to the
user. ASP+ extends this concept through server
controls. All that's required to turn any HTML element into a
server control is the addition of an extra attribute: runat="server".
Any HTML element in a page can be marked
this way, and ASP+ will then process the element on the server and can generate
output that suits this specific client. And, as a by-product, we can do extra
tricks – in particular with HTML <form>
and the associated form control elements, where we can create the code to manage
state during round trips to the server. This makes the programming experience
less monotonous and dramatically more productive.
While the concept of having HTML elements that execute on the server may at
first seem a little strange, as you'll see it adds a whole new layer of functionality
to the pages, and makes them easier to write at the same time. What more could
a programmer want?
The Problems with Maintaining
State
One of the most cumbersome tasks when creating interactive Web sites and applications
is managing the values passed to the server from HTML form controls, and maintaining
the values in these controls between page requests. So one of the core aims
of ASP+ is to simplify this programming task. This involves no extra effort
on the part of the programmer, and works fine on all browsers that support basic
HTML and above.
Take a look at the following section of code. This creates a simple form using
HTML controls where the user can enter the name of a computer and select an
operating system. OK, so this isn't a terribly exciting example in itself, but
it illustrates a pretty common scenario used by almost every web application
out there today. When the form page is submitted to the server, the values the
user selected are extracted from the Request.Form
collection and displayed with the Response.Write
method. The important parts of the page are highlighted in the code listing:
<html>
<body>
<%
If Len(Request.Form("selOpSys")) > 0 Then
strOpSys = Request.Form("selOpSys")
strName = Request.Form("txtName")
Response.Write "You selected '" & strOpSys _
& "' for machine '" & strName & "'."
End If
%>
<form action="pageone.asp" method="post">
Machine Name:
<input type="text" name="txtName">
<p />
Operating System:
<select name="selOpSys" size="1">
<option>Windows 95</option>
<option>Windows 98</option>
<option>Windows NT4</option>
<option>Windows 2000</option>
</select>
<p />
<input type="submit" value="Submit">
</form>
</body>
</html>
Although
this is an ASP page (the file extension is .asp
rather than .aspx), it will work just the same under ASP+
if we changed the extension to .aspx. Remember that the two systems can quite
freely co-exist on the same machine, and the file extension just determines
whether ASP or ASP+ processes it.
|
This screenshot shows what it looks like in Internet Explorer 5. When
the user clicks the Submit button to
send the values to the server, the page is reloaded showing the selected
values. Of course, in a real application, some the values would probably
be stored in a database, or be used to perform some application-specific
processing – for this example we're just displaying them in the page:
|
|
|
One problem is that the page does not maintain its state,
in other words the controls return to their default values. The user has
to re-enter them to use the form again. You can see this is the next screenshot:
|
|
To get round this situation, we have to add extra ASP code to the page to insert
the values into the controls when the page is reloaded. For the text box, this
is just a matter of setting the value attribute with some inline ASP
code, using the HTMLEncode
method to ensure that any non-legal HTML characters are properly encoded. However,
for the <select> list, we have to do some work to figure
out which value was selected, and add the selected attribute to that particular
<option>
element. The changes required are highlighted below:
<html>
<body>
<%
If Len(Request.Form("selOpSys")) > 0 Then
strOpSys = Request.Form("selOpSys")
strName = Request.Form("txtName")
Response.Write "You selected '" & strOpSys _
& "' for machine '" & strName & "'."
End If
%>
<form action="pageone.asp" method="post">
Machine Name:
<input type="text" name="txtName"
value="<% = Server.HTMLEncode(Request("txtName"))
%>">
<p />
Operating System:
<select name="selOpSys" size="1">
<option
<% If strOpSys = "Windows 95" Then Response.Write "
selected" %>
>Windows 95</option>
<option
<% If strOpSys = "Windows 98" Then Response.Write "
selected" %>
>Windows 98</option>
<option
<% If strOpSys = "Windows NT4" Then Response.Write "
selected" %>
>Windows NT4</option>
<option
<% If strOpSys = "Windows 2000" Then Response.Write "
selected" %>
>Windows 2000</option>
</select>
<p />
<input type="submit" value="Submit">
</form>
</body>
</html>
|
Now, when the page is reloaded, the controls maintain their state and
show the values the user selected:
|
|
This page, named pageone.asp, is in the Chapter01
directory of the samples available for the book. You can download all the sample
files from our Web site at http://www.wrox.com.