Assignment 4 -- List Controls, Maintaining State and User Controls
1. CheckBoxList.aspx -- List controls include the BulletedList,
CheckBoxList, DropDownList, RadioButtonList and all of the data listing controls.
These controls are used extensively in ASP.NET web development so you should be
comfortable with how to populate them and retrieve selected values.
All list controls contain an Items collection representing the items in the control.
These controls can be populated via three methods:
- Declaratively by including ListItems in the code render portion of the .aspx page.
- Programmatically using the Items.Add() method
- Programmatically by binding the control to a data collection (typically the method
used with databases)
The declarative method is appropriate if the items displayed in control are static.
If they are likely to change they should be added programmatically.
The ASP.NET Quickstart tutorials provide excellent examples of many ASP.NET features.
Modify the example for the CheckBoxList control to add ListItems programmatically
rather than declaratively.
- Open the QuickStart tutorial page and click on "Standard Controls."
- Click on CheckBoxList control. Click "Run It" to see how the sample works.
- Click View Source and copy the C# source code. Paste it into a new file in Visual
Web Developer. Test it to make sure it still works properly
- Remove the six ListItems that are declaratively added to the CheckBoxList control.
- Add a div tag and appropriate style properties to center the text (see the source
code in the sample). For the css margin property to work in IE the page must also
include the <!DOCTYPE ...> tag (see sample).
- Add a textbox for the user to specify the number of items that are to appear in
- Add a required field validator and a compare validator to check that all textbox
entries are integer.
- Add a submit button with an onClick event that calls a handler. The handler will
add items to the checkbox list.
- In the handler:
- Use the CheckBoxList's Items.Clear() method to clear out the items already in the
- Create an integer variable and assign it the value from the textbox.
- Write a for loop that loops the number of times specified by the user.
- Each iteration of the loop adds a new listItem to the checkbox list using the syntax:
cblItems.Items.Add(new ListItem("Item" + i));
- To the checkboxlist declaration add: RepeatColumns="6"
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 and add 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.
- Login.aspx uses a single subroutine which is triggered when the user clicks the
login button. The subroutine contains a single if statement which checks the password.
If the password is correct then a session object named Session("UserName") is set
to 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.
- Session.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 subroutine in Session.aspx is triggered by the "Logout" button. This
subroutine 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
-- User controls are used to eliminate duplicate user interface (UI) code, similar
to php's include files. 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
are more flexible and scalable than include files. They behave much like ASP.NET web
pages with their own page events (Page_Load, etc.) and event handlers. They may contain
other web controls, support public properties for getting and setting values, and support caching.
This exercise uses five files: default.aspx, SearchBrowse.aspx, Header.ascx, Footer.ascx
and LeftMenu.ascx. The header, footer and LeftMenu user controls are used in both
of the .aspx pages. When the user clicks a hyperlink or clicks the search button
the page posts to SearchBrowse.aspx which displays the search or browse string.
Your pages should have a distinct header, footer and menu. Background colors or
borders are a good way to make them distinct. The page layout should not jump around
when switching between pages.
- This assignment uses several files so put them in a subfolder named UserControls
within your A04 folder .
- The syntax for .ascx pages is very similar to that of .aspx pages. Walther's ShowRandomImage.aspx
and RandomImage.ascx (source)
illustrate the syntax for user controls.
- You may copy the HTML & CSS from the sample if you like.
- The munu button's onclick event is handled by a subroutine within the user control.
The subroutine has single line of code:
Response.Redirect("SearchBrowse.aspx?Search=" + tbSearch.Text);
- Search Button: User's often type a query and press the enter key rather than click
the submit button. In .NET this will cause a page postback but the button click
handler does not fire (since the button wasn't clicked). To accommodate this behavior
use an onTextChanged event handler on the textbox rather than an onClick event for
- SearchBrowse.aspx - This page retrieves the user's search/browse query from the
querystring and displays it in a label.
- Use Request.QueryString to retrive the parameters from the querystring and assign
them to variables.
- Check if a parameter was found with:
if (strSearch != null)...
To submit your assignment for grading send an email with the URLs for your assignment
- Professor Sandvig and the TA at
(note: this address is for homework assignments only. Please send correspondence
- cc. a copy to yourself
The subject line of your email should read "MIS324 AXX YourName"
where XX is the assignment number. Please check that your URLs are correct before
submitting them for grading. Files with incorrect URLs will not be graded.
When pages are connected via navigation (as in your Music store project) it is only
necessary to submit the URL of the first page.