Syllabus Schedule Project Labs Canvas Server Access CSS Tutorial Assignment 1 Assignment 2 Assignment 3 Assignment 4 Assignment 5 Assignment 6 Assignment 7 Assignment 8 Assignment 9

Assignment 3 -- Server Controls

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:

  1. Change the first textbox from name to email.
  2. 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.
  3. Add radio buttons for experience level, as shown in the example.
  4. Add a requiredField validator to make sure that a radio button was selected.
  5. Add a drop list for selecting the state.
  6. Add a requiredField validator for state.
  7. 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 - With the user inputs validated the order can now be processed. Copy and rename the page you created in the previous exercise.

Modify the code as follows:

  1. Add price information to the page text as shown in the example.
  2. Add a second panel control to show the results of the calculations. Give it a different background color then the first panel.
  3. The price calculations are displayed in a table. Create an HTML table in the code render portion of the page and use separate labels to display each calculation (approximately 12 labels total).
  4. The price calculations are performed in btnSubmit_onClick handler. Details are below.
  5. 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 the value property to store the prices and discounts.
    • To retrive price, discounts, and tax rate from the controls use the following syntax:

      //Board price
      double dblPrice = Convert.ToDouble(dlModel.SelectedValue);
      //format price as currency and assign to label
      lblModelPrice.Text = dblPrice.ToString("c");

    • Assign the model name and price to labels as follows:

      lblModelName.Text = dlModel.SelectedItem.Text;

  6. Experience surcharge :
    • The following syntax formats the experience surcharge as a percentage:

      double expSurcharge = Convert.ToDouble(rbExperience.SelectedValue);
      lblExperiencePercent.Text = expSurcharge.ToString("p");

    • Display the sum of the board price and experience surcharge.
  7. Discounts:
    • Use a foreach loop to iterate through the checkbox list as done in the snowboard template code.
  8. Subtotal:
    • Show the price before tax.
  9. State Tax:
    • Syntax is similar to experience surcharge.
  10. Final Price:
    • Display the total price.

  11. 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.
  12. 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.


Submission instructions: Submit assignments via the Canvas course management system. Submit the full URL for each exercise in the assignment, listing the URLs in the same order that they are listed in the assignment. To minimize typos in URLs it is strongly recommended that you copy the URLs from the address bar of the browser rather than trying to type them. Incorrect URLs will not be graded and no credit will be given.

When pages are connected via navigation (as in your music store project) it is only necessary to submit the URL of the first page.

Regular Expressions HTML Color Names Color Picker ASCII Character Codes Unicode Character Codes