Question: For this exercise, you will build a one - page application with the user interface that is shown below. This time, the user will enter

For this exercise, you will build a one-page application with the user interface that is shown below. This time, the user will enter the sales price and discount percent, and the application will calculate and display the discount amount and total price. If a user entry is invalid, an error message will be displayed to the right of the related text box.
Start a new web application and build the form
1. Start a new web application named HW02 where is your last name, e.g. HW02Smith. I would suggest storing the application in a folder called IT482HW for easy reference and to separate it from in-class exercises.
2. Add a web form with the name Default.aspx. Type Price quotation inside the title tags in the head section of the document and delete the default div element in the body section.
3. Add an h1 heading to the form element with the text shown above.
4. Add a table to the form below the heading with 8 rows and 3 columns. (The third column will be used for validation controls.)
5. Add the text and button shown above to the cells in the first, third, fourth, sixth, and eighth rows of the first column.
6. Adjust the width of the table by dragging its right handle and adjust the widths of the columns by dragging their right borders so the widths are like what is shown above. (It may take some time to get this right, and the form may look different in Design view than it does when you run the application.)
7. Add text boxes to the first and third rows in the second column and add label controls to the fourth and six rows in the second column.
8. Use the Properties window to set appropriate IDs for the controls and to format the first text box and the two labels with bold type. Then, use the Properties window to set the text for the button to Calculate.
9. Test this form to see how it looks in a browser, and make whatever adjustments are necessary.
Add the C# code for the form
10.Create an event handler for the Click event of the Calculate button. This handler should calculate the discount amount and total price and display them in currency format as shown above.
11.Test this form to see whether it works correctly, and make whatever corrections are necessary.
Add validators for the text boxes
12.Add a required field validator in the column to the right of each text box that tests whether an entry has been made in the text box. If an entry has not been made, Required should be displayed.
13.Add a range validator in the column to the right of each text box. The one for the Sales Price should test to see whether the entry is between 10 and 1000, and an appropriate message should be displayed if it isnt. The one for the Discount Percent should test whether the entry is between 10 and 50, and an appropriate message should be displayed if it is not within this range. You may modify the ranges is you wish to run the application with different values.
14.If necessary, adjust the C# code for the page so it only does the calculations if the entries are valid.
15.Run the application and verify that it throws an error because its using unobtrusive validation but cannot find the jQuery library.
16.Turn off unobtrusive validation for the page. Then, run and test the application, and make whatever corrections are necessary.
Make any final adjustments
17.Take a final look at the application and make any adjustments for improving the look of the application, the operation of the application, or the clarity and logic of the code.

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Programming Questions!