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

image

 

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)

image

 

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

One Comment

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.