Ice01Learning Assessment 2
Note:  Please keep the programs that you create today, in case you have a question about your grades for the ICEs at the end of the quarter. When you're working with a partner, each person should save his-or-her own copy.

ICE ICE 01 Part 1: Learning Assessment 2

Please answer the following questions as completely as you can to help me understand what topics we will need to review in the course. Feel free to write "don't know" if you get stuck.

Use may psuedo-code for questions that ask you to program or you may produce a small coded program.

  1. Write a loop that prints out the day of the week (o = Sunday, 1 = Monday, etc.) and the day starting with Sunday, January 11.

    For example:

    • 0, 01/11 (or Sunday, 01/11)
    • 1, 01/12 (or Monday, 01/12)
    • 2, 01/13 (or Tuesday, 01/13)
    • 3, 01/14 (or Wednesday, 01/14)
    • 4, 01/15 (or Thursday, 01/15)
    • 5, 01/16 (or Friday, 01/16)
    • 6, 01/17 (or Saturday, 01/17)
    • 0, 01/18 (or Sunday, 01/18)
  2. Create a function that produces the same output above when passed the starting day of the week and the month.
  3. What methods would you expect to find in a String class?
  4. How is an event-handler used?
  5. What does a class constructor do?
  6. What is an API and how do you use one?

When you get done with this exercise, show your Instructor.

ICE ICE 01 Part 2: Build the Lecture 02 Example Application
     (optional, or for at-home practice)

This optional in-class exercise guides you through the development of the Lecture 02 Example application that was presented in this lecture. Most of this will not make ANY sense to you. It is merely offered to give you a chance to experiment with the many features Visual Studio has to offer, and NOT to learn the code (see note directly below).

PLEASE NOTE: Initially, as you start out with Visual Studio and ASP.NET, a lot of what you will do is to work with code (or copying-and-pasting code) that you won't really understand. THIS IS EXPECTED! Understanding will come as the quarter progresses, when you get some hands-on experience, do your reading and video viewing, and practice-practice-practice.

Start, Close, and Open the Web Site

  1. Start Visual Studio. If the Start Page is displayed, click its close button to close this page.
  2. Start an empty file-system web site as shown in the Lecture 2 PowerPoint Slide 10. It should be named ICE0202 and stored in your personal BIT285 working folder (whether on a USB thumb drive, on your laptop or desktop)
  3. Add a web form using the default name. Be sure that the Place Code in Separate File option is checked.
  4. Add a folder named Images to your project and add the WinkusLogo.jpg file (right-click on this link and select Save Target As.. or Save Link As...) to it using the techniques discussed.
  5. Close the web site using the technique discussed. Then, open the web site again using the Open Project dialog box.. This shows that a solution file has been created for this web site.
  6. Use File > Open > Web Site (or File > Open Web Site for Visual Studio Express) to display the Open Web Site dialog box.

Use the Web Forms Designer to Build the Form

  1. Open the Default.aspx web form and switch to Source view. Type "ICE 02 Part 2" in the title element in the head section of the HTML.
  2. Move the cursor to the end of the opening body tag and press the Enter key to create a new line. Next, drag the Winkus logo file from the Images folder in the Solution Explorer to the new line. That should create an img element with a properly coded src attribute. Now, add an alt attribute to this element with "Winkus Logo" as its value, and switch to Design view to see the changes.
  3. Switch to Source view, place the insertion point after the img element, and add an h1 element that has ''401K Future Value Calculator" as its content.
  4. Switch to Design view to see this change. Then, run the form in the default browser by pressing the F5. That automatically saves the changes to the Default.aspx file. When the dialog box asks whether you want to modify the web.config file to enable debugging, click the OK button. After your form is displayed in the default brower, close the browser. If your default browser is Internet Explorer, this should stop the application.
  5. Return to Visual Studio. If the Toolbox is not available, that means the web form is still running. So, click the Stop Debugging button in the Debug toolbar to stop the application.
  6. In Design view, use the techniques discussed to add a table that provides for six (6) rows and two (2) columns to the div element. Next, add the text below in the first four rows to the first column of the table. Then, drag the right boundary of the first column to reduce its width.

    • Monthly Investment
    • Annual Interest Rate
    • Number of Years
    • Future Value
  7. Switch to Source view to see the HTML for the table. Note that a style element has been added to the head section and class attributes have been
    added to the table element and some of the td elements. This HTML was generated when you reduced the width of the first column by dragging its
    boundary. Note too that non-breaking space characters ( ) have been generated for the empty td elements.
  8. Switch to Design view and use the techniques discussed to add the dropdown list, text boxes, label, and buttons as shown in the image below to the table. Then, adjust the size of the list, text box, and buttons, but not the label, so the table looks the way you want it to.


  9. Set the ID and Text properties of the controls. For the Clear button, also set the CausesValidation property to False.

    DropDownList ID="ddlMonthlyInvestment"
    TextBox ID="txtInterestRate"
    TextBox ID="txtYears"
    Label ID="lblFutureValue"
    Button ID="btnCalculate"
    Button ID="btnClear"
  10. Press F5 to run the application, and check the web form to make sure it looks the way it's supposed to. Then, switch to Visual Studio and click the Stop Debugging button in the Debug toolbar.

Add Validation Controls

  1. In Source view or Design view, add the validation controls for the text boxes.

    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
    ErrorMessage="Interest rate is required." ControlToValidate="txtInterestRate"
    Display="Dynamic" ForeColor="Red"></asp:RequiredFieldValidator>

    <asp:RangeValidator ID="RangeValidator1" runat="server"
    ErrorMessage="Interest rate must range from 1 to 20." ControlToValidate="txtInterestRate"
    Display="Dynamic" ForeColor="Red" Type="Double"
    MaximumValue="20" MinimumValue="1"></asp:RangeValidator>

    <asp:RequiredFieldValidator ID="RequiredFieldValidator2" runat="server"
    ErrorMessage="Number of years is required." ControlToValidate="txtYears"
    Display="Dynamic" ForeColor="Red"></asp:RequiredFieldValidator>

    <asp:RangeValidator ID="RangeValidator2" runat="server"
    ErrorMessage="Years must range from 1 to 45." ControlToValidate="txtYears" Type="Integer"
    Display="Dynamic" ForeColor="Red" MaximumValue="45" MinimumValue="1"></asp:RangeValidator>

  2. In Design view, double-click outside the body of the web form to start an event handler for the Load event of the page in the code-behind file for the form. Then, turn off unobtrusive validation by adding this statement in the Load event handler. IntelliSense makes this easy.

        protected void Page_Load(object sender, EventArgs e)
        {
            UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.None; 
  3. Press F5 to run the application. Then, test the field validators by leaving fields blank or entering invalid data. The validation will be done when the focus leaves a text box or when you click on the Calculate button.
  4. Stop the application. Then, if necessary, fix any problems and test again. If, for example, validation is done when you click the Clear button, you can fix that by setting its CausesValidation property to False.

Add the C# Code and Test as You Go

  1. Double-click outside of the body of the form to switch to the Code Editor. That will take you to the Load event handler that you started earlier.
  2. Finish the code for the Load event handler as shown below, taking full advantage of the IntelliSense that's provided. Then, press F5 to compile and test this event handler. If any syntax errors are detected, use the techniques in this figure to fix them.

        protected void Page_Load(object sender, EventArgs e)
        {
            UnobtrusiveValidationMode = System.Web.UI.UnobtrusiveValidationMode.None;
            if (!IsPostBack)
                for (int i = 50; i <= 500; i += 50)
                {
                    ddlMonthlyInvestment.Items.Add(i.ToString());
                }
        }
  3. Switch back to Design view, and double-click on the Clear button to start an event handler for the Click event of that button. Then, enter the code for this event handler as shown below, and test again.

        protected void btnClear_Click(object sender, EventArgs e)
        {
            ddlMonthlyInvestment.SelectedIndex = 0;
            txtInterestRate.Text = "";
            txtYears.Text = "";
            lblFutureValue.Text = "";
        }   
  4. Enter the code for the CalculateFutureValue method that's shown below. When you're ready to add the for loop, right-click, select Visual C# from the shortcut menu, and select the for snippet. Then, finish the coding for this method.

        protected decimal CalculateFutureValue(int monthlyInvestment, decimal yearlyInterestRate, int years)
        {
            int months = years * 12;
            decimal monthlyInterestRate = yearlyInterestRate / 12 / 100;
            decimal futureValue = 0;
            
            for (int i = 0; i < months; i++)
            {
                futureValue = (futureValue + monthlyInvestment) * (1 + monthlyInterestRate);
            }        
            return futureValue;
        }   
  5. Switch back to Design view, and double-click on the Calculate button to start an event handler for the Click event of that button. Next, enter the code for this event handler, but be sure to use the snippet for the if statement. This method should call the CalculateFutureValue method. Then, test this code.
        protected void btnCalculate_Click(object sender, EventArgs e)
        {
            if (IsValid)
            {
                int monthlyInvestment = Convert.ToInt32(ddlMonthlyInvestment.SelectedValue);
                decimal yearlyInterestRate = Convert.ToDecimal(txtInterestRate.Text);
                int years = Convert.ToInt32(txtYears.Text);
    
                decimal futureValue = this.CalculateFutureValue(monthlyInvestment, yearlyInterestRate, years);
    
                lblFutureValue.Text = futureValue.ToString("c");
            }
        }  
  6. If necessary, fix any design or coding problems that remain. When you're through, the application should work the way you want it to.