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:

1. Declaratively by including ListItems in the code render portion of the .aspx page.
2. Programmatically using the Items.Add() method
3. 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.

Steps:

1. Open the QuickStart tutorial page and click on "Standard Controls."
2. Click on CheckBoxList control. Click "Run It" to see how the sample works.
3. 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
4. Remove the six ListItems that are declaratively added to the CheckBoxList control.
5. 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).
6. Add a textbox for the user to specify the number of items that are to appear in the checkboxlist.
7. Add a required field validator and a compare validator to check that all textbox entries are integer.
8. Add a submit button with an onClick event that calls a handler. The handler will add items to the checkbox list.
9. In the handler:
   1. Use the CheckBoxList's Items.Clear() method to clear out the items already in the control.
   2. Create an integer variable and assign it the value from the textbox.
   3. Write a for loop that loops the number of times specified by the user.
   4. Each iteration of the loop adds a new listItem to the checkbox list using the syntax:
      • cblItems.Items.Add(new ListItem("Item " + i));
10. 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.

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

1. 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 CarSelect with a subkey named Name is:
               Response.Cookies["CarSelect"]["Name"] = tbName.Text;
               Response.Redirect("CarSelect2.aspx");
   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. The car model information needs to be added to the cookie. ASP.NET cookies cannot be modified, only replaced. Consequently we must retrieve the information that is already in the cookie and copy it into a HttpCookie object (an object that represents cookies). The HttpCookie object has an "Add" method that adds new subkeys. The cookie object, which now contains all the subkeys, is then written back to the page headers. The syntax is:
      
              //Copy the cookie into an HttpCookie object
              HttpCookie myCookie = Request.Cookies["CarSelect"];
              //Add the new subkey (name, value) pair
              myCookie.Values.Add("Model", rblModel.SelectedItem.Text);
              //Write the cookie
              Response.Cookies.Add(myCookie);
      
              Response.Redirect("CarSelect3.aspx");
   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 = "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.

 

---

3. Session.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. 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.
2. 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 user.
3. 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.
4. Here are links to documentation for the session object and response.redirect statements.

---

4. UserControls/default.aspx -- User controls are a tool for eliminating duplicate UI code, similar to server-side includes. 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 SSIs. Specifically they can expose public properties for passing data in and out, have their own page events (Page_Load, etc.), capture events thrown by web controls located inside them, 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.

Steps:

1. This assignment uses several files so put them in a subfolder named UserControls within your A04 folder .
2. The syntax for .ascx pages is very similar to that of .aspx pages. Walther's ShowRandomImage.aspx (source) (view source) and RandomImage.ascx (source) illustrate the syntax for user controls.
3. You may copy the HTML & CSS from the sample if you like.
4. 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);
5. 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 the button.
6. SearchBrowse.aspx - This page retrieves the user's search/browse query from the querystring and displays it in a label.
7. Use Request.QueryString to retrive the parameters from the querystring and assign them to variables.
8. Check if a parameter was found with: if (strSearch != null)...