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 4 -- User Controls and Maintaining State

Bootstrap: This assignment and all subsequent assignments utilize the popular Twitter Bootstrap CSS framework. CSS Frameworks can save time, frustration, and result in more attractive and usable web pages. Instead of writing your own CSS you download a open-source CSS framework and utilize the CSS classes developed by teams of CSS experts. These frameworks help with mobile-usability (they are responsive), form layout, page layout, accessibility, and other CSS issues.

There are dozens of open-source CSS frameworks. Bootstrap is one of the more full-featured frameworks. You may use either Bootstrap or a different CSS framework, but you must use a framework for both this exercise and the music store project.

To use Bootstrap first download (Bootstrap v. 3.3.5), unpack it, and add it to your assignments folder. Bootstrap includes a large number of .css and .js files. Initially you will use only one .css file but should copy all the files in case you later want to use additional bootstrap features. The zip file contains the full framework. In a real-world web site you would visit Bootstrap's web site and download customized files that include only the features used by your site.

The Bootstrap documentation contains examples and markup code. W3Schools has Bootstrap tutorials. You may also use the markup from the sample exercises.

1.UserControls/default.aspx -- User controls are used to eliminate duplicate user interface (UI) code. Any UI code that is used in more than once (headers, footers, search boxes, menus, etc.) is a good candidate for a user control. User controls share many attributes with .aspx pages, including page events (page_load, etc.) and event handlers. They may contain other web controls, public properties for getting and setting values, and support caching.

This exercise uses two web forms (default.aspx & SearchBrowse.aspx) and three user controls(Header.ascx, Footer.ascx and LeftMenu.ascx). The header, footer and LeftMenu user controls are used in both of the .aspx pages. This exercise is the start of the music store project.

Your pages should have a distinct header, footer and menu. Background colors or borders are a good way to make them distinct.


  1. Since this assignment uses multiple files you should create a new folder named UserControls within your A04 folder.
  2. You may copy the HTML & CSS from the sample.
  3. The class handout "usercontrols" may be a userful reference. User Controls (Source)
  4. The example utilizes Bootstrap classes for page layout, the search form, left navigation, and the "jumbotron" to emphasize content. other
  5. Typically you will want to add your own styles or to modify bootstrap styles. Do this by adding a second style sheet and linking to it after the bootstrap stylesheet. This eliminates the need to modify the massive Bootstrap stylesheet.
  6. The Bootstrap documentation explains how the grid system works. Read the first two sections "Overview" and "Grid System" to learn the basics.
  7. Create a new page named default.aspx. Copy and paste in the header tags from the working sample to link the stylesheets. Also include the viewport tag, which is required by Bootstrap.
  8. In Visual Studio create user controls for the header, footer, and left menu. I suggest putting these files in a sub-folder called "controls."
  9. Register the user controls in your page by switching Visual Studio design view and dragging the .ascx files onto the design surface and dropping it where you want the control to appear on the page.
  10. Add appropriate HTML to the user controls.
  11. leftMenu.ascx requires anchor tags, a textbox and a button as shown in the sample. Name the textbox "tbSearch".
  12. Create a handler for the textboxes onTextChanged event by double clicking on the textbox in design view. The textbox handler is located in the ascx file and contains a single line of code.

    Response.Redirect("SearchBrowse.aspx?Search=" + tbSearch.Text);

    (onTextChanged events frequently work better than button onClick events when working with single form elements, such as the search box. Users will often enter text and hit the enter key rather than click the button. This action will not fire the button's onClick event, since the button was not clicked, but it will fire the onTextChanged event. If the user does click the button it will still cause a postback and fire the onTextChanged event.
  13. SearchBrowse.aspx - This page retrieves the user's search/browse query from the querystring and displays it in a label. There are two ways a user can get to this page: clicking on a browse style anchor tag or typing a search query. You need to know which method they used so that you can handle it correctly. The anchor tags use a parameter named "style" and the search uses a parameter named "query". SearchBrowse.aspx looks for these parameters in the querystring.
  14. Create SearchBrowse.aspx by copying default.aspx.
  15. In the page_load hander use Request.QueryString["style"] to retrieve the style name from the querystring and assign it to a variable name "style". Do the same for "query."
  16. Check which parameter was found with:

    if (style != null)...

    and assign the value to the label.

2. CarSelect1.aspx -- Cookies are frequently used for maintaining state. A major advantage of cookies is that they persist between user sessions. Here is a good overview of using ASP.NET cookies.

This exercise uses cookies to share user information across four.aspx pages. Steps:

  1. CarSelect1.aspx: Create a new web form, add bootstrap, your stylesheet, a textbox, and a button. Create a handler for the button by double-clicking on the button in design view. The handler writes the user's name to a cookie and redirects to the next step. The syntax for writing a cookie named CarSelectName is:

    Response.Cookies["CarSelectName"].Value = tbName.Text;

    Note that since cookies are collections the square brackets are used to refer to collection members.
  2. CarSelect2.aspx:
    1. Copy CarSelect1.aspx and replace the textbox and button with a RadioButtonList named rblModel.
    2. Add three ListItems to the RadioButtonList, one for each car model.
    3. Set the AutoPostBack property to true.
    4. Create a handler for the postback by switching to design view and double clicking on the control.
    5. Write the information to a new cookie named CarSelectModel.
    6. Add an anchor tag at the bottom of the page that points to CarSelect1.aspx.
    7. In the Page declaration (first line in file) add Trace = "true". This provides a report at the bottom of the page that displays the content of your cookie. A very useful feature for debugging.
  3. CarSelect3.aspx - This page is very similar to CarSelect2 except it uses a DropDownList instead of a RadioButtonList.
  4. CarSelect4.aspx - Displays the content of the cookies and an appropriate image.
    1. Add labels for Name, Color and Model. Add a Image control to display the image.
    2. Create a Page_load method that retrieves the values from the cookies and assigns them to the appropriate labels.
    3. The syntax for the ImageURL is something like:

      imgCar.ImageUrl = "" + lblModel.Text + "-" + lblColor.Text + ".jpg";

      You may use the images from my folder. There is no benefit in copying the images into your directory.

3. Secure.aspx -- Session objects are easy to use and quite handy for many applications, especially those that require a login. Session objects cannot be seen or altered by the client and timeout after a period of inactivity.

This assignment consists of two pages: Session.aspx and Login.aspx. Session.aspx is the page containing content that we want to protect with a login. It checks to make sure the user has a session object, and if not, redirects the user to Login.aspx. The login page asks for a name and password, checks the user's password, and if correct, creates a session object containing the user's name then redirect the user back to Sesson.aspx.

  1. The class handout "MaintainingState" may be a useful reference.
  2. Login.aspx uses a single event handler which is triggered when the user clicks the login button. The handler contains a single if statement which checks the password. If the password is correct it creates a session object named Session["UserName"] which contains the user's name and the user is redirected to Session.aspx. If the password is incorrect then a label is used to ask the user to try again.
  3. Secure.aspx uses two subroutines. The first, Page_load, checks to see if the session object exists. The syntax to check for the existence of the Session object is:

    if (Session["UserName"] == null) ....

    If there is no session object then the user is redirected to Login.aspx. If the session does exist then we assign the username to a label and display it to the user.
  4. The second handler in Session.aspx is triggered by the "Logout" button. This handler uses the Session.Abandon() method to kill the session then redirects the user back to the login page.
  5. Here are links to documentation for the session object and Response.Redirect statements.

4. DogClass.aspx

In this exercise you will add validation for name and breed to the class example dog.cs. You will also create a web form that adds and retrieves data to the class. Steps:

  1. Use Visual Studio to create a new class named dog. Visual Studio will prompt you to create a new folder named App_Code. Click yes.
  2. Replace the code in dog.cs with the code from the class example dog.cs.
  3. Create a new web form with four text boxes, a button and a label similar to the sample. Provide default values in the textboxes (for ease of testing).
  4. Add a button handler that initializes a dog object and assigns the user inputs to its properties. (similar to the class example DogObject.aspx (source)
  5. Assign the text from the method DescribeThisDog to a label using syntax similar to:

    lblMessage.Text += myDog.DescribeThisDog();

  6. Use a Try Catch block when assigning properties to the dog object. Error messages should be displayed in the label, as in the working sample.
  7. Test your code
  8. Add validation to dog.cs for name and breed. Both properties should have a length > 0. An appropriate error message should be thrown if data is not valid.

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.