Assignment 3 -- Web Controls,
Validation Controls and working with control values.
1.
SnowBoardorder01.aspx - Create a form that uses server and validation controls to collect
information from the client and display the validated data. Use
the snowboardOrder (source) from class as a template.
Modify the template as follows:
- Change the first textbox from name to email.
- Add a regular expression validator to check that the email address
has a valid format. Note that required field validator is the ONLY validator that checks for empty fields so in most cases it must be used in conjunction with other validators (unless an empty field is acceptable). Search the web to find a regular expression that validates emails. At a minimum it should check for an @
and one or more dots (e.g. dawn22@gmail.com).
- Add radio buttons for experience level, as shown in the example.
- Add a requiredField validator to make sure that a radio button was
selected.
- Add a drop list for selecting the state.
- Add a requiredField validator for state.
- Add an image of a snowboard that is visible only after the data is
validated. Use the image control to display the snowboard. This
control has a "visible" property that you can use to hide the image
until valid data has been entered. You may use the image in the example or find your own.
Locate each validator control so that
the message appears below or to the right of the control being validated. The other controls on the page should not jump around with an error message is displayed.
When the button control is submitted its handler should hide the form in a panel, display all of the user's inputs and display an image of a snowboard.
2. SnowBoardorder02.aspx - Now that the data is validated we can process the order. Copy
and rename the page you created in the previous exercise.
Modify the code as follows:
- Add price information to the page text as shown in the example.
- Add a second panel control to show the results of the calculations.
Give it a different background color then the first panel.
- The price calculations are displayed in a table. There are two options of displaying the data:
- Put all the HTML, including the html for the table, in a single label control.
- Create an HTML table in the code render portion of the page and use separate labels to display each calculation.
- The second method is a bit easier because it is easier to read and facilitates cutting-and-pasting table rows.
- The price calculations are performed in btnSubmit_onClick handler. Details are below.
- Base Price Calculation
- The ListItem object supports both text and value properties. We are using the text property to display the names of the boards and we could put the price into in the value field. This would eliminate the need to lookup prices on the server side. The problem is that the prices would then be sent to the client where a devious user could modify them. Therefore we will store the prices on the server.
- The SelectedIndex
property of the DropDownList control returns 0 if the first item on the list was selected, 1 if the
second item was selected, etc.
- A relatively easy way to look up the prices on the server is to put the prices into an array in the same order that the boards are listed in the drop down list. This allows the following lookup method:
double[] boardprice = {999, 200, 225, 250, 300 };
double dblPrice = boardprice[dlModel.SelectedIndex];
- The first price listed in the array is a dummy value since the first position in drop list is not used for a snowboard model.
- Assign the model name and price to labels as follows:
lblModelName.Text = dlModel.SelectedItem.Text;
lblModelPrice.Text = dblPrice.ToString("c");
- Experience surcharge :
- Use an array to store the surcharges rates. Syntax is similar to board price.
Subtotal:
- Display the sum of the board price and experience surcharge.
- Discounts:
- Use an array to store the discount rates. Use a for loop (or foreach loop) to calculate the total discount. Syntax is:
for (int i=0; i< cbDiscounts.Items.Count; i++)
{
if (cbDiscounts.Items[i].Selected)
{
discountPercent += discounts[i];
lblDiscounts.Text += cbDiscounts.Items[i].Text;
}
}
- Subtotal:
- Show the price before tax.
- State Tax:
- Use an array to store the state tax rates. Syntax is similar to board price.
- Final Price:
- Provide a button that allows the user to edit the order. The handler for the button is simple. All it does is change the visibility of the form panel to true and the visibility of the results panel to false.
- Provide a hyperlink that reloads the page.
3.CalculatorValid.aspx - Copy and rename Calculator.aspx from A02 and add validation controls. Each textbox requires a requiredFieldValidator and a CompareValidator. The CompareValidator checks that the datatype is double. The SetFocusOnError property is a handy feature that was added to the server controls in .NET 2.0. Set this property to true for all the validation controls.
Don't forget to enable server-side validation by adding the following statement to each of the five event handlers:
if (!Page.IsValid) return;
4. ValidationGroups.aspx - Validation groups (documentation) are another handy feature added to .NET 2.0. Previously if a page used more than one submit button it was quite difficult to use validation controls. For instance, a login page might have textboxes for a login and another textbox for search. If the user tried to do a search the validation controls on the empty login textboxes would fire and prevent the search from submitting. Validation groups prevent this behavior by allowing us to assign the different validators and buttons to different validation groups.
Copy the previous exercise and add a textbox, button and label. When the search button is clicked the label should display the search term. Before you add the Validation groups try them without adding validation groups. Note: both the validation controls and the buttons must be assigned to validation groups.