So, how does ASP+ help us in this commonly met situation? The next listing shows the changes required for taking advantage of ASP+ server controls that automatically preserve their state. We still use the Response.Write method to display the selected values. However, this time some of the elements on the page have the special runat="server" attribute added to them. When ASP+ sees these elements, it processes them on the server and creates the appropriate HTML output for the client:
<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 runat="server">
Machine Name:
<input type="text" id="txtName" runat="server">
<p />
Operating System:
<select id="selOpSys" size="1" runat="server">
<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>
|
You can clearly see how much simpler this ASP+ page is than the last example. When loaded into Internet Explorer 5 and the values submitted to the server, the result appears to be just the same: |
|
This page, named pageone.aspx, 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.
How Do the Server-Side Controls Work?
How is this achieved? The key is the runat="server" attribute. To get an idea of what's going on, take a look at the source of the page from within the browser. It looks like this:
<html>
<body>
You selected 'Windows 98' for machine 'tizzy'.
<FORM name="ctrl0" method="post" action="pageone.aspx"
id="ctrl0">
<INPUT type="hidden" name="__VIEWSTATE" value="a0z1741688109__x">
Machine Name:
<INPUT type="text" id="txtName" name="txtName"
value="tizzy">
<p />
Operating System:
<SELECT id="selOpSys" size="1" name="selOpSys">
<OPTION value="Windows 95">Windows 95</OPTION>
<OPTION selected value="Windows 98">Windows 98</OPTION>
<OPTION value="Windows NT4">Windows NT4</OPTION>
<OPTION value="Windows 2000">Windows 2000</OPTION>
</SELECT>
<p />
<input type="submit" value="Submit">
</FORM>
</body>
</html>
We wrote this ASP+ code to create the <form> in the page:
<form runat="server">
...
</form>
When the page is executed by ASP+, the output to the browser is:
<FORM name="ctrl0" method="post" action="pageone.aspx"
id="ctrl0">
...
</FORM>
You can see that the action and method attributes are automatically created by ASP+ so that the values of the controls in the form will be POSTed back to the same page. ASP+ also adds a unique id and name attribute to the form as we didn't provide one. However, if you do specify these, the values you specify will be used instead.
If you include the method="GET" attribute, the form contents are sent to the server as part of the query string instead, as in previous versions of ASP, and the automatic state management will no longer work.
Inside the form, we wrote this ASP+ code to create the text box:
<input type="text" id="txtName" runat="server">
The result in the browser is this:
<INPUT type="text" id="txtName" name="txtName"
value="tizzy">
You can see that ASP+ has automatically added the value attribute with the text value that was in the control when the form was submitted. It has also preserved the id attribute we provided, and added a name attribute with the same value.
For the <select> list, we wrote this code:
<select id="selOpSys" size="1" runat="server">
<option>Windows 95</option>
<option>Windows 98</option>
<option>Windows NT4</option>
<option>Windows 2000</option>
</select>
ASP+ obliged by outputting this HTML, which has a selected
attribute in the appropriate
<option>
element:
<SELECT name="selOpSys" id="selOpSys"
size="1">
<OPTION value="Windows 95">Windows 95</OPTION>
<OPTION selected value="Windows 98">Windows 98</OPTION>
<OPTION value="Windows NT4">Windows NT4</OPTION>
<OPTION value="Windows 2000">Windows 2000</OPTION>
</SELECT>
Again, a unique id attribute has been created, and the <option> elements have matching value attributes added automatically. (If we had provided our own value attributes in the page, however, these would have been preserved.)
Comments