ASP.NET selectable list controls include the DropDownList, ListBox, CheckBoxList and RadioButtonList controls. They allow users to select one or more of the contained items. When the page is posted back, you can check which items were chosen. By default, the RadioButtonList and CheckBoxList render multiple option buttons or check boxes.
The next table lists additional RadioButtonList and CheckBoxList properties:
Property |
Description |
RepeatLayout |
This enumeration specifies whether the check boxes or radio buttons will be rendered in a table (Table), inline (Flow), in a <ul> element (UnorderedList), or in a <ol> elment (OrderedList). |
RepeatDirection |
This specifies whether the list of controls will be rendered horizontally or vertically. |
RepeatColumns | This sets the number of columns, in case RepeatLayout is set to Table. |
CellPadding, CellSpacing,
TextAlign |
If RepeatLayout is set to Table, then these properties configure the spacing and alignment of the cells of the layout table. |
The next example page declares an instance of every selectable list control, adds items to each of them declaratively, and sets a few other properties:
<form id=”form1″ runat=”server”>
<div>
<asp:ListBox runat=”server” ID=”Listbox1″ SelectionMode=”Multiple” Rows=”6″>
<asp:ListItem Selected=”true”>Option 1</asp:ListItem>
<asp:ListItem>Option 2</asp:ListItem>
</asp:ListBox>
<br /><br />
<asp:DropDownList runat=”server” ID=”DropdownList1″>
<asp:ListItem Selected=”true”>Option 1</asp:ListItem>
<asp:ListItem>Option 2</asp:ListItem>
</asp:DropDownList>
<br /><br />
<asp:CheckBoxList runat=”server” ID=”CheckboxList1″ RepeatColumns=”3″ >
<asp:ListItem Selected=”true”>Option 1</asp:ListItem>
<asp:ListItem>Option 2</asp:ListItem>
</asp:CheckBoxList>
<br />
<asp:RadioButtonList runat=”server” ID=”RadiobuttonList1″
RepeatDirection=”Horizontal” RepeatColumns=”2″>
<asp:ListItem Selected=”true”>Option 1</asp:ListItem>
<asp:ListItem>Option 2</asp:ListItem>
</asp:RadioButtonList>
<asp:Button id=”Button1″ runat=”server” Text=”Submit”
OnClick=”Button1_Click”/>
</div>
</form>
You can use the event handler for the Page_Load event to add more items to each list control programmatically:
Protected Sub Page_Load(sender As Object, e As System.EventArgs)
If Not Page.IsPostBack Then
For I As Integer = 3 To 6
Listbox1.Items.Add(“Option ” & I.ToString())
DropdownList1.Items.Add(“Option ” & I.ToString())
CheckboxList1.Items.Add(“Option ” & I.ToString())
RadiobuttonList1.Items.Add(“Option ” & I.ToString())
Next
End If
End Sub
When the submit button is clicked, the selected items of each control are displayed on the page, where:
– For the DropDownList and RadioButtonList controls, you can use the SelectedItem property.
– For the other controls that allow multiple selections, you have to cycle through all the items in the Items collection and check whether the ListItem.Selected property is true.
Protected Sub Button1_Click(sender As Object, e As System.EventArgs)
Response.Write(“<b>Selected items for Listbox1:</b><br />”)
For Each Li As ListItem In Listbox1.Items
If Li.Selected Then
Response.Write(“- ” + li.Text & “<br />”)
End If
Next
Response.Write(“<b>Selected item for DropdownList1:</b><br />”)
Response.Write(“- ” + DropdownList1.SelectedItem.Text & “<br />”)
Response.Write(“<b>Selected items for CheckboxList1:</b><br />”)
For Each Li As ListItem In CheckboxList1.Items
If Li.Selected Then
Response.Write(“- ” + li.Text & “<br />”)
End If
Next
Response.Write(“<b>Selected item for RadiobuttonList1:</b><br />”)
Response.Write(“- ” + RadiobuttonList1.SelectedItem.Text & “<br />”)
End Sub
The next picture shows the result: