Knowledgebase

I wanted to show records in the ProductCategory table of the SQL Server AdventureWorks database in a ASP .NET 4.0 by using a CheckBoxList, without writing any code.

Result

CheckedListBox.aspx

<%@ Page Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeBehind="CheckedListBox.aspx.cs" Inherits="Rvl.Demo.AspNet4.EF.WebApplication.Pages.CheckedListBox" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <link href="../Styles/CheckedListBox.css" rel="stylesheet" type="text/css" />
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>
        CheckedListBox page
    </h2>
    <asp:CheckBoxList 
        ID="PcCheckBoxList" 
        runat="server"
        DataSourceID="PcDataSource"
        DataTextField="Name"
        DataValueField="ProductCategoryID"
        ondatabound="PcCheckBoxList_DataBound">
    </asp:CheckBoxList>
    <asp:EntityDataSource 
        ID="PcDataSource" 
        runat="server"
        EnableDelete="true" 
        EnableInsert="true" 
        EnableUpdate="true"
        ConnectionString="name=AdventureWorksEntities"
        DefaultContainerName="AdventureWorksEntities"
        EntitySetName="ProductCategory"
        >
    </asp:EntityDataSource>
</asp:Content>

CheckedListBox.css

div.main h2
{
    margin-bottom: 10px;
}
div.main label
{
    padding-left: 30px;
}

You can style the labels of the checkboxes with  CSS, because they are rendered as <input type=”checkbox” … /><label for=”…”></label> in html, like:

<table id="MainContent_PcCheckBoxList">

<tr>

<td><input id="MainContent_PcCheckBoxList_0" type="checkbox" name="ctl00$MainContent$PcCheckBoxList$0" value="1" /><label for="MainContent_PcCheckBoxList_0">Bikes</label></td>

</tr><tr>

<td><input id="MainContent_PcCheckBoxList_1" type="checkbox" name="ctl00$MainContent$PcCheckBoxList$1" value="2" /><label for="MainContent_PcCheckBoxList_1">Components</label></td>

</tr><tr>

<td><input id="MainContent_PcCheckBoxList_2" type="checkbox" name="ctl00$MainContent$PcCheckBoxList$2" value="3" /><label for="MainContent_PcCheckBoxList_2">Clothing</label></td>

</tr><tr>

<td><input id="MainContent_PcCheckBoxList_3" type="checkbox" name="ctl00$MainContent$PcCheckBoxList$3" value="4" /><label for="MainContent_PcCheckBoxList_3">Accessories</label></td>

</tr>

</table>

DataBind to Selected property

You can’t declaratively bind to the “Selected” property of you CheckBoxList items.

So if you want to check some checkboxes in the CheckBoxList, you should do that in the DataBound event of the CheckBoxList control. This event will fire after the control is databound, so it is filled with items.

protected void PcCheckBoxList_DataBound(object sender, EventArgs e)
        {
            // Check the first and last item
            this.PcCheckBoxList.Items[0].Selected = true;
            this.PcCheckBoxList.Items[3].Selected = true;

            // To check them all, use:
            //foreach (ListItem li in this.PcCheckBoxList.Items)
            //{
            //    li.Selected = true;
            //}
        }

Solution Explorer (Project Structure)

Steps

1. Create a new ASP .NET 4.0 WebApplication in VS2010
2. Add a ADO .NET Entity Data Model (connected to the SQL Server 2008 R2 AdventureWorks database)
3. Add the ProductCategory table to you’re ADO .NET Entity Data Model
4. Add a Web Form (CheckedListBox.aspx)
5. Add a Style Sheet (CheckedListBox.css)
6. Set CheckedListBox.aspx as startup page
7. Run the project