Lesson 5:
Programming Your ASP.NET Web Pages

Introduction

This week you will impress your friends and neighbors by learning how to program your ASP.NET Web pages. In this week's assignment you will be building a functioning calculator. The assignment is very simple and only requires that you write a small amount of code to create a simple code-behind function which adds, subtracts, multiplies, and divides.

In order for your ASP.NET server controls to be able to have logic and functionality tied to them you will need to have a basic understanding of either one of the code-behind programming languages that ASP.NET supports, VB.Net and C#. Unless you are already a VB.Net programmer there is no need to waste your time learning VB.Net, C# is the de facto standard server-side programming language in use today for Web-based apps running on ASP.NET servers. If you have ever used a programming or scripting language before then Chapter 5 will be very familiar to you and you can focus on the syntax and classes unique to the C# programming language. Many of you will be happy to see how similar and in some cases identical to both JAVA and JavaScript, C# is in syntax.

Naming Conventions

An important term you will learn this week is naming convention which refers to the format you use when naming things like classes and objects when writing code. It is a good idea to adopt a single naming convention and stick with it. This will help you tremendously when it comes to remembering the names of the items when referencing elsewhere in your code. Your textbook authors recommend using the industry standard notation used by most C# developers which is Pascal Casing. In the Pascal Casing (just Pascal for short) naming method all item names begin with a capital letter and where names are conjunctions of multiple words, each word is capitalized, like CalculatorDemo. So that you have some context you need to know that there are a couple of other naming conventions you will run into, 1) camel casing - where the first letter of the first word is always lower-case and if there is more than one word each first letter is capitalized, variables are often named using camel case, e.g. myCalculator, and 2) Hungarian casing uses object types to begin the name, e.g. - a string variable might be named strMyVariable (now considered outmoded).

Assignment

In order to receive full credit for your Assignment 5 you must complete the following:

  • Read all of Chapter 5: Programming Your ASP.NET Web Pages in your text book to learn the basics of how to use C# to add programming logic to your Web forms and server controls.
  • Add a new Web form to your CSIS786 root folder which includes a C# code behind file and name it Calculator.aspx.
  • Follow the instructions below to build a functional calculator in your CalculatorDemo.aspx Web form.
  • Publish your new CalculatorDemo.aspx (& its code-behind file) to your student folder on the Student Web server.
  • Verify you can view your page on the Student Web server and that it displays correctly in your Web browser.
  • Post the URL used in the last step to Canvas by the due date listed in the Syllabus for Assignment 5.

Instructions

The following tutorial provides step-by-step instructions for completing this week's assignment.

You begin the assignment by completing the Try It Out on page 159, but with a few alterations. First, do this Step 1 here instead of Step 1 on page 159.

Step 1 Add a new Web Form which includes a C# code-behind file, name it CalculatorDemo.aspx and save it to the root of your CSIS786 Web site as shown in figure 1.

Image of The Add New Item dialog box with the correct choices shown for step 1.
Figure 1: The Add New Item dialog box showing the correct settings for Step 1 of the Week 5 assignment.

Step 2 Complete steps 2 - 3 in the Try It Out on page 159 of your text book .

Image of a server control menu arrow.
Figure 2: Clicking the expand/collapse arrow on a server control will open a context specific Tasks list for the control.
Image of a server control menu arrow.
Figure 3: Choosing Edit Items... from the DropDownList Tasks list opens the ListItem Collection Editor.
Image of the Items List Editor for the DropDownList server control with four items added.
Figure 4: Clicking on the Add button in the ListItem Collection Editor will add a new list item to the Members column.
Image of the Items List Editor for the DropDownList server control with four items added.
Figure 5: The completed ListItem Collection Editor for the DropDownList control in your CalculatorDemo.aspx Web form.

Step 3 In step 4 on page 159 of your textbook you are instructed to add server controls into the table cells of the table in your CalculatorDemo.aspx Web form. As part of this step you will need to add four list items to the DropDownList control. To add list items to your DropDownList control, you need to open the ListItem Collection Editor. To do this, choose Edit Items... from the Tasks list that appears after you drag and drop the DropDownList control into your Web form. If you don't see the DropDownList control's Smart Tasks list, click to select the DropDownList control in your Web form; open the control's Smart Tasks list by clicking on the expand/collapse arrow that appears as shown in figure 2.

Once the DropDownList's Smart Tasks menu appears, select Edit Items... and the ListItem Collection Editor dialog box will appear. In the ListItem Collection Editor dialog box, click on the Add button at the bottom of the Members column. A new generic ListItem appears in the Members column, assign a text value of "+" in the properties column, then press the Enter key on your keyboard. The Value for the item will automatically change to match the Text value you typed and you will see the Text value is now also displaying in place of the item name in the Members column. Repeat this process to add the "-" (minus/dash) symbol, the "*" (multiply/asterisk), and the "/" (divide/forward-slash) symbols as list items, then click OK to close the ListItem Collection Editor dialog box.

Once you have completed step 4, adding all of the controls to your CalculatorDemo.aspx page, it should look like figure 6 when viewed in Design View.

Image of the Items List Editor for the DropDownList server control with four items added.
Figure 6: The Calculator.aspx Web form after the completion of step 4 in the Try It Out on page 171.

Step 4 In step 5 on page 160 you are instructed to double-click your Calculate button and add the following code to the code-behind file that opens. Notice that your insertion point in the code-behind file has been placed inside of the Calculate button's "Click" function. The code you write here will be triggered each time a user of your Web calculator clicks on the Calculate button when viewing your page in their Web browser. Type the code shown for the C# language into your Calculator button's Click function and save the page.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
// CalculatorDemo.aspx.cs
using System;

public partial class CalculatorDemo : System.Web.UI.Page
{
    protected void CalculateButton_Click(object sender, EventArgs e)
    {
        if (ValueBox1.Text.Length > 0 && ValueBox2.Text.Length > 0)
        {
            double result = 0;
            double value1 = Convert.ToDouble(ValueBox1.Text);
            double value2 = Convert.ToDouble(ValueBox2.Text);

            switch (OperatorList.SelectedValue)
            {
                case "+":
                    result = value1 + value2; break;
                case "-":
                    result = value1 - value2; break;
                case "*":
                    result = value1 * value2; break;
                case "/":
                    result = value1 / value2; break;

            }
            ResultLabel.Text = result.ToString();
        }
        else
        {
            ResultLabel.Text = string.Empty;
        }
    }
}

At this point you should be able to preview your CalculatorDemo.aspx Web form a Web browser. After saving the CalculatorDemo.aspx.cs file, click on the tab for your Calculator.aspx document to make it the active document in the Document window and then press Ctrl+Shift+W to preview the Calculator.aspx Web form in your default Web browser. Everything should work at this point. You should be able to type in two numbers, one in each textbox, choose an operator, and click the Calculate button to see the results appear in your ResultsLabel label at the top left of the Web page.

Once you have you have successfully completed the steps listed above, you are ready to complete steps 5, 6, and 7 below.

Step 5 Publish the CalculatorDemo.aspx and the Calculator.aspx.cs file from your root folder to your student folder on the Student Web server. Don't publish any other files or folders at this time.

Step 6 Using a Web browser on your computer, verify that you can view the published page and that it displays correctly. You should be able to view it using the URL for the root of your student folder, e.g. http://IA.MSJC.EDU/7-digitStudentIDNumber/CalculatorDemo.aspx.

Step 7 Post the URL for your new CalculatorDemo.aspx page to Canvas by the due date listed in the Syllabus.

Instructor's Note: Everything MUST be completed before the due date listed in the syllabus for this assignment.

Please email me if you have any questions at all!

⇑Table of Contents

Lesson Summary

In this lesson you learned how to:

  • Work with data types, variables, objects, and collections in a programming environment
  • Different ways to make decisions in your code
  • Create blocks of functionality that can easily be reused
  • Write well-organized and documented code
  • Use object-orientation in your applications
  • Use proper naming conventions in your code
  • Implement, modify and use a DropDownList control in your Web pages
  • Implment and use a Label control in your Web pages
  • Implement and use TextBox control in your Web pages.
  • Change the value of a control based on an event

Congratulations, that's it for this assignment. You can get a head start on your next lesson by reading chapter 6 in your textbook.

⇑Table of Contents