70 |
Saturday Morning |
solving the problem, but also requires the maintenance of a lot of code. If requirements change while an application is being developed or produced, then code needs to be changed in multiple locations. That is neither fun nor easy!
Microsoft has effectively solved the problem of state maintenance and multiple client support by providing HTML controls and Web controls. In this session, we will discuss HTML controls.
Introducing HTML Controls
HTML controls look exactly like HTML elements with the exception that they have a runat=”server” attribute/value pair in the opening tag of the HTML element. HTML controls offer many benefits, including:
Event sets. They provide a set of events for which developers can write server-side or client-side events to handle.
Automatic management of the values of the form’s controls. If the form makes a round trip to the server, HTML controls are automatically populated with the values they had when the form was submitted to the server.
Interaction with validation controls. This feature enables developers to verify that a user has entered correct appropriate information into the control.
Pass-through of custom attributes. Developers can add any attributes needed to the HTML control, and the Web Forms framework will read them and render them without any change in functionality.
The following sections show you how to use HTML controls and how exactly they can be utilized to solve multiple client and state maintenance problems.
Using HTML controls
Before we start slinging code, there are several things to remember when using HTML controls:
All HTML controls that post back events must be nested within an HTML control form.
All HTML controls must be well formed and must not overlap. Unless otherwise noted, elements must be closed, either with an ending slash within the tag, or with a closing tag.
To illustrate how HTML controls work, we will first write a small application using ASP 3.0 and then re-create the same application using ASP.NET. We’ll then compare the two, and you’ll see how much time and effort HTML controls can save. Listing 8-1 shows the code for an ASP page that generates an HTML form.
Listing 8-1 An ASP HTML form
<html>
<body>
<%
Dim sName
Session 8—Using HTML Controls |
71 |
sName = Trim(Request.Form(“cmbPeople”)) If sName <> “” Then
Response.Write(sName) End If
%>
<form name=”frmPeople” method=”post”> People<BR>
<select name=”cmbPeople”> <option></option> <option>Bill Gates</option> <option>Larry Ellison</option> <option>Steve Case</option>
</select>
<input type=”submit” value=”Submit”> </form>
</body>
</html>
What we have effectively done here is create an ASP page with an HTML form that redirects to itself for processing. After the form is submitted, the HTML select element loses its state, that is, it no longer displays the value you selected prior to submitting the form.
Listing 8-2 shows another ASP page (see file C08-02.asp on the CD-ROM) that actually maintains the select element’s state.
Listing 8-2 An ASP page that maintains state
<html>
<body>
<%
Dim sName
sName = Trim(Request.Form(“cmbPeople”)) If sName <> “” Then
Response.Write(sName) End If
%>
<form name=”frmPeople” method=”post”> People<BR>
<select name=”cmbPeople”> <option></option>
<option<% If sName = “Bill Gates” Then Response.Write(“ selected”) %>>Bill Gates</option>
<option<% If sName = “Larry Ellison” Then Response.Write(“ selected”) %>>Larry Ellison</option>
<option<% If sName = “Steve Case” Then Response.Write(“ selected”) %>>Steve Case</option>
</select>
<input type=”submit” value=”Submit”> </form>
</body>
</html>
72 |
Saturday Morning |
When you reload the page, the value selected is maintained in the select element. You’ll notice that an If...Then statement was added to each option element to check if
the option value is equivalent to the value submitted. If it is, the option element is marked as SELECTED. This may not seem like that big of a deal, but as your forms get more and more complex, the process of writing the code to maintain state for each element can be very tedious and monotonous. Additionally, this code is very prone to errors. For example, if we had inadvertently written:
<OPTION<% If sName = “Bill Gats” Then Response.Write(“ SELECTED”) %>>Bill Gates</OPTION> (error in Gates intentional)
we would receive unexpected results. So, code like this definitely requires thorough testing.
The following sample code is a listing of the HTML source generated by our ASP page. We’ll compare this source with the HTML source generated by the ASP.NET page we’ll write in few seconds:
<html>
<body> Bill Gates
<form name=”frmPeople” method=”post”> People<BR>
<select name=”cmbPeople”> <option></option>
<option selected>Bill Gates</option> <option>Larry Ellison</option> <option>Steve Case</option>
</select>
<input type=”submit” value=”Submit”> </form>
</body>
</html>
In order to maintain state, you have to use an HTML control. To turn an HTML element into an HTML control, use the following model:
<HTML Tag [id=”Optional Name”] [attribute=”value” . . .] runat=”server”]>[</HTML Tag>]
Listing 8-3 shows a sample ASP.NET page (see file C08-03.aspx on the CD-ROM) that utilizes HTML controls.
Listing 8-3 An ASP.NET page that utilizes HTML controls
<html>
<body>
<%
Dim sName
sName = Trim(Request.Form(“cmbPeople”)) If sName <> “” Then
Response.Write(sName) End If
Session 8—Using HTML Controls |
73 |
%>
<form id=”frmPeople” method=”post” runat=”server”> People<BR>
<select id=”cmbPeople” runat=”server”> <option></option>
<option>Bill Gates</option> <option>Larry Ellison</option> <option>Steve Case</option>
</select>
<input type=”submit” value=”Submit”> </form>
</body>
</html>
Notice that this page is nearly identical to people.asp with a few minor exceptions — we changed all the name attributes to identify attributes and added the runat=”server” attribute/value pair to the HTML form and select elements. When you run this page,
the select element’s state will be maintained without the developer having to write an additional line of code.
Here is a listing of the HTML source generated by our sample code:
<html>
<body>
Bill Gates<form name=”frmPeople” method=”post” action=”people.aspx” id=”frmPeople”>
<input type=”hidden” name=”__VIEWSTATE” value=”YTB6LTE2NTY1NTY1MF9fX3g=54b44516” />
People<BR>
<select name=”cmbPeople” id=”cmbPeople”> <option value=””></option>
<option selected value=”Bill Gates”>Bill Gates</option> <option value=”Larry Ellison”>Larry Ellison</option> <option value=”Steve Case”>Steve Case</option>
</select>
<input type=”submit” value=”Submit”> </form>
</body>
</html>
This HTML source looks similar to the HTML source generated by our traditional ASP sample, but there are several differences:
An action attribute/value pair was added to our form element.
A value attribute/value pair was added to each of our option values.
The following hidden element was added to the form:
<input type=”hidden” name=”__VIEWSTATE” value=”YTB6LTE2NTY1NTY1MF9fX3g=54b44516” />