Pre-Selecting Items in a CheckBoxList ControlBy John Jakovich
A common task in Web programming is the preselection of checkboxes in Web forms. Checkboxes can be used in any situation in which we allow users to select more than one option in a form. For example, you may have a form in which you ask users to select their interests from a list of options, or perhaps select product categories that they are interested in. If you allow your users to select checkbox options then you should also preselect their options when they return to edit their choices. In classic ASP this was accomplished by writing the HTML checkboxes in code and programmatically determining which checkboxes to add the
CHECKEDparameter to. Fortunately ASP.Net presents a much more elegant solution to the problem.
ASP.NET represents a fundamental shift in the way we should think about Web forms programming. The separation between code and presentation means that we are no longer required to dynamically write HTML (although you still can). Instead we have numerous web form objects at our disposal, each with properties, methods, collections and events that can be manipulated to elicit the desired behavior in our Web forms. This is light years ahead of classic ASP, but it does present a learning curve, especially when trying to determine which properties and methods to use in order to get the behavior we want in our forms. This is true when attempting to preselect items in a databound CheckBoxList Control.
Examining the CheckBoxList Control
ASP.NET presents a new way to create Web forms. Each form element is an object; we are no longer required to explicitly write HTML in our applications. In many cases we can use ASP.NET controls to achieve the functionality that we had to "hand code" in classic ASP. In ASP.NET the CheckBoxList control allows you to create multiselection checkbox groups.
The following markup shows the syntax for a sample CheckBoxList control, one that has six options:
This control will render six checkboxes, one for each ListItem.
Creating DataBound CheckBoxLists
This CheckBoxList will work fine but in the real world your CheckBoxLists will probably be bound to a data source enabling you to create the ListItems dynamically. DataBinding any ASP.NET control is very easy, if you're not familiar with DataBinding here are the basic steps:
- Establish a connection to a data source and retrieve the results in a DataSet or DataReader.
- Set the
DataSourceproperty of your control to the DataSet or DataReader created in step 1.
- Call the
DataBind()method of the control you are binding.
Lets take a look at a DataBound CheckBoxListControl. We'll create a table called
that contains the options our members can select from. The data/schema for this table can be seen in
the diagram to the right. (Note that the
interest table has a single column called
Recall that the first step in the databinding process is to load the database data into a DataSet or DataReader.
Let's examine how to load the contents of the
interest table into a DataReader.
First we set up the ADO.NET
SqlCommand objects. (If you
are using a database other than Microsoft SQL Server you would want to use the classes
Next we set the
DataSource property of the CheckBoxList control to a
object derived from our
SqlCommand object. Then we call the
After our CheckBoxList control has been bound it can be referenced in code by its
in this case the
When binding database data to a CheckBoxList, you do not need to explicitly specify the CheckBoxList's
ListItems. However, you should specify two CheckBoxList properties:
DataTextField determines what field from the database
data being bound to the CheckBoxList will be displayed as the text for each checkbox. The
DataValueField property determines what field from the database data being bound to
the CheckBoxList will be assigned to the checkbox's
Value property. (We'll discuss
Value properties of the CheckBoxList's items in more detail shortly.)
For this example, we want the text and value of each created checkbox to have the value from the
field. Therefore, we'd set the
DataValueField properties to
interest. All of this can be done in the HTML portion, meaning our CheckBoxList's declaration would
Compare this declaration to the first example we saw. Note that the one above does not explicitly indicate its various ListItems, because these values are obtained automatically in the databinding process.
Examining the CheckBoxList's ListItems
When using a CheckBoxList without databinding, each ListItem explicitly specified in the CheckBoxList control will render a single checkbox. Glancing back at the first example we saw in this article, there were six checkboxes (reading, sports, music, travel, art, nature). When the CheckBoxList is populated via databinding, there will be a checkbox for each row in the data bound to the CheckBoxList.
Whether the CheckBoxList is populated manually or via databinding, each ListItem can be
referenced programmatically via the CheckBoxList's
Items property. Specifically, each
ListItem is represented by a
ListItem object in the
The ListItem object contains methods and properties that can be
used to preselect the checkboxes when the CheckBoxList control is rendered by ASP.NET. The three germane
properties of the ListItem object are
Value, two string properties,
Selected, a Boolean property determining if the particular CheckBoxList checkbox is
checked or not.
Selecting a CheckBoxList CheckBox
Recall that the motivation for this article is to examine how to pre-select checkboxes in a CheckBoxList. In order to accomplish this, we must be able to programmatically check a particular checkbox. The first step to preselecting a checkbox is to reference the ListItem object that corresponds to the checkbox that we want to check. The simplest way to accomplish this is to use the
FindByValue()method of the CheckBoxList's
FindByValuemethod allows us to search the
Itemscollection for a ListItem by its
Valueproperty (there is also a
The following creates a ListItem object named
myListItem, which references the "sports"
Once we have a ListItem object for a checkbox, we can set the
Selected property to True
This will cause the "sports" checkbox to be selected (checked) when the CheckBoxList control is rendered.
Preselecting Checkbox Items Using Values from a Database
In this example we will ask our users to select their interests from a list of checkbox items. Once the user selects their interests and submits the form, we'll store the options in a table called
member_interest. Some sample data for this database table is shown to the right.
In order to preselect the checkboxes that correspond to John's interests we will iterate through his
interests using a
SqlDataReader. For each of John's interests
we'll find the corresponding ListItem in the CheckBoxList and set its
to True. To summarize, our basic steps will be:
- Iterate through John's interests (sports, travel, music) using a
- For each of John's interests, use the
FindByValue()method of the CheckBoxList
Itemscollection to create a ListItem object for the checkbox we want to select.
- Set the
Selectedproperty of the ListItems object to True, thereby preselecting the checkboxes that correspond to John's interests.
The first thing we need to do is create a
SqlDataReader object that contains John's
interests. This can be accomplished with the following code:
Now that we have a
SqlDataReader containing the values for the checkboxes we want to
preselect, the next step is to iterate through the
SqlDataReader, reference the appropriate
ListItem object corresponding to each of John's interests, and set its
Selected property to
True. This can be accomplished using the following:
That's all there is to it! The screenshot to the right shows what John will see when he visits the page to edit his choices after he has already indicated his interests.
Putting It All Together
Put the code we've examined throughout this article in the
Page_Loadevent handler, so that it is run when the page is loaded. Since we only want the CheckBoxList control to be data bound on the page's first load (and not on subsequent postbacks), we place this logic in an
ifstatement, running the code only if the
Page.IsPostBackproperty is False. The complete ASP.NET Web page code and HTML markup can be seen below:
Preselecting items in a CheckBoxList control can be accomplished by setting the
Selectedproperty for each ListItem object in the CheckBoxList Items collection. This differs from classic ASP because we are no longer required to dynamically write HTML in code. Instead we can take advantage of the object-oriented nature of ASP.NET, making our Web form programming much cleaner and more versatile.
Although there will be a learning curve associated with the new web forms programming techniques, there are numerous advantages to the new ASP.NET object oriented architecture. Don't be afraid to explore and investigate the new objects, methods, properties and collections available in ASP.NET.