Syllabus Schedule Project Labs Canvas Server Access CSS Tutorial Assignment 1 Assignment 2 Assignment 3 Assignment 4 Assignment 5 Assignment 6 Assignment 7 Assignment 8 Assignment 9

Assignment 2 -- Events, Variables, Methods

ASP.NET is event driven. Events may be fired by the user clicking a button, selecting an item from a drop down list, entering text, etc. When an ASP.NET web page loads it also fires a number of events. We then write code inside event-handlers to handle the event appropriately. The exercises in assignment 2 focus on .NET page events and writing handlers for the events.

You may use the HTML and CSS from the examples but make sure to remove the extra code that is added by the server. This example shows the extra code highlighted in yellow. If you receive an "invalid viewstate" exception it is most likely because you have not removed this extra code.

1. PageEvents.aspx -- This page illustrates events and event handlers, similar to the class example PostBack.aspx (source). It uses .NET's Trace feature to generate a report at the bottom of the page with details of the page events. Click on the sample link and take a look at the report. Under "trace information" is a list of over ten page events that fire automatically each time a page loads. We can write handlers for any of these events, but the "page_load" event is the one used most frequently. Click on the button and you will see several additional events that are triggered by the button click.

  1. Create a new web form containing three controls: a textbox, a button and a label.

  2. Add an onTextChanged event handler to the textbox and an onClick event handler the button. Double clicking on the button in design view will automatically create the handler methods.

  3. In the handlers concatenate appropriate text to the label control to show that the event has fired. The syntax for concatenating is the plus sign:

    lblMessage.Text += "add more text to the label...";

  4. Add a Page_Load method and add text to the label each time it fires.

  5. Inside the Page_Load method add an if else block that indicates if the page is posting back or loading.

  6. In the Page directive (very top of page) add Trace="true" This will provide the trace report.

  7. Add messages to the trace report with Trace.Write statements in each event handler.

2. DiceRoll.aspx

This page generates two random numbers inside the page_load event handler. The two numbers are used to display images of die and a short text message.

  1. In VS drag two image, a button, and a label control onto the design surface (or hand-code the tags in source view).
  2. Create a page_load() handler
  3. Google "c# random number" to learn how to generate a random number. In the page_load event handler add code to generate two random numbers in the range 1-6.
  4. Concatenate the random numbers into the image URLs with code similar to this:

    image1.ImageUrl = "" + randomNumber + ".png";

  5. Display the values of the two random number and their sum in the label control.
  6. Add HTML formatting so that the output is close to that of the sample (hint: look at the html source for the sample).

3. Calculator.aspx -- The calculator uses the OnClick event associated with each button to call the appropriate method for each type of calculation. There are five buttons an event handler for each button. Within each handler the appropriate calculation is performed and the result is assigned to a label control. Each of five buttons:

  • has a unique id (such as btnAdd)
  • uses the button's text property to define the text that appears on the button
  • uses the OnClick property to call a specific method (with a name like "Add_click").
  1. Use Visual Studio's design mode to drag two textboxes and five buttons onto the design area. Give each of the buttons a descriptive name, like btnAdd, btnSubtract, etc. Create the button handlers (methods) by double clicking on each button.
  2. Each handler has only a single line of code. The text from the textboxes must be converted to a double floating point value, the math operation performed, and the answer converted back to a string and assigned to the label.

    lblAnswer.Text = Convert.ToString(Convert.ToDouble(tbxInput1.Text) + Convert.ToDouble(tbxInput2.Text));
  3. C# does not support syntax for exponents. Use the Pow method of the Math class (for documentation Google ".net math.pow").

4. FontPicker.aspx - This assignment uses a for loop to iterate through each character of a message entered in a textbox. Each character is passed to a method named GetImageTag to build a string composed of html image tags. Look at the source code in the example to see the output. Steps:

  1. Start with the class example FontPickerCSharp.aspx (source).

  2. The method GetImageTag(..) is passed a single character. Add a C# switch statement (or you could use if else if) to select the correct font and write the image tag. The font name is retrieved from the droplist's SelectedItem.Text property.

  3. Concatenate the character directly into the file name. For instance:

    case "Chunk Red":
    return strPath + "Chunk/red/" + strChar + "9.jpg'>";
    case ...

  4. The local variable strPath contains the common portion of the image urls. The common part of the path for all images is:

    "<img src='/sandvig/images/alphabet/"

  5. Each font/color combination is stored in a separate folder and uses a slightly different naming convention. The directory / naming convention for each font is (where x is the character desired).

    Font Directory & File
    Chunk Red chunk/red/x9.jpg
    Deco Blue deco/blue/x1.gif
    Animals animals/x4.gif
    Elegant Red elegant/red/4x.gif
    Funky funky/x3.jpg
    Tape Punch punch/black/x7.gif
  6. Look at the html source code on the working sample to see the image tags sent to the browser. (optional: to add line breaks to your html source code include the line break escape character (\n) in your output string. This won't affect the appearance of the rendered html, only that of the html source code.)

  7. Replace spaces in the message with <br /> tags. This is easily done in StringBuilder by making the first test in the If then statement:

    if (strChar == " ") ...

  8. Most ASP.NET server controls will write client-side JavaScript that will automatically post the form when the value in the control is changed by the user. To have your form automatically posted when the user selects a different font add the following to your dropdown list control:

    AutoPostBack="true" OnSelectedIndexChanged="btnSubmit_Click"

    where "btnSubmit_Click" is the name of the handler for the button click event.

  9. By default the contents of all server controls are automatically stored in the viewstate. While this feature is often convenient the viewstate field can get quite large if the controls hold a lot of data. In FontBuilder.aspx the label control that contains the html image tags can be quite large. We don't need this data to be stored in the page viewstate so turn the viewstate off for the label control by adding to its tag: EnableViewState = "false". Compare the difference between the size of the hidden viewstate in the example above to FontBuilderViewState.aspx which has viewstate on (for dramatic results put in a long message).

Submission instructions: Submit assignments via the Canvas course management system. Submit the full URL for each exercise in the assignment, listing the URLs in the same order that they are listed in the assignment. To minimize typos in URLs it is strongly recommended that you copy the URLs from the address bar of the browser rather than trying to type them. Incorrect URLs will not be graded and no credit will be given.

When pages are connected via navigation (as in your music store project) it is only necessary to submit the URL of the first page.