5. Click the BMICalc.aspx tab at the top of the editing window to select the web form again. Pull down the Format menu and click Attach Style Sheet. In the Select Style Sheet dialog, under Contents of folder on the right, select StyleSheet.css, then click OK. 6. In the Solution Explorer window, double-click Default.htm to open it. Switch to Design View if necessary. Locate the element-selector buttons in the center below the editing window, hover the cursor over the element selector button, and click the dropdown arrow that appears beside it. Click on Select Tag Content (this will select everything inside the body of the page, but not the and tags themselves). Pull down the Edit menu and click Copy, or press Ctrl+C to copy the content. 7. Click the BmiCalc.aspx tab at the top of the editing window to return to the BmiCalc.aspx web form. Click inside the div and paste in the content that you copied from Default.htm. 8. Click to position the cursor anywhere inside div#main, that is, anywhere within the two paragraphs of text beginning “Almost 2,400 years ago . . . ” and “Dr. Dinewell is a board-certified . . . .” Hover the cursor over theelement selector below the editing window, click the dropdown arrow that appears, and click on Select Tag Content. Press the Delete key to delete the contents of the #main div. 9. Inside div#main, type Body Mass Index (BMI) Calculator. Click to position the cursor at the end of this line, and press Enter twice to insert a blank line. 10. Type Height (inches): followed by two spaces. In the Standard section of the Toolbox, double-click on the TextBox control to add it to the web form. In the Properties window, change the Textbox’s (ID) property to txtHeight. 11. Click to position the cursor immediately to the right of the TextBox that you just added, and press Enter twice to create a blank line. Type Weight (pounds): followed by two spaces, and add another TextBox to the form. Set this second TextBox’s (ID) property to txtWeight. 12. Insert another blank line using the Enter key, and in the Standard section of the Toolbox, double-click on the Button control to add it to the form. Set the Button’s (ID) property to btnCalculate and its Text property to Calculate BMI. 13. Insert another blank line using the Enter key, and add a Literal to the form below the Button. Set this Literal’s (ID) property to litResult. Delete the contents of the Literal’s Text property (if any). 14. Highlight “Body Mass Index (BMI) Calculator” at the top of the form. Pull down the Format menu, choose Font, set the Font style to Bold, and click OK; or just press Ctrl+B. Your web form at this point should look like the following: 15. Click the Save button on the toolbar to save your work so far. STEP 4: Add Calculate BMI Event Handler in Code-Behind File. 1. Double-click the btnCalculate Button. Visual Studio will open the code-behind file for the web form and insert a skeleton procedure to handle the click event for this Button. 2. In the BIS450 Lab2 Code Snippets.txt that you downloaded from Doc Sharing, select and copy the section of code beginning with the comment “Use methods of shared BMI class to calculate and interpret BMI.” Paste this code in between the Protected Sub btnCalculate_Click(. . . ) and End Sub statements in the code-behind file. After pasting in this code, the code-behind file should look like this: 3. Click the Save button on the toolbar to save your work so far. STEP 5: Create a Web.config File to Aid Debugging. 1. At this point in the project, it is helpful to add a basic Web.config file to the site to enable the display of meaningful error messages in case there are any problems with your code. To create a Web.config file, pull down the website menu and click Add New Item, or click the Add New Item button on the toolbar. In the Add New Item dialog, select the Web Configuration File template. Accept the default name of Web.config and click Add. 2. A default Web.config file will be created and will be opened in the editing window. Press Ctrl+A to select the entire contents of this file, then press the Delete key to delete it all, leaving the file empty. 3. In the BIS450 Lab2 Code Snippets.txt that you downloaded from Doc Sharing, select and copy the section of XML code beginning withand ending with . Paste this into the editing window for Web.config, as shown: 4. Click the Save button (floppy-disk icon) on the toolbar to save your work. STEP 6: Test, Capture Screenshot, and Submit.
1. To test the BMI calculator, in the Solution Explorer window, right-click on BmiCalc.aspx and select View in Browser. 2. Enter some different values for height and weight into the calculator, click Calculate BMI and check the results. Some test values that you might want to try are: Height Weight BMI Interpretation 66 90 14.5 Underweight 72 150 20.3 Normal 60 135 26.4 Overweight 54 200 48.2 Obese 3. With input values of height: 54 and weight: 200, the calculator should look like this after you click the Calculate BMI button: 4. Capture a screenshot of the calculator displaying the above result, paste it into a Word document, and save it as Your Name BIS450 Lab2 Screenshot.docx. (Make sure that the browser URL is visible in your screenshot). Submit this file to the Week 2 iLab Dropbox