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
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.
Create a new web form containing three controls: a textbox, a button and a label.
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
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...";
Add a Page_Load method and add text to the label each time it fires.
Inside the Page_Load method add an if else block that indicates if the page
is posting back or loading.
In the Page directive (very top of page) add Trace="true" This will provide the
Add messages to the trace report with Trace.Write statements in each event handler.
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.
- In VS drag two image, a button, and a label control onto the design surface (or hand-code the tags in source view).
- Create a page_load() handler
- 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.
- Concatenate the random numbers into the image URLs with code similar to this:
image1.ImageUrl = "http://yorktown.cbe.wwu.edu/sandvig/mis324/assignments/a02/images/dice-" + randomNumber + ".png";
- Display the values of the two random number and their sum in the label control.
- Add HTML formatting so that the output is close to that of the sample (hint: look at the html source
for the sample).
-- 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").
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
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));
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:
Start with the class example FontPickerCSharp.aspx (source).
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.
Concatenate the character directly into the file name. For instance:
case "Chunk Red":
return strPath + "Chunk/red/" + strChar + "9.jpg'>";
The local variable strPath contains the common portion of the image urls. The common
part of the path for all images is:
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).
Directory & File
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.)
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 == " ") ...
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:
where "btnSubmit_Click" is the name of the handler for the button click event.
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.