ASP.Net BMI

In this exercise, you improve the ASP .NET page created in Lab 3 by adding more web controls. Here, you create a dynamic ASP .NET page that calculates Body Mass Index with different units of weight and height. You also see how your procedures defined in Lab 3 are reused to calculate the Body Mass Index differently by the units of weight and height and to display the result.

Designing the Page

• Make a copy of the Lab3 Website and rename it. The name of the website is up to you. (e.g. Lab4_BMISite)
• Start Microsoft Visual Studio .NET 2010 or Visual Web Developer 2010 Express.
• Select File > Open Web Site... and choose the directory of your body mass index website.
• Open the Aspx file in Design mode
• Design the layout of the page as the following figure by adding Web controls to the web form and changing the arraignment of the existing Web controls You can drag and drop them from the Toolbox onto the Web Form See image.
• Add DrowDownList Contol next to Weight Text Box and change the Id and Width Property of Control. The dropdown list will contain the units of the weight
• Add DrowDownList Contol next to Height Text Box. Change the Id and Width Property of Control. The dropdown list will contain the units of the height

Page Load Event Handling

• Open the ASPX file in Source mode.
• The list of units of the height and weight can be filled at run time using the code. The ideal event is the Page.Load Event. To add Page_Load event hander, select Page Events in the left upper DropDownList and then select Page_Load event in the right upper DropDownList Inside Page_Load event hander. See image.
• The lists of unit items need to be initialized when the page is created the first time. Use IsPostBack property of the Page class. If IsPostBack is False, the page is being created for the first time
• You are going to convert each weight unit to “pound” and each height unit to “inches” because you used “pound” and “inches” to calculate the BMI in Lab 3 and reuse this function here.
• For each unit of the weight, you need to create a ListItem which contains the name of the unit and the rate converting this unit to “pound” and add it to Weight DropDownList
  • pound , 1
  • kg, 2.2046 (1kg = 2.2046 pound)
• For each unit of the height, you need to create a ListItem which contains the name of the unit and the rate converting this unit to “inches” and add it to Height DropDownList.
  • inches , 1
  • feet, 12 (1 foot = 12 inches)
  • meters, 39.37 (1 meter = 39.37 inches)
• Note. You could add more weight and height units if you want.
• To make “pound” and “inches” selected initially in each DropDownList. Use SelectedIndex property of the list.
• Complete the following is an incomplete according to the above directions. See image.

Button Click Event Handling

Now, you need to modify the BMI calculation function to take the selected weight and height unit into account. Inside Button.Click event handler (e.g. btBMI_Click)

• Get the Text property of the Weight and Height Label control
• Convert the String to Double by using Val(String str) function (or CDbl(String str) function)
• Retrieve the selected Weight Unit List Item object by its index number See image.
• Calculate the new weight in pound using the Value Property of ListItem See image.
• Retrieve the selected Height Unit List Item object by its index number
• Calculate the new height in inches using the Value Property of ListItem.
• Call the defined function calculating BMI by passing two parameters: the new weight and height computed above.
• Display the result in the web page by calling a user defined subroutine. See image.