$24
Assignment 3 (Chapter 3) Solution
Complete the following requirements. Zip all needed files (not just your .sln file) and upload to the Assignment 3 dropbox. Due date of this assignment is indicated in Brightspace/D2L.
Build the Quotation Application and Apply CSS and Bootstrap Styling
This assignment is similar, but not exact, to Assignment #2. However, you will NOT use an html Table to format the page. Instead, you will use the Bootstrap tools and your own CSS to make your web page look like the one below.
Functional Requirements
Create functionality to support the user entering the sales price and discount percent, and the
calculate button calculating the result and displaying the discount amount and total price.
Create validation to alert the user with an error message to the right of the error if an invalid entry is made.
o Required fields are: Sales Price, Discount Percent. o Range requirements are:
Sales Price should be between 100 and 2500, inclusive.
Discount Percent should be between 5 and 75, inclusive. Apply styling using CSS and Bootstrap.
Create the Web Form Interface
Create a new web application using the EMPTY template.
Add a web form and give it your name of choice.
Give your page a title using the TITLE tag.
Use the h1 heading at the top of the web page.
Using the html <label tag, create the text labels you see in the picture.
NOTE: When text is static, you use the html <label tag.
Using the asp Textbox control, create the Sales Price and Discount Percent input fields.
Using the asp Label control, create the Discount Amount and Total Price fields.
Using the asp Button control, create the Calculate button.
Use the Properties window to:
Set appropriate IDs for the asp controls.
Set the text for the button to “Calculate”.
Add required and range validators for the applicable text boxes based on the functional requirements identified above.
Add the C# Code and Necessary Libraries
Use the Click event of the Calculate button to calculate the discount amount and total price and display them in currency format.
Add jQuery and Bootstrap NuGet packages to your application:
Right-click your solution name.
Select Manage NuGet.
Using the Browse tab, search for aspnet.scriptmanager.jquery. Install it.
Search for Bootstrap and install.
Close the Nuget window.
NOTE: The jQuery library will avoid the “unobtrusive” error message. jQuery is used by the Validation Controls that you will add to your application below.
Set up the head section of the document to work with CSS and Bootstrap
1. Add the following viewport metatag to the head section:
<meta name="viewport" content="width=device-width, initial-scale=1" /
Add a new style sheet to the Content folder. Give it any name of your choice.
Link the bootstrap.min.css and your custom css file.
Create script tags for Bootstrap and jQuery scripts (jquery-3.3.1.min.js and bootstrap.min.js). Remember that the Bootstrap script tag needs to come after jQuery script tag.
Use the Bootstrap grid CSS classes to lay out the page
Surround all the content inside your <body element with a <div</div that has a Bootstrap class of “container”.
Use the “jumbotron” class for the <h1 element. (This creates a light-gray box as a header on the page.)
Use the “form-group” Bootstrap class to group logic items together such our html label, the corresponding textbox, and the validators. Do this by surrounding them in a <div</div and applying the class of “form-group”. To get additional spacing set for you, also add the “row” class to that same DIV tag (i.e., <div class=”form-group row”). Put the Calculate button in a group of its own.
Use the Bootstrap column CSS classes for a small viewport for the following:
On the Sales Price label, make it span 3 columns. Also, use the “col-form-label” class.
On the Sales Price textbox, make it span 3 columns. Also, use the “form-control” class.
Surround the Sales Price validation controls in a DIV tag, then make it span 6 columns.
Repeat the spacing for the discount percent, discount amount, total price label and amount.
Add a div surrounding the calculate button which uses a Bootstrap style to span 9 columns, but offset it 3 columns so it lines up with the text boxes and label controls above it (i.e., use Bootstrap class “offset-sm-3” which pushes the start point over 3 columns).
Page 3 of 4
Use Bootstrap CSS classes for additional formatting
Add the “btn” and “btn-primary” classes to the button server control (btn makes it larger in height; btn-primary makes the button blue).
Add the “text-danger” class to the validation controls (this makes the text red).
Use custom CSS classes
Open your custom css file and remove the body Type selector. Then, add a Class selector to override the font-weight to bold for the Bootstrap class “col-form-label”.
Add a class selector with a meaningful name that will vertically align the error message on your validators. Use “line-height:2em;”. By setting the line-height larger than the font, it will center within the div. This will only work for a single-line of text.
Grading Rubric
No errors in spelling, grammar, CSS (use validator), or code execution.
5 points
Calculations must be correct.
5 points
Look mimics above image using Bootstrap and a custom external CSS style sheet.
10 points
Required and range validators must display an error message in red when violated.
5 points
ALL asp controls must have meaningful names; C#, CSS and HTML code commented;
5 points
