Assignment 4 -- User Controls and Maintaining State
This assignment and all subsequent assignments utilize the popular
Twitter Bootstrap CSS framework.
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
Bootstrap335.zip (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.
-- 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.
- Since this assignment uses multiple files you should create a new folder named
within your A04 folder.
- You may copy the HTML & CSS from the sample.
- The class handout "usercontrols" may be a userful reference.
- The example utilizes Bootstrap classes for page layout, the search form, left navigation, and
the "jumbotron" to emphasize content.
- 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.
- The Bootstrap documentation
explains how the grid system works. Read the first two
sections "Overview" and "Grid System" to learn the basics.
- 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.
- In Visual Studio create user controls for the header, footer,
and left menu. I suggest putting these files
in a sub-folder called "controls."
- 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.
- Add appropriate HTML to the user controls.
- leftMenu.ascx requires anchor tags, a textbox and a button as shown
in the sample. Name the textbox "tbSearch".
- 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.
- 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.
- Create SearchBrowse.aspx by copying default.aspx.
- 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."
- 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.
- 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
- Copy CarSelect1.aspx and replace the textbox and button with a RadioButtonList
- Add three ListItems to the RadioButtonList, one for each car model.
- Set the AutoPostBack property to true.
- Create a handler for the postback by switching to design view and double clicking
on the control.
- Write the information to a new cookie named CarSelectModel.
- Add an anchor tag at the bottom of the page that points to CarSelect1.aspx.
- 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.
- CarSelect3.aspx - This page is very similar to CarSelect2 except
it uses a DropDownList instead of a RadioButtonList.
- CarSelect4.aspx - Displays the content of the cookies and an appropriate
- Add labels for Name, Color and Model. Add a Image control to display the image.
- Create a Page_load method that retrieves the values from the cookies and assigns
them to the appropriate labels.
- The syntax for the ImageURL is something like:
imgCar.ImageUrl = "http://yorktown.cbe.wwu.edu/sandvig/mis324/assignments/A04/carImages/"
+ lblModel.Text + "-" + lblColor.Text + ".jpg";
You may use the images from my folder. There is no benefit in copying the images
into your directory.
-- 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.
- The class handout "MaintainingState" may be a useful reference.
- 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.
- 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
- 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.
- Here are links to documentation for the session object and Response.Redirect
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:
- 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.
- Replace the code in dog.cs with the code from the class example
- 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).
- Add a button handler that initializes a dog object and
assigns the user inputs to its properties. (similar to the class
- Assign the text from the method DescribeThisDog to a label using syntax similar to:
lblMessage.Text += myDog.DescribeThisDog();
- 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.
- Test your code
- 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.