5. User Interface Management
5.1. Introduction
In the client-server relationship on the web, the client sends information to the server in the form of a string of parameters [param1=val1¶m2=val2&...]. In our previous examples, we most often built this string by hand by requesting URLs of the form [http://localhost/appli? param1=val1¶m2=val2&...]. In reality, the information the client sends to the server comes from forms that the user has filled out. We explore how to build these forms in this chapter. We also introduce the WebMatrix tool, which will allow us to design user interfaces. The installation of this tool is described in the appendices.
5.2. The HTML Language
5.2.1. An example
Consider the following example, created with [Web Matrix], which displays:
- a table
- an image
- a link
Launch [WebMatrix] and select the [File/New File] option:
We choose to create an HTML page. The information above will create a file [d:\data\devel\aspnet\chap4\example1\example1.htm]. [Web Matrix] offers two ways to edit this file: [Design] mode and [HTML] mode:
[Design] mode allows you to use the HTML component palette provided by [WebMatrix]:
To insert an element from this palette, simply double-click on it and then position it in the [Design] window. [HTML] mode allows you to build the HTML document using a text editor. This requires knowledge of HTML syntax. In the [HTML] tab, a document skeleton has been generated:
The [HTML] window is very useful for those unfamiliar with HTML. You build your document in the [Design] window and check the generated HTML code in the [HTML] window. This way, you gradually master HTML and can quickly work solely with the text editor without relying on [Design] mode. We will now demonstrate how to build the HTML document presented at the beginning of this section. We are working in the [Design] window. First, we enter the first line of text directly:
- we add the [Horizontal Rule] component from the component palette:
- we add the [Table] component:
- we place the cursor in the third row of the table to delete it using the [HTML/Edit Table/Delete Table Row] option. Then we enter the expected text in each cell:
- we place the cursor in one of the table cells and examine its properties. The properties window is displayed at the bottom right of the workspace:
- The cell is represented by the HTML tag <TD>. We are therefore shown the properties of the <TD> tag. We focus on the table, which is an object containing the cell. We click on the drop-down list (click to see parent HTML elements) above to select the <TABLE> object:
- The <TABLE> object has a [border] property that sets the width of the border surrounding the table cells. Here, we set border=1.
- We will now edit the attributes of the <TD> object in cell (1,2) to set align=Center and width=200 (pixels). The text will be centered in the cell (align=center), and the cell will be 200 pixels wide. To see the change, you may need to select the [HTML] tab and then switch back to the [Design] tab:
- Now we place the text that precedes the image:
- then the image by double-clicking the [image] component in the palette:
- We select the image to edit its properties:
- in the [src] attribute, we enter the name of the file containing the image, here [univ01.gif]:
- We place the text preceding the link:
- We turn the text [here] into a link to the URL [http://istia.univ-angers.fr]. To do this, we select it and then choose the [HTML/Insert Hyperlink] option:
- We get the following result:
- We're almost there. Let's take a look at the generated HTML code in the [HTML] tab:
<html>
<head>
</head>
<body>
<html>
HTML - 1
<hr />
<table border="1">
<tbody>
cell(1,1)
<td align="middle" width="200">
cell(1,2)
cell(1,3)
cell(2,1)
cell(2,2)
cell(2,3)
</tbody>
<img src="univ01.gif" />
An image <img src="univ01.gif" />
The ISTIA website <a href="http://istia.univ-angers.fr">here
</body>
</html>
We still have a few details to sort out. First, we’d like to give our document a title. [WebMatrix] doesn’t allow you to do this in [Design] mode. In the [HTML] tab, we replace the <head>..</head> section with the following:
Additionally, we would like the text [HTML - 1] to appear in larger font. The <Hi>text</Hi> tag allows you to set the text size, with "i" ranging from 1 to 6, from largest to smallest. Here, we will use H2. The tag
becomes:
The [Design] window reflects our changes:
All that’s left is to test it using the [View/Start] option or [F5]. [WebMatrix] asks for some information to start the [Cassini] web server:
We can accept the default values. The [Cassini] server is launched and our page is displayed in a browser:
Out of curiosity, we can check which parameters were used to launch [Cassini]:
We have covered the basics of building an HTML page with [WebMatrix]. Readers are encouraged to build other HTML pages and check the generated HTML code each time. Gradually, they will be able to build a page without using [Design] mode. An HTML document generally has the following structure:
The entire document is enclosed within the <html>...</html> tags. It consists of two parts:
<head>...</head>: This is the non-displayable part of the document. It provides information to the browser that will display the document. It often contains the <title>...</title> tag, which sets the text that will appear in the browser's title bar. It may also contain other tags, including those defining the document's keywords, which are then used by search engines. This section may also contain scripts, usually written in JavaScript or VBScript, which will be executed by the browser.
<body attributes>...</body>: This is the section that will be displayed by the browser. The HTML tags contained in this section tell the browser the "desired" visual layout for the document. Each browser interprets these tags in its own way. As a result, two browsers may display the same web document differently. This is generally one of the challenges faced by web designers.
The HTML code for the previous document was as follows:
<html>
<head>
<title>HTML1</title>
</head>
<body>
HTML - 1
<hr />
<table border="1">
<tbody>
cell(1,1)
<td align="middle" width="200">
cell(1,2)
cell(1,3)
cell(2,1)
cell(2,2)
cell(2,3)
</tbody>
<img src="univ01.gif" />
An image <img src="univ01.gif" />
The ISTIA website <a href="http://istia.univ-angers.fr">here
</body>
</html>
HTML | HTML tags and examples |
<title>HTML1</title> HTML1 will appear in the browser's title bar when the document is displayed | |
<horizontal> : displays a horizontal line | |
<table attributes>....</table> : to define the table <tr attributes>... : to define a row <td attributes>... : to define a cell examples: <table border="1">...: the border attribute defines the thickness of the table border <td align="center" width="200">cell(1,2) : defines a cell whose content will be cell(1,2). This content will be centered horizontally (align="center"). The cell will have a width of 200 pixels (width="200") | |
<img src="univ01.gif" />: defines an image whose source file is univ01.gif on the web server (src="univ01.gif"). This link is located on a web document accessible via the URL http://localhost/exemple1.htm. Therefore, the browser will request the URL http://localhost/univ01.gif to retrieve the image referenced here. | |
<a href="http://istia.univ-angers.fr">here: causes the text "here" to serve as a link to the URL http://istia.univ-angers.fr. |
In this simple example, we can see that to build the entire document, the browser must make two requests to the server:
http://localhost/exemple1.htm to retrieve the document's HTML source
http://localhost/univ01.gif to retrieve the image univ01.gif
5.2.2. Building a Form
The purpose of an HTML form is to present the user with an information entry page similar to the input forms found in Windows. The input form is sent to the browser as an HTML document. The browser displays the form to the user, who fills it out and submits it using a button with that function. The browser then transmits the entered values to the server for processing. We will see that it does not send the entire form back to the server, but only the entered values. The following example shows a web form also created with WebMatrix:
The HTML code generated by [WebMatrix] is as follows:
<html>
<head>
<title>Form</title>
<script language="javascript">
function clear(){
alert("You clicked the [Clear] button");
}
</script>
</head>
<body>
Form Management
<hr />
<form name="form" method="post">
<table border="1">
Are you married?
<p align="center">
<input type="radio" value="yes" name="rdMarie" />Yes
<input type="radio" checked value="no" name="rdMarie" />No
Checkboxes
<p align="center">
<input type="checkbox" value="one" name="C1" />1
<input type="checkbox" checked value="two" name="C2" />2
<input type="checkbox" value="three" name="C3" />3
Input field
<p align="center">
<input type="text" maxlength="30" value="a few words" name="txtSaisie" />
Password
<p align="center">
<input type="password" maxlength="12" size="12" value="password" name="txtMdp" />
Input box
<p align="center">
<textarea name="areaSaisie">line1
line2</textarea>
ComboBox
<p align="center">
<select name="cmbValues">
<option value="1">option1</option>
<option value="2" selected>option2</option>
<option value="3">option3</option>
</select>
Single-select list
<p align="center">
<select size="3" name="lstSimple">
<option value="1" selected>list1</option>
<option value="2">list2</option>
<option value="3">list3</option>
<option value="4">list4</option>
<option value="5">list5</option>
</select>
Multiple-choice list
<p align="center">
<select multiple size="3" name="lstMultiple">
<option value="1" selected>multiple1</option>
<option value="2">multiple2</option>
<option value="3" selected>multiple3</option>
<option value="4">multiple4</option>
<option value="5">multiple5</option>
</select>
Single button
<p align="center">
<input onclick="clear()" type="button" value="Clear" name="btnClear" />
Submit button
<p align="center">
<input type="submit" value="Submit" name="btnSubmit" />
Reset button
<p align="center">
<input type="reset" value="Reset" name="btnReset" runat="server" />
<input type="hidden" name="secret" value="aValue" />
</form>
</body>
</html>
The visual-to-HTML-tag mapping is as follows:
Visual control | HTML tag |
<form name="form" method="post"> | |
<input type="text" maxlength="30" value="a few words" name="txtInput" /> | |
<input type="password" maxlength="12" size="12" value="aPassword" name="txtMdp" /> | |
<textarea name="inputArea">line1 line2</textarea> | |
<input type="radio" value="yes" name="rdMarie" />Yes <input type="radio" checked value="no" name="rdMarie" />No | |
<input type="checkbox" value="one" name="C1" />1 <input type="checkbox" checked value="two" name="C2" />2 <input type="checkbox" value="three" name="C3" />3 | |
<select name="cmbValeurs"> <option value="1">option1</option> <option value="2" selected>option2</option> <option value="3">option3</option> </select> | |
<select size="3" name="lstSimple"> <option value="1" selected>list1</option> <option value="2">list2</option> <option value="3">list3</option> <option value="4">list4</option> <option value="5">list5</option> </select> | |
<select multiple size="3" name="lstMultiple"> <option value="1" selected>multiple1</option> <option value="2">multiple2</option> <option value="3" selected>multiple3</option> <option value="4">multiple4</option> <option value="5">multiple5</option> </select> | |
<input type="hidden" name="secret" value="aValue" /> | |
<input type="submit" value="Submit" name="submitButton" /> | |
<input type="reset" value="Reset" name="btnReset" runat="server" /> | |
<input onclick="clear()" type="button" value="Clear" name="btnClear" /> |
Let's review these different controls.
5.2.2.1. The
<form name="form" method="post"> |
<form name="..." method="..." action="...">...</form> | |
name="formexample": form name method="..." : method used by the browser to send the values collected in the form to the web server action="..." : URL to which the values collected in the form will be sent. A web form is enclosed within <form>...</form> tags. The form can have a name (name="xx"). This applies to all the controls found within a form. This name is useful if the web document contains scripts that need to reference elements of the form. The purpose of a form is to collect information entered by the user via the keyboard or mouse and send it to a web server URL. Which one? The one referenced in the action="URL" attribute. If this attribute is missing, the information will be sent to the URL of the document in which the form is located. How does a web client send information (the data contained in the form) to a web server? We’ve covered this in detail. It can use two different methods called POST and GET. The method="method" attribute of the <form> tag, where method is set to GET or POST, tells the browser which method to use to send the information collected in the form to the URL specified by the action="URL" attribute. When the method attribute is not specified, the GET method is used by default. |
5.2.2.2. Input field
<input type="text" maxlength="30" value="some words" name="txtInput" /> <input type="password" maxlength="12" size="12" value="aPassword" name="txtMdp" /> |
<input type="..." name="..." size=".." value=".."> The input tag exists for various controls. It is the type attribute that distinguishes these different controls from one another. | |
type="text": specifies that this is a text input field type="password": the characters in the input field are replaced by asterisks (*). This is the only difference from a normal input field. This type of control is suitable for entering passwords. size="12": number of characters visible in the field—does not prevent the entry of more characters maxlength="30": sets the maximum number of characters to 30—the browser is responsible for enforcing this attribute name="txtInput": name of the control value="some words": text that will be displayed in the input field. |
5.2.2.3. Multi-line input field
<textarea name="inputArea">line1 line2</textarea> |
<textarea ...>text</textarea> displays a multi-line input field with initial text inside | |
rows="2": number of lines cols="'20": number of columns name="areaSaisie": name of the control |
5.2.2.4. Radio buttons
<input type="radio" value="yes" name="rdMarie" />Yes <input type="radio" checked value="no" name="rdMarie" />No |
<input type="radio" attribute2="value2" ..../>text displays a radio button with text next to it. | |
name="rdMarie": name of the control. Radio buttons with the same name form a group of mutually exclusive buttons: only one of them can be selected. value="value": value assigned to the radio button. Do not confuse this value with the text displayed next to the radio button. The text is for display purposes only. checked: if this keyword is present, the radio button is checked; otherwise, it is not. |
5.2.2.5. Checkboxes
<input type="checkbox" value="one" name="C1" />1 <input type="checkbox" checked value="two" name="C2" />2 <input type="checkbox" value="three" name="C3" />3 |
<input type="checkbox" attribute2="value2" ..../>text displays a checkbox with text next to it. | |
name="C1": name of the control. Checkboxes may or may not have the same name. Checkboxes with the same name form a group of associated checkboxes. value="value": value assigned to the checkbox. Do not confuse this value with the text displayed next to the radio button. The text is for display purposes only. checked: if this keyword is present, the radio button is checked; otherwise, it is not. |
5.2.2.6. Drop-down list (combo)
<select name="cmbValues"> <option value="1">choice1</option> <option value="2" selected>option2</option> <option value="3">Option 3</option> </select> |
<select size=".." name=".."> <option [selected="selected"] [value="value"]>text</option> ... </select> displays the text between the <option>...</option> tags in a list | |
name="cmbValues": name of the control. size="1": number of visible list items. size="1" makes the list equivalent to a combo box. This is the default value if the [size] attribute is missing. selected="selected": if this attribute is present for a list item, that item appears selected in the list. In our example above, the list item "choice2" appears as the selected item in the combo box when it is first displayed. value="value": sets the value to be sent to the server if the item is selected. If this attribute is missing, the text associated with the option is sent to the server. |
5.2.2.7. Single-select list
<select size="3" name="lstSimple"> <option value="1" selected>list1</option> <option value="2">list2</option> <option value="3">list3</option> <option value="4">list4</option> <option value="5">list5</option> </select> |
<select size=".." name=".."> <option [selected] [value="value"]>...</option> ... </select> displays the text between the <option>...</option> tags in a list | |
the same as for the dropdown list displaying only one item. This control differs from the previous dropdown list only in its size>1 attribute. |
5.2.2.8. Multi-select list
<select multiple size="3" name="lstMultiple"> <option value="1" selected>multiple1</option> <option value="2">multiple2</option> <option value="3" selected>multiple3</option> <option value="4">multiple4</option> <option value="5">multiple5</option> </select> |
<select size=".." name=".." multiple> <option [selected] ] [value="value"]>...</option> ... </select> displays the text between the <option>...</option> tags in a list | |
multiple: allows the selection of multiple items in the list. In the example above, items list1 and list3 are both selected. |
5.2.2.9. Button
<input onclick="clear()" type="button" value="Clear" name="btnClear" /> |
<input type="button" value="..." name="..." onclick="clear()" ....> | |
type="button": defines a button control. There are two other types of buttons: submit and reset. value="Clear": the text displayed on the button onclick="function()": allows you to define a function to be executed when the user clicks the button. This function is part of the scripts defined in the displayed web document. The syntax above is JavaScript syntax. If the scripts are written in VBScript, you would write onclick="function" without the parentheses. The syntax remains the same if parameters need to be passed to the function: onclick="function(val1, val2,...)" In our example, clicking the "Clear" button calls the following JavaScript function: The clear function displays a message:  |
5.2.2.10. Submit button
<input type="submit" value="Submit" name="btnSubmit" /> |
<input type="submit" value="Send" name="btnSend"> | |
type="submit": defines the button as a button for sending form data to the web server. When the user clicks this button, the browser will send the form data to the URL defined in the action attribute of the <form> tag, using the method defined by the method attribute of that same tag. value="Submit": the text displayed on the button |
5.2.2.11. Reset button
<input type="reset" value="Reset" name="btnReset" runat="server" /> |
<input type="reset" value="Reset" name="btnReset"> | |
type="reset": defines the button as a form reset button. When the user clicks this button, the browser will restore the form to the state in which it was received. value="Reset": the text displayed on the button |
5.2.2.12. Hidden field
<input type="hidden" name="secret" value="aValue" /> |
<input type="hidden" name="..." value="..."> | |
type="hidden": specifies that this is a hidden field. A hidden field is part of the form but is not displayed to the user. However, if the user were to ask their browser to display the source code, they would see the presence of the <input type="hidden" value="..."> tag and thus the value of the hidden field. value="aValue": value of the hidden field. What is the purpose of the hidden field? It allows the web server to retain information across a client’s requests. Consider a web shopping application. The client purchases an initial item art1 in quantity q1 on the first page of a catalog and then moves to a new page in the catalog. To remember that the client purchased q1 items of art1, the server can place these two pieces of information in a hidden field on the web form of the new page. On this new page, the client purchases q2 units of item art2. When the data from this second form is submitted to the server, the server will not only receive the information (q2,art2) but also (q1,art1), which is also part of the form as a hidden field that cannot be modified by the user. The web server will then place the information (q1,art1) and (q2,art2) into a new hidden field and send a new catalog page. And so on. |
5.3. Sending form values to a web server via a browser
We already know, from the previous chapter, how a client transmits information to the server. It does so either by:
- an HTTP GET request: url?param1=va1¶m2=val2&....
- an HTTP POST request followed by a document containing the parameter string param1=va1¶m2=val2&....
The browser will use one of these two methods depending on whether the [method] attribute of the [form] tag is set to GET or POST. This is what we will demonstrate now. The page we looked at earlier is a static page. To access the HTTP headers sent by the browser requesting this document, we’ll convert it into a dynamic page for a .NET web server (IIS or Cassini). The previous static code is placed in a file named [form_get.aspx], and its contents are as follows:
<%@ Page src="formulaire_get.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="formulaire_get" %>
<html>
<head>
<title>Form</title>
<script language="javascript">
function clear(){
alert("You clicked the [Clear] button");
}
</script>
</head>
<body>
.....
</body>
</html>
The presentation page above is associated with the [form_get.aspx.vb] controller:
Public Class formulaire_get
Inherits System.Web.UI.Page
Private Sub Page_Init(ByVal Sender As Object, ByVal e As System.EventArgs) Handles MyBase.Init
' saves the current request to request.txt in the page's folder
Dim requestFileName As String = Me.MapPath(Me.TemplateSourceDirectory) + "\request.txt"
Me.Request.SaveAs(requestFileName, True)
End Sub
End Class
Each time the document [form_get.aspx] is called, the client request will be saved to a file [request.txt] by the Page_Init procedure. We have already encountered this mode of operation, so we will not comment further on the controller.
5.3.1. GET Method
Let’s run an initial test, where in the document’s HTML code, the FORM tag is defined as follows:
<form name="form" method="get">
We place the files [formulaire_get.aspx] and [formulaire_get.aspx.vb] in a folder <application-path> and start the Cassini server with the parameters (<application-path>,/form2). We request the URL http://localhost/form2/formulaire_get.aspx:
The browser has just made a request, and we know that it has been logged in the [request.txt] file. Let’s look at its contents:
GET /form2/formulaire_get.aspx HTTP/1.1
Cache-Control: max-age=0
Connection: keep-alive
Keep-Alive: 300
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7b) Gecko/20040316
The browser used an HTTP GET request to request the URL [http://localhost/form2/formulaire_get.aspx]. This is always the case when the URL is provided by the user. We fill out the form as follows:
We use the [Submit] button above. Its HTML code is as follows:
When a [Submit] button is clicked, the browser sends the form parameters (the <form> tag) to the URL specified in the [action] attribute of the <form action="URL"> tag, if it exists. If this attribute does not exist, the form parameters are sent to the URL that served the form. This is the case here. The [Submit] button should therefore trigger a request from the browser to the URL [http://localhost/form2/formulaire_get.aspx] with the form parameters included. Since the page [formulaire_get.aspx] stores the received request, we should be able to see how the client sent these parameters. Let’s try it. We click the [Submit] button. We receive the following response from the browser:
This is the initial page, but you can see that the URL has changed in the browser’s [Address] field. It has become the following:
http://localhost/form2/formulaire_get.aspx?rdMarie=oui&C1=un&C2=deux&txtSaisie=programmation+asp.net&txtMdp=unMotDePasse&areaSaisie=les+bases+de+la%0D%0Aweb+programming%0D%0A&cmbValues=3&lstSingle=1&lstMultiple=2&lstMultiple=4&btnSubmit=Submit&secret=aValue
We can see that the choices made in the form are reflected in the URL. Let’s look at the contents of the [request.txt] file, which has stored the client’s request:
GET /form2/formulaire_get.aspx?rdMarie=yes&C1=one&C2=two&txtInput=asp.net+programming&txtPassword=thisissecret&areaInput=the+basics+of+web%0D%0Aweb+programming%0D%0A&cmbValues=3&lstSingle=1&lstMultiple=2&lstMultiple=4&btnSubmit=Submit&secret=aValue HTTP/1.1
Connection: keep-alive
Keep-Alive: 300
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
Referer: http://localhost/form2/formulaire_get.aspx
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7b) Gecko/20040316
This is an HTTP request quite similar to the one initially sent by the browser when it requested the document without passing any parameters. There are two differences:
The form parameters have been appended to the document URL in the form ?param1=val1¶m2=val2&... | |
The client uses this HTTP header to indicate the URL of the document it was displaying when it made the request |
Let’s take a closer look at how parameters were passed in the GET request URL?param1=value1¶m2=value2&... HTTP/1.1, where the parameters are the names of the web form controls and the values are the values associated with them. Below is a three-column table:
- Column 1: shows the definition of an HTML control from the example
- Column 2: shows how this control appears in a browser
- Column 3: shows the value sent to the server by the browser for the control in Column 1 in the form it takes in the GET request from the example
HTML control | Pre-validation display | returned value(s) |
<input type="radio" value="yes" name="rdMarie" />Yes <input type="radio" checked value="no" name="rdMarie" />No |  | - the value of the button's value attribute selected by the user. |
<input type="checkbox" value="one" name="C1" />1 <input type="checkbox" checked value="two" name="C2" />2 <input type="checkbox" value="three" name="C3" />3 |  | C1=one C2=two - values of the value attributes of the checkboxes checked by the user |
<input type="text" maxlength="30" value="some words" name="txtInput" /> |  | txtSaisie=programming+asp.net - text typed by the user in the . Spaces have been replaced with the + sign |
<input type="password" maxlength="12" size="12" value="aPassword" name="txtMdp" /> |  | txtMdp="thisIsSecret" - text typed by the user in the . The text actually typed was "thisIsSecret". The last character was lost because the maxlength="12" limited the number of characters to 12. |
<textarea name="areaSaisie"> line1 line2</textarea> |  | areaSaisie=the+basics+of+ the%0D%0A web+programming - text typed by the user in the . %OD%OA is the . Spaces have been replaced with the + sign |
<select name="cmbValeurs"> <option value="1">choice1 </option> <option value="2" selected>option2 </option> <option value="3">option3 </option> </select> |  | cmbValues=3 - value selected by the user from the single-select list |
<select size="3" name="lstSimple"> <option value="1" selected>list1</option> <option value="2">list2 </option> <option value="3">list3 </option> <option value="4">list4 </option> <option value="5">list5 </option> </select> |  | lstSimple=3 - value selected by the user from the single-select list |
<select multiple size="3" name="lstMultiple"> <option value="1" selected>multiple1 </option> <option value="2">multiple2 </option> <option value="3" selected>multiple3 </option> <option value="4">multiple4 </option> <option value="5">multiple5 </option> </select> |  | lstMultiple=2 lstMultiple=4 - values selected by the user in the multiple-select list |
<input type="submit" value="Submit" name="btnSubmit" /> |  | btnEnvoyer=Submit - name and value attribute of the button used was used to send the form data to the server |
<input type="hidden" name="secret" value="aValue" /> | secret=aValue - value attribute of the hidden field |
You might wonder what the server did with the parameters passed to it. Actually, nothing. Upon receiving the request
GET /form2/formulaire_get.aspx?rdMarie=yes&C1=one&C2=two&txtInput=asp.net+programming&txtPassword=thisissecret&areaInput=the+basics+of+web%0D%0Aweb+programming%0D%0A&cmbValues=3&lstSimple=1&lstMultiple=2&lstMultiple=4&btnSubmit=Submit&secret=aValue HTTP/1.1
The web server has passed the parameters to the URL in the document [http://localhost/form2/formulaire_get.aspx], i.e., to the document we initially created. We haven’t written any code to retrieve and process the parameters the client sends us. So everything happens as if the client’s request were simply:
That is why, in response to our [Submit] button, we received the same page as the one initially obtained by requesting the URL [http://localhost/form2/formulaire_get.aspx] without parameters.
5.3.2. POST Method
The HTML document is now configured so that the browser uses the POST method to send the form values to the web server. To do this, we copy the [form_get.aspx] file to [form_post.aspx] and modify only the <form> tag in [form_post.aspx]:
<%@ Page src="formulaire_get.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="formulaire_get" %>
<html>
<head>
...
</head>
<body>
<html>
Form Management
<hr />
<form name="form" method="post">
<table border="1">
There is no need to change the controller [form_get.aspx.vb], so we leave it as is. We request the new document via the URL [http://localhost/form2/formulaire_post.aspx], fill out the form as we did for the GET method, and submit the parameters to the server using the [Submit] button. We receive the following response page from the server:
We therefore get the same result as with the GET method, i.e., the initial page. Note one difference: in the browser’s [Address] field, the transmitted parameters do not appear. Now, let’s look at the request sent by the client and saved in the file [request.txt]:
POST /form2/form_post.aspx HTTP/1.1
Connection: keep-alive
Keep-Alive: 300
Content-Length: 222
Content-Type: application/x-www-form-urlencoded
Accept: application/x-shockwave-flash,text/xml,application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,image/jpeg,image/gif;q=0.2,*/*;q=0.1
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Accept-Encoding: gzip,deflate
Accept-Language: en-us,en;q=0.5
Host: localhost
Referer: http://localhost/form2/formulaire_post.aspx
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.7b) Gecko/20040316
rdMarie=yes&C1=one&C2=two&txtInput=asp.net+programming&txtPassword=thisissecret&areaInput=the+basics+of+%0D%0Aweb+programming%0D%0A&cmbValues=3&lstSingle=3&lstMultiple=2&lstMultiple=4&btnSubmit=Submit&secret=aValue
New elements appear in the client's HTTP request:
The GET request has been replaced by a POST request. The parameters are no longer present in the first line of the request. We can see that they are now placed after the HTTP request following a blank line. Their encoding is identical to that in the GET request. | |
number of characters "posted," i.e., the number of characters the web server must read after receiving the HTTP headers to retrieve the document sent by the client. The document in question here is the list of form values. | |
specifies the type of document the client will send after the HTTP headers. The type [application/x-www-form-urlencoded] indicates that it is a document containing form values. |
There are two methods for transmitting data to a web server: GET and POST. Is one method better than the other? We have seen that if a form’s values were sent by the browser using the GET method, the browser would display the requested URL in its Address field in the form URL?param1=val1¶m2=val2&.... This can be seen as either an advantage or a disadvantage:
- an advantage if you want to allow the user to save this parameterized URL to their bookmarks
- a disadvantage if you do not want the user to have access to certain form information, such as hidden fields
From now on, we will use the POST method almost exclusively in our forms.
5.4. Server-side processing of form values
5.4.1. Overview of the example
Now that we’ve established the connection between the HTML tag <form method="GET/POST" ...> and the way the browser sends form values, we know how to retrieve them on the server side. The previous chapter provided the answer:
- if the method of the <form> tag is GET, the parameter values will be retrieved from the [Request.QueryString] collection
- If the method of the <form> tag is POST, the values of the "posted" parameters will be retrieved from the [Request.Form] collection. A clarification is needed here. The <form> tag can specify the target URL for the GET or POST request using the [action] attribute. This URL can be configured regardless of whether it’s a GET or POST request, in the form action="url?param1=val1¶m2=val2&..". These parameters are then added to those contained between the <form> and </form> tags, which will be sent to the server via a GET or POST request. Because they are part of the target URL, they will be retrieved from the [Request.QueryString] collection regardless of whether the request is a GET or a POST.
We will now write an MVC application with two views:
- The first view is the previous form. We’ll call it [form_view].
- The second view is an information page listing the values entered on the first page. A link allows the user to return to the form. We’ll call this view [view_confirmation].
The [form_view] is sent to the user, who fills it out and submits it. It might look like this just before submission:
The user clicks the [Submit] button to submit their entries. In return, they receive the following [validation_view]:
5.4.2. The application controller
We saw in the previous chapter that we can assign the role of controller for an MVC application to the [global.asax] file, through which all client requests pass. We have already presented an MVC application built this way, and here we will follow the development model presented then. The [global.asax] file will be as follows:
It consists of a single line referencing the controller located in the [global.asax.vb] file:
Imports System
Imports System.Web
Imports System.Web.SessionState
Public Class Global
Inherits System.Web.HttpApplication
Sub Application_BeginRequest(ByVal sender As Object, ByVal e As EventArgs)
' retrieve the action to be performed
Dim action As String
If Request.QueryString("action") Is Nothing Then
action = "init"
Else
action = Request.QueryString("action").ToString.ToLower
End If
' execute the action
Select Case action
Case "init"
Server.Transfer("form.aspx", False)
Case "validation"
Server.Transfer("validation.aspx", True)
Case Else
Server.Transfer("form.aspx", True)
End Select
End Sub
End Class
The controller works as follows:
- it looks for a parameter string containing the [action] parameter in the target URL. If this is missing, it behaves as if [action=init] were present in the parameter string.
- Only two actions are recognized:
- init: the pre-filled form is sent to the client
- validation: the page confirming the user’s entries is sent to the client
- If the action is not one of the above, the system behaves as if [action=init] were present. An error page could also be returned.
5.4.3. Processing the init action
When the controller processes the "init" action, it must generate a pre-filled form. It is the role of the [formulaire.aspx] page to perform this task. Its code is as follows:
<HTML>
<HEAD>
<title>Form</title>
<script language="javascript">
function clear(){
alert("You clicked the [Clear] button");
}
function clear(list){
list.selectedIndex=-1
}
</script>
</HEAD>
<body>
Form Management
<form name="form" method="post" action="?action=validation">
<form name="form" method="post" action="?action=validation">
Are you married?
<p align="center">
<input type="radio" value="yes" name="rdMarie">Yes <input type="radio" checked value="no" name="rdMarie">No
....
<select size="3" name="lstSimple">
<option value="1" selected>list1</option>
<option value="2">list2</option>
<option value="3">list3</option>
<option value="4">list4</option>
<option value="5">list5</option>
</select>
<INPUT type="button" value="Clear" name="btnClear" onclick="clear(lstSimple)">
....
<select multiple size="3" name="lstMultiple">
<option value="1" selected>multiple1</option>
<option value="2">multiple2</option>
<option value="3" selected>multiple3</option>
<option value="4">multiple4</option>
<option value="5">multiple5</option>
</select>
<INPUT type="button" value="Reset" name="btnResetMultiple" onclick="reset(lstMultiple)">
...
<input type="hidden" name="secret" value="aValue">
</form>
</body>
</HTML>
We see the HTML code for the form we looked at earlier, with a few differences. The code for the <form> tag has been modified:
<form name="form" method="post" action="?action=validation">
- post: the values entered by the user and sent to the server when the [submit] button is clicked will be sent using the HTTP POST method
- action: the syntax action="url" is used to specify the URL to which the form values should be sent. This URL may include a string of parameters in the form param1=val1¶m2=val2&... This is what is done here, where we pass the [action=validation] parameter to tell the controller the action it must take. Note that this parameter string is not preceded by a web address. The browser will therefore send the form parameters to the address that provided this form. In our example above, this address is [http://localhost/mvcform1]. The browser will thus make a [POST /mvcform1?action=validation] request to the machine [localhost].
Buttons have been added to allow the user to deselect items from the [lstSimple] and [lstMultiple] lists:
This translates to the following HTML code:
<select size="3" name="lstSimple">
<option value="1" selected>list1</option>
<option value="2">list2</option>
<option value="3">list3</option>
<option value="4">list4</option>
<option value="5">list5</option>
</select>
<INPUT type="button" value="Clear" name="btnClearSimple" onclick="clear(lstSimple)">
....
<select multiple size="3" name="lstMultiple">
<option value="1" selected>multiple1</option>
<option value="2">multiple2</option>
<option value="3" selected>multiple3</option>
<option value="4">multiple4</option>
<option value="5">multiple5</option>
</select>
<INPUT type="button" value="Clear" name="btnClearMultiple" onclick="clear(lstMultiple)">
Clicking the [Clear] button deselects all items in the list it is associated with. Let’s take the example of the [lstMultiple] list. Clicking the corresponding [Clear] button triggers the execution of the JavaScript function [raz(lstMultiple)]. Remember that the JavaScript code in an HTML document displayed by a browser is executed by that browser itself, not by the server. JavaScript is a very comprehensive language that allows you to add dynamic features to pages without server intervention. The [raz] function is as follows:
This function takes a parameter that is a JavaScript object representing an HTML list. This object has properties and methods. One of its properties is [selectedIndex], whose value is the number of the first selected option in the HTML list. If there is none, this property is -1. Conversely, setting a value for this property selects a new item in the HTML list, and setting it to -1 means no item is selected. This is what is done here.
Finally, note that the presentation code [form.aspx] is not accompanied by a controller [form.aspx.vb]. In fact, there is no server-generated dynamic content in the HTML document, so there is no need for a controller.
5.4.4. Handling the validation action
When the controller processes the "validation" action, it must generate a page listing the values entered by the user. It is the role of the [validation.aspx] page to perform this task. Visually, the page looks like this:
Its HTML code is as follows:
<%@ Page src="validation.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="validation" %>
<HTML>
<HEAD>
<title>validation</title>
</HEAD>
<body>
<P>Values entered</P>
<HR width="100%" SIZE="1">
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1">
<TR>
<TD width="84">rdMarie</TD>
<TD><% =rdMarie%></TD>
</TR>
<TR>
<TD width="84">C1</TD>
<TD><%=C1%></TD>
</TR>
<TR>
<TD width="84">C2</TD>
<TD><%=C2%></TD>
</TR>
<TR>
<TD width="84">C3</TD>
<TD><%=C3%></TD>
</TR>
<TR>
<TD width="84">txtInput</TD>
<TD><%=txtInput%></TD>
</TR>
<TR>
<TD width="84">txtPassword</TD>
<TD><%=txtPassword%></TD>
</TR>
<TR>
<TD width="84">inputField</TD>
<TD><%=inputField%></TD>
</TR>
<TR>
<TD width="84">cmbValues</TD>
<TD><%=cmbValues%></TD>
</TR>
<TR>
<TD width="84">lstSimple</TD>
<TD><%=lstSimple%></TD>
</TR>
<TR>
<TD width="84">lstMultiple</TD>
<TD><%=lstMultiple%></TD>
</TR>
<TR>
<TD width="84">secret</TD>
<TD><%=secret%></TD>
</TR>
</TABLE>
</body>
</HTML>
The dynamic parts <%=variable%> of the document are calculated by the associated controller [validation.aspx.vb]:
Imports System.Text.RegularExpressions
Public Class validation
Inherits System.Web.UI.Page
Protected rdMarie As String
Protected C1 As String
Protected C2 As String
Protected C3 As String
Protected txtInput As String
Protected txtPassword As String
Protected inputArea As String
Protected cmbValues As String
Protected lstSimple As String
Protected lstMultiple As String
Protected secret As String
Protected delimiter As New Regex("\r\n")
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'retrieve the posted parameters
rdMarie = getValue("rdMarie")
C1 = getValue("C1")
C2 = getValue("C2")
C3 = getValue("C3")
txtInput = getValue("txtInput")
txtPassword = getValue("txtPassword")
inputArea = String.Join(",", delimiter.Split(getValue("inputArea")))
cmbValues = getValue("cmbValues")
lstSimple = getValue("lstSimple")
lstMultiple = getValue("lstMultiple")
secret = getValue("secret")
End Sub
Private Function getValue(ByVal field As String) As String
' retrieves the value of the [champ] field from the posted request
' something?
If Request.Form(field) Is Nothing Then Return ""
' retrieve the value(s) of the field
Dim values() As String = Request.Form.GetValues(field)
Dim value As String = ""
Dim i As Integer
For i = 0 To values.Length - 1
value += "[" + values(i) + "]"
Next
Return value
End Function
End Class
The calculation of the values to be displayed is performed in the [Form_Load] procedure. The value of a "posted" field is obtained using the getValue(C) function, where C is the field name. The key points of this function are as follows:
- if C is not in the posted parameter string, then the empty string is returned as the value of C
- otherwise, the array of values for field C is obtained via [Request.Form.GetValues(C)]. These are concatenated into a string in the form [val1][val2]...[valn], where [vali] is the i-th value of field C
The [areaSaisie] field is handled in a special way. Its value is sent by the browser in the form areaSaisie=line1\r\nline2\r\n... where \r is the ASCII code 13 (carriage return) and \n is the ASCII code 10 (line feed). The function getValue(areaSaisie) is therefore the string "line1\r\nline2\r\n...". This string is split into lines using the [Regex.Split] method. This yields an array of strings {line1,line2,...}. This array is converted into the string "line1,line2,..." using the [String.Join] method. It is this final string that will be displayed as the value of the [areaSaisie] field. The goal here was to demonstrate how to extract the individual lines from an HTML [TextArea] field.
5.4.5. Tests
We place all the files (global.asax, global.asax.vb, formulaire.aspx, validation.aspx, validation.aspx.vb) in a folder named <application-path>. We start the Cassini server with the parameters (<application-path>,/mvcform1). We create an empty [default.aspx] file in the <application-path> folder, then request the URL [http://localhost/mvcform1]. Since [/mvcform1] is the virtual path to a folder and not a document, the web server will display the [default.aspx] document if it exists. That is why we created it. Before displaying it, the [global.asax] script will run and ultimately display the [form.aspx] page. This is why the [default.aspx] file can be empty.
Suppose the validated form is as follows:
Clicking the [Submit] button returns the following page:
First, note the response URL: [http://localhost/mvcform1/?action=validation]. This is the URL of the [action] attribute of the <form> tag in the [formulaire.aspx] form:
<form name="form" method="post" action="?action=validation">
Let’s examine the values obtained for the different form fields one by one:
field | value | HTML | comments |
rdMarie | yes | <input type="radio" value="yes" name="rdMarie">Yes <input type="radio" checked value="no" name="rdMarie">No | The value obtained is the [value] attribute of the checkbox |
C1 | a | <input type="checkbox" value="one" name="C1">1 | same |
C2 | two | <input type="checkbox" checked value="two" name="C2">2 | same |
C3 | <input type="checkbox" value="three" name="C3">3 | This button was not checked by the user. Its value was therefore not sent by the browser. In the code, the condition [Request.Form("C3") is Nothing] was therefore true. | |
txtInput | Programming ASP.NET | <input type="text" ... name="txtSaisie"> | The value returned is the text in the input field at the time of validation |
txtMdp | password | <input type="password" ...name="txtMdp"> | same |
inputField | the basics of web programming | <textarea name="areaSaisie"> ...</textarea> | same |
cmbValues | 3 | <select name="cmbValues"> ... <option value="3">choice3</option> </select> | The value obtained is the [value] attribute of the selected option |
lstSimple | 3 | <select size="3" name="lstSimple"> .... <option value="3">list3</option> ... </select> | same |
lstMultiple | 2 4 | <select multiple size="3" name="lstMultiple"> ... <option value="2">multiple2 </option> ... <option value="4">multiple4 </option> ... </select> | The values obtained are those of the [value] attributes of the selected options |
secret | aValue | <input type="hidden" name="secret" value="aValue"> | The value obtained is the [value] attribute of the hidden field |
Now let's look at lists. Suppose that at the time of validation, the form's state is as follows:
- the [choice1] option is selected in the combo box
- no option is selected in the other two lists. We used the [Clear] buttons to achieve this.
Here is the page returned after validation:
When no value is selected in a list, the browser does not send a parameter for it. In the code of [validation.aspx.vb], the expressions [Request.Form("lstSimple")] and [Request.Form("lstMultiple")] are therefore equal to the constant [Nothing], hence the result shown above.
5.5. Maintaining a page's state
5.5.1. Maintaining a page's state with a session
We duplicate the entire previous application into a new folder. We add a link to the [validation.aspx] page allowing the user to return to the form:
The change to be made on the [validation.aspx] page is the addition of the link:
.....
<TR>
<TD width="84">secret</TD>
<TD><%=secret%></TD>
</TR>
</TABLE>
<P>
<a href="?action=form">Back to form
</P>
</body>
</HTML>
The [href] attribute of the link has a value of a URL with a single parameter [action=form], allowing the server to know that it must display the form as it was when it was submitted. This differs from the [init] action, which displays a predefined form. The URL with the [?action=form] parameter does not actually have a URL. It will therefore be the same as the one that displayed the submission page. As we saw in the previous example, this is the URL of the application folder. The request will therefore go through the controller. The controller must now handle the [form] action. The code in [global.asax.vb] is modified as follows:
Sub Application_BeginRequest(ByVal sender As Object, ByVal e As EventArgs)
' retrieve the action to be performed
Dim action As String
If Request.QueryString("action") Is Nothing Then
action = "init"
Else
action = Request.QueryString("action").ToString.ToLower
End If
' execute the action
Select Case action
Case "init"
Server.Transfer("form.aspx", False)
Case "validation"
Server.Transfer("validation.aspx", True)
Case "form"
Server.Transfer("form.aspx", True)
Case Else
Server.Transfer("form.aspx", True)
End Select
End Sub
If the action is "form", we simply forward the request to the [form.aspx] page. We know that this page displays a predefined form with no variable parts. Therefore, this page cannot display the form with the values it had when it was submitted. We are trying to highlight this point here. If all the application files have been placed in <application-path>, we launch Cassini with the parameters (<application-path>,/mvcform2) and then request the URL [http://localhost/mvcform2]. We get the following page (partial view):
We fill out the form as follows and then submit it:
We get the following confirmation page:
We use the [Back to form] link present (but not shown) on the page above. We receive the following response from the server:
We observe that:
- the requested URL does indeed have the action=form parameter as desired
- the displayed form has lost the entered values.
We know why we can’t retrieve the entered values. If we look at the code for the [form.aspx] document, we see that everything is static, so it’s forced to display the same page every time. It’s clear that we need to make this code dynamic. It needs to display the values validated by the user. But where should we store them?
Let’s recall the iron law of the stateless HTTP protocol:
- The URL [http://localhost/mvcform2] is requested—a response is received. A TCP-IP connection was opened between the client and the server at the start of the request and closed at the end of the response.
- The user enters and then submits data. The URL [http://localhost/mvcform2/?action=validation] is requested—a response is received. A new TCP/IP connection was opened and then closed between the two parties.
- The user clicks the [Back to form] link. The URL [http://localhost/mvcform2/?action=formulaire] is requested—a response is received. A new TCP/IP connection was opened and then closed between the two parties.
The request-response cycles are independent of one another because each uses a new TCP-IP connection. When a client-server application uses a single TCP-IP connection for a series of exchanges, the server can identify a client via its connection. It can therefore store information that it will link to a specific connection and thus track the exchanges. When exchanges occur over different connections, the server cannot identify a client by a connection. Another method is required. We introduced one such method in the previous chapter: the session mechanism. It allows request-response cycles to store information in a [Session] object accessible to all subsequent cycles.
Now that we have an MVC application with sessions, we can no longer use the [global.asax] file as the controller, as shown in the previous chapter. The role of application controller must be handled by a specific page dedicated to this purpose. Here, that will be the [main.aspx] page. We will proceed as follows:
- When the user submits their data (action=validation), the [main.aspx.vb] controller will store it in the current session before displaying the validation page.
- When the form needs to be displayed with the entered values (action=form), the controller [main.aspx.vb] will retrieve them from the session and place them in the context before displaying the form.
5.5.2. The new application controller
The application controller consists of two files [main.aspx, main.aspx.vb]:
[main.aspx]
[main.aspx.vb]
Imports System.Collections.Specialized
Imports Microsoft.VisualBasic
Public Class main
Inherits System.Web.UI.Page
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
' retrieve the action to be performed
Dim action As String
If Request.QueryString("action") Is Nothing Then
action = "init"
Else
action = Request.QueryString("action").ToString.ToLower
End If
' execute the action
Select Case action
Case "init"
' display the pre-filled form
Context.Items("form") = initForm()
Server.Transfer("form.aspx", True)
Case "validation"
' displays the confirmation page after saving the posted values to the session
Session.Item("form") = Request.Form
Server.Transfer("validation.aspx", True)
Case "form"
' the form is displayed with values retrieved from the session
Context.Items("form") = Session.Item("form")
Server.Transfer("form.aspx", True)
Case Else
' displays the pre-filled form
Context.Items("form") = initForm()
Server.Transfer("form.aspx", True)
End Select
End Sub
Private Function initForm() As NameValueCollection
' Initialize the form
Dim form As New NameValueCollection
form.Set("rdMarie", "no")
form.Set("C2", "two")
form.Set("txtInput", "a few words")
form.Set("txtMdp", "thisissecret")
form.Set("inputArea", "line1" + ControlChars.CrLf + "line2" + ControlChars.CrLf)
form.Set("cmbValues", "2")
form.Set("lstSimple", "1")
form.Set("lstMultiple", "1")
form.Add("lstMultiple", "3")
Return form
End Function
End Class
We see the essence of the application controller structure discussed earlier, with the following differences:
- the controller's work is performed in the [Form_Load] procedure
- in the case of the [validation] action, the form values present in [Request.Form] are stored in the session associated with the "form" key. Execution is then transferred to the [validation.aspx] page, which will display these values.
- For other actions, execution is transferred in all cases to the [formulaire.aspx] page. This page expects a "formulaire" key in its context, which will be associated with an object of type [Request.Form], i.e., of type [NameValueCollection]. This object must contain the collection of values for the form fields.
- If the action is [init] or an unrecognized action, the collection of values is constructed arbitrarily by the [initForm] function.
- If the action is [form], this collection is the [Request.Form] collection that was placed in the session by the [validation] action
5.5.3. The new form
Because the application no longer displays the same content in the form, it must be generated dynamically. The new [form.aspx] page becomes the following:
<%@ Page src="formulaire.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="formulaire" %>
<HTML>
<HEAD>
<title>Form</title>
<script language="javascript">
function clear(){
alert("You clicked the [Clear] button");
}
function clear(list){
list.selectedIndex=-1
}
</script>
</HEAD>
<body>
Form Management
<form name="form" method="post" action="main.aspx?action=validation">
<form name="form" method="post" action="main.aspx?action=validation">
<table border="1">
Are you married?
<p align="center">
<INPUT type="radio" value="yes" name="rdMarie" <%=rdouichecked%>>Yes
<INPUT type="radio" value="no" name="rdMarie" <%=rdnonchecked%>>No
<TR>
<TD>Checkboxes
</TD>
<TD>
<P align="center">
<INPUT type="checkbox" value="one" name="C1" <%=c1checked%>>1
<INPUT type="checkbox" value="two" name="C2" <%=c2checked%>>2
<INPUT type="checkbox" value="three" name="C3" <%=c3checked%>>3
</P>
</TD>
</TR>
<TR>
<TD>Input field</TD>
<TD>
<P align="center">
<INPUT type="text" maxLength="30" value="<%=txtSaisie%>" name="txtSaisie">
</P>
</TD>
</TR>
Password
<p align="center">
<input type="password" maxlength="12" size="12" value="<%=txtMdp%>" name="txtMdp">
Input box
<textarea name="areaSaisie"><%=areaSaisie%></textarea>
ComboBox
<select name="cmbValues">
<%=cmbValueOptions%>
</select>
Single-select list
<select size="3" name="lstSimple">
<%=lstSimpleOptions%>
</select>
<INPUT type="button" value="Reset" name="btnReset" onclick="reset(lstSimple)">
Multiple-choice list
<select multiple size="3" name="lstMultiple">
<%=lstMultipleOptions%>
</select>
<INPUT type="button" value="Clear" name="btnClearMultiple" onclick="clear(lstMultiple)">
Simple button
<p align="center">
<input onclick="clear()" type="button" value="Clear" name="clearButton">
Submit button
<p align="center">
<input type="submit" value="Send" name="btnEnvoyer">
Reset button
<p align="center">
<input type="reset" value="Reset" name="btnReset" runat="server">
<input type="hidden" name="secret" value="aValue">
</form>
</body>
</HTML>
Let's comment on the dynamic variables that appear in the HTML code:
variable | role |
will have the value "checked" if the [yes] radio button should be selected, otherwise the value "" | |
same for the [no] radio button | |
same for the [C1] checkbox | |
same for the checkbox [C2] | |
same for checkbox [C3] | |
the text to be placed in the [txtInput] field | |
the text to be placed in the [txtPassword] field | |
the text to be placed in the [areaInput] field | |
the HTML text for the options in the [cmbValeurs] dropdown list | |
the HTML text of the options in the [lstSimple] dropdown list | |
the HTML text of the options in the [lstMultiple] dropdown list | |
The values of these variables are calculated by the page controller [formulaire.aspx.vb]:
Imports Microsoft.VisualBasic
Imports System.Collections.Specialized
Public Class form
Inherits System.Web.UI.Page
' constant form fields
Private labelsCmbValues() As String = {"choice1", "choice2", "choice3"}
Private valuesCmbValues() As String = {"1", "2", "3"}
Private labelsLstSimple() As String = {"list1", "list2", "list3"}
Private valuesLstSimple() As String = {"1", "2", "3"}
Private labelsLstMultiple() As String = {"multiple1", "multiple2", "multiple3", "multiple4", "multiple5"}
Private valuesLstMultiple() As String = {"1", "2", "3", "4", "5"}
' dynamic form fields
Protected rdouichecked As String
Protected rdnonchecked As String
Protected c1checked As String
Protected c2checked As String
Protected c3checked As String
Protected txtInput As String
Protected txtPassword As String
Protected inputArea As String
Protected cmbOptionValues As String
Protected lstSimpleOptions As String
Protected lstMultipleOptions As String
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
' Retrieve the previous request from the session
Dim form As NameValueCollection
If Not Context.Items("form") Is Nothing Then
form = Context.Items("form")
Else
form = New NameValueCollection
End If
' prepare the page to be displayed
' radio buttons
rdouichecked = ""
rdnonchecked = "checked"
If isEqual(form("rdMarie"), "yes") Then
rdouichecked = "checked"
rdnonchecked = ""
End If
' checkboxes
c1checked = ""
If isEqual(form("C1"), "one") Then c1checked = "checked"
c2checked = ""
If isEqual(form("C2"), "two") Then c2checked = "checked"
c3checked = ""
If isEqual(form("C3"), "three") Then c3checked = "checked"
' input fields
txtInput = ""
If Not form("txtSaisie") Is Nothing Then txtSaisie = form("txtSaisie").ToString
txtPassword = ""
If Not form("txtMdp") Is Nothing Then txtMdp = form("txtMdp").ToString
inputArea = ""
If Not form("inputArea") Is Nothing Then inputArea = form("inputArea").ToString
' lists
Dim selections() As String = {}
If Not form("cmbValeurs") Is Nothing Then selections = form.GetValues("cmbValeurs")
cmbValueOptions = getOptions(cmbValueValues, cmbValueLabels, selections)
selections = New String() {}
If Not form("lstSimple") Is Nothing Then selections = form.GetValues("lstSimple")
lstSimpleOptions = getOptions(lstSimpleValues, lstSimpleLabels, selections)
selections = New String() {}
If Not form("lstMultiple") Is Nothing Then selections = form.GetValues("lstMultiple")
lstMultipleOptions = getOptions(lstMultipleValues, lstMultipleLabels, selections)
End Sub
Private Function getOptions(ByRef values() As String, ByRef labels() As String, ByRef selections() As String) As String
' returns the HTML code for the options of a <select> tag
' values: array of the tag's option values
' labels: array of the tag's option labels
' selections: options to be selected
Dim iValue As Integer
Dim iSelection As Integer
Dim selected As String
Dim toString As String = ""
' loop through the list of option values
For iValue = 0 To values.Length - 1
' check if the current value should be selected
selected = "" : iSelection = 0
Do While iSelection < selections.Length And selected = ""
If values(iValue) = selections(iSelection) Then selected = "selected"
iSelection += 1
Loop
' insert the HTML code for the option
toString += "<option " + selected + " value='" + values(iValue) + "'> " _
+ labels(iValue) + "</option>" + ControlChars.CrLf
Next
' we return the result
Return toString
End Function
Private Function isEqual(ByVal field As Object, ByVal value As String) As Boolean
' Returns True if the field is equal to value
If champ Is Nothing OrElse champ.ToString <> value Then
Return false
Else
Return True
End If
end function
End Class
When the [form.aspx] page begins to run, it will find in its context a "form" key associated with the collection of field values it needs to display.
' retrieve the previous request from the session
Dim form As NameValueCollection
If Not Context.Items("form") Is Nothing Then
form = Context.Items("form")
Else
form = New NameValueCollection
End If
One might wonder why we check whether [Context.Items("form")] exists. In fact, the controller assigns a value to this object in all cases. However, nothing prevents the client from directly requesting the [form.aspx] page without going through the controller. If that were the case, the previous code would work with an empty collection of values, but there would be no "crash."
The code iterates through the collection of values it has received to calculate all the dynamic variables of the associated HTML page. Although it is lengthy, this code is not particularly complicated, and we’ll leave it to the reader to explore it so as not to burden this explanation. We will, however, focus on how to generate the HTML code for the three [select] lists. This code is generated by the following function:
Private Function getOptions(ByRef values() As String, ByRef labels() As String, ByRef selections() As String) As String
' returns the HTML code for the options of a <select> tag
' values: array of the tag's option values
' labels: array of the tag's option labels
' selections: options to be selected
Dim iValue As Integer
Dim iSelection As Integer
Dim selected As String
Dim toString As String = ""
' loop through the list of option values
For iValue = 0 To values.Length - 1
' Check if the current value should be selected
selected = "" : iSelection = 0
Do While iSelection < selections.Length And selected = ""
If values(iValue) = selections(iSelection) Then selected = "selected"
iSelection += 1
Loop
' insert the HTML code for the option
toString += "<option " + selected + " value='" + values(iValue) + "'> " _
+ labels(iValue) + "</option>" + ControlChars.CrLf
Next
' return the result
Return toString
End Function
Note that the options of a <select> tag correspond to the following HTML code:
For each option, there are therefore three pieces of information to generate:
- the option's value in the [value] attribute
- the option text between the <option> and </option> tags
- the [selected] keyword if the option should be selected in the list
To generate these three pieces of information for each option, the [getOptions] function receives three values:
- the array of option values in [values]
- the array of option texts in [labels]
- the array of values to select in [selections]
5.5.4. The validation page
The validation page remains unchanged:
[validation.aspx]
<%@ Page src="validation.aspx.vb" Language="vb" AutoEventWireup="false" Inherits="validation" %>
<HTML>
<HEAD>
<title>validation</title>
</HEAD>
<body>
<P>Values entered</P>
<HR width="100%" SIZE="1">
<TABLE id="Table1" cellSpacing="1" cellPadding="1" width="300" border="1">
<TR>
<TD width="84">rdMarie</TD>
<TD><% =rdMarie%></TD>
</TR>
<TR>
<TD width="84">C1</TD>
<TD><%=C1%></TD>
</TR>
<TR>
<TD width="84">C2</TD>
<TD><%=C2%></TD>
</TR>
<TR>
<TD width="84">C3</TD>
<TD><%=C3%></TD>
</TR>
<TR>
<TD width="84">txtInput</TD>
<TD><%=txtInput%></TD>
</TR>
<TR>
<TD width="84">txtPassword</TD>
<TD><%=txtPassword%></TD>
</TR>
<TR>
<TD width="84">inputField</TD>
<TD><%=inputField%></TD>
</TR>
<TR>
<TD width="84">cmbValues</TD>
<TD><%=cmbValues%></TD>
</TR>
<TR>
<TD width="84">lstSimple</TD>
<TD><%=lstSimple%></TD>
</TR>
<TR>
<TD width="84">lstMultiple</TD>
<TD><%=lstMultiple%></TD>
</TR>
<TR>
<TD width="84">secret</TD>
<TD><%=secret%></TD>
</TR>
</TABLE>
<P>
</P>
</body>
</HTML>
[validation.aspx.vb]
Imports Microsoft.VisualBasic
Imports System.Text.RegularExpressions
Public Class Validation
Inherits System.Web.UI.Page
Protected rdMarie As String
Protected C1 As String
Protected C2 As String
Protected C3 As String
Protected txtInput As String
Protected txtPassword As String
Protected inputArea As String
Protected cmbValues As String
Protected lstSimple As String
Protected lstMultiple As String
Protected secret As String
Protected delimiter As New Regex("\r\n")
Private Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load
'retrieve the posted parameters
rdMarie = getValue("rdMarie")
C1 = getValue("C1")
C2 = getValue("C2")
C3 = getValue("C3")
txtInput = getValue("txtInput")
txtPassword = getValue("txtPassword")
inputArea = String.Join(",", delimiter.Split(getValue("inputArea")))
cmbValues = getValue("cmbValues")
lstSimple = getValue("lstSimple")
lstMultiple = getValue("lstMultiple")
secret = getValue("secret")
' we save them in the session
'Session("form") = Request.Form
End Sub
Private Function getValue(ByVal field As String) As String
' retrieves the value of the [field] field from the posted request
' anything?
If Request.Form(field) Is Nothing Then Return ""
' retrieve the value(s) of the field
Dim values() As String = Request.Form.GetValues(field)
Dim value As String = ""
Dim i As Integer
For i = 0 To values.Length - 1
value += "[" + values(i) + "]"
Next
Return value
End Function
End Class
5.5.5. Tests
The files [main.aspx, main.aspx.vb, form.aspx, form.aspx.vb, validation.aspx, validation.aspx.vb] are placed in <application-path> and Casini is launched with the parameters (<application-path>,/mvcform3). We then request the URL [http://localhost/mvcform3/main.aspx]. We get the pre-initialized form:
We fill out the form as follows:
We click the [Submit] button above. We receive the following response from the server:
We use the [Back to form] link above to return to the form. We receive the following new response:
We see the form exactly as we submitted it.
5.5.6. Conclusion
The previous example showed us that it is possible to maintain a page’s state throughout the request-response cycles between the client and the server. However, this is not a trivial task. We will see in a later chapter that with ASP.NET, it is possible to let the server restore a page’s state on its own.