7.15. Adding a CheckBoxList Control

This section adds a CheckBoxList control. The motivation is to allow the user to vote for multiple items by clicking on them. The page is pictured in Figure 7.6.

The initialization of the CheckBoxList control is similar to that of the previous two list controls, except that we specify that the check boxes should be displayed in columns of two items per line:

private void Page_Load(object sender, System.EventArgs e)
{
    if ( ! IsPostBack )
    {
         string [] selections = {
            "Twelfth Night", "Romeo and Juliet", "Hamlet",
            "MacBeth", "All's Well That Ends Well",
            "Henry IV, Part 1", "King Lear",
            "Merchant of Venice", "Othello"
         };
         CheckBoxList1.DataSource = selections;
         CheckBoxList1.DataBind();

         // display two items per line

         CheckBoxList1.RepeatColumns = 2;
         CheckBoxList1.RepeatDirection =
                       RepeatDirection.Horizontal;
    }
}

The event handler is invoked when the selection of one or more of the boxes is changed. The SelectedItem property holds the position of the selected item with the lowest index (or -1 if no boxes are checked). Unfortunately, we need to iterate across the remainder of the items, checking the Selected property of each to determine whether it, too, is selected—for example,

private void
CheckBoxList1_SelectedIndexChanged(object s, EventArgs e)
{

    // check if no item is selected ...
    if ( CheckBoxList1.SelectedIndex == -1 )
         return;

    for( int ix = CheckBoxList1.SelectedIndex;
             ix < CheckBoxList1.Items.Count; ++ix  )
    {
         if ( CheckBoxList1.Items[ ix ].Selected )
              ListBox1.Items.Add( CheckBoxList1.Items[ix].Text );
    }
}

One aspect of the page that displayed poorly with the original implementation is the situation in which a user votes, changes the selected check boxes, and votes again. My original implementation appended the selected items to those already present in the ListBox. This was not really correct.

One solution is to check if the ListBox is nonempty and, if so, to clear it by invoking Clear():

if ( CheckBoxList1.Items.Count != 0 )
     CheckBoxList1.Items.Clear();

Alternatively, we can set the Vote button's Enable property to false. This grays out the display; the user is no longer able to activate the control. In effect, we are not allowing a user to vote more than once within a session.

A second alternative is to set the EnableViewState property of the ListBox to false. The control view state, remember, is what is saved and restored automatically with each round-trip. By disabling the view state associated with the ListBox, each time the user clicks VOTE, the earlier data inserted within the ListBox is lost. Not only is this exactly what we want, but it also illustrates another aspect of state management within ASP.NET.