Selection Controls in ASP.NET
Introduction
and Demonstration
Selection controls allow the
user to select one or more values from a list. They include both the CheckBox
and RadioButton controls, which are designed to work in a group. The
RadioButton control allows you to select only one option out of the group, whereas
the CheckBox control allows you to select zero or more options.
|
Control
|
Purpose
|
|
CheckBox
|
Selects or unselects an option. You can toggle the
selection.
|
|
RadioButton
|
Selects only one option out of a group. You can
unselect an option only by selecting another RadioButton control in the
group.
|
|
ListBox
|
Allows the user to select one or more options from a
list represented by ListItem controls. This control always occupies a fixed
space in the form.
|
|
DropDownList
|
Allows the user to select only one option out of a list
represented by ListItem controls. This control is used where the space in the
form is limited.
|
|
RadioButtonList
|
Presents a list of radio buttons represented by
ListItem controls and allows selection of only one option.
|
|
CheckBoxList
|
Presents a list of checkboxes represented by ListItem
controls and allows you to select zero or more of the options.
|
The simplified syntax of the selection controls is as follows:
<asp:checkbox
id="MyCheckBox1"
text="Vanilla"
runat="server"/>
<asp:checkbox
id="MyCheckBox2"
text="Chocolate"
runat="server"/>
<asp:radiobutton
id="MyRadioButton1" groupname="Group1"
checked="True"
text="Yes" runat="Server"/>
<asp:radiobutton
id="MyRadioButton2" groupname="Group1"
text="No"
runat="Server"/>
<asp:listbox
id="MyListBox" runat="server">
<asp:listitem value="Vanilla"
selected="true">Vanilla</asp:listitem>
<asp:listitem
value="Chocolate">Chocolate</asp:listitem>
<asp:listitem
value="Strawberry">Strawberry</asp:listitem>
</asp:listbox>
<asp:dropdownlist
id="MyDropDownList" runat="server">
<asp:listitem value="Single"
selected="true">Single</asp:listitem>
<asp:listitem
value="Multiline">Multiline</asp:listitem>
<asp:listitem
value="Password">Password</asp:listitem>
</asp:dropdownlist>
<asp:checkboxlist
id="MyCheckBoxList"
repeatdirection="vertical"
runat="server">
<asp:listitem value="Vanilla"
text="Vanilla"/>
<asp:listitem value="Chocolate"
text="Chocolate"/>
<asp:listitem
value="Strawberry" text="Strawberry"/>
</asp:checkboxlist>
<asp:radiobuttonlist
id="MyRadioButtonList"
repeatdirection="Horizontal"
runat="server">
<asp:listitem value="Female"
text="Female" selected="true"/>
<asp:listitem value="Male"
text="Male"/>
</asp:radiobuttonlist>
The controls can then be referenced programmatically with code fragments like the following:
MyCheckBox1.Checked
= True
MyRadioButton1.Checked
= False
MyListBox.SelectionMode
= ListSelectionMode.Multiple
MyDropDownList.SelectedIndex
= 1
MyCheckBoxList.RepeatDirection
= RepeatDirection.Horizontal
MyRadioButtonList.RepeatLayout
= RepeatLayout.Table
Index.aspx
Page:
<%@
Page Language="vb" %>
<html>
<head>
<title>Selection Control
Example</title>
<script runat="server">
Sub Page_Load( )
MyCheckBox1.Checked = True
MyRadioButton1.Checked = False
MyListBox.SelectionMode =
ListSelectionMode.Multiple
MyDropDownList.SelectedIndex = 1
MyCheckBoxList.RepeatDirection =
RepeatDirection.Horizontal
MyRadioButtonList.RepeatLayout =
RepeatLayout.Table
End Sub
</script>
</head>
<body>
<h1>Selection Control
Example</h1>
<form runat="server">
<asp:table id="MyTable"
border="1"
cellpadding="5"
cellspacing="0"
runat="server">
<asp:tablerow
runat="server">
<asp:tablecell
runat="server">
CheckBox Control:
</asp:tablecell>
<asp:tablecell
runat="server">
<asp:checkbox
id="MyCheckBox1"
text="Vanilla"
runat="server" />
<asp:checkbox id="MyCheckBox2"
text="Chocolate"
runat="server" />
</asp:tablecell>
</asp:tablerow>
<asp:tablerow
runat="server">
<asp:tablecell
runat="server">
RadioButton Control:
</asp:tablecell>
<asp:tablecell
runat="server">
<asp:radiobutton
id="MyRadioButton1" groupname="Group1"
checked="True"
text="Yes" runat="Server"/>
<asp:radiobutton
id="MyRadioButton2" groupname="Group1"
text="No"
runat="Server"/>
</asp:tablecell>
</asp:tablerow>
<asp:tablerow
runat="server">
<asp:tablecell
runat="server">
ListBox Control:
</asp:tablecell>
<asp:tablecell
runat="server">
<asp:listbox
id="MyListBox" runat="server">
<asp:listitem
value="Vanilla"
selected="true">Vanilla</asp:listitem>
<asp:listitem
value="Chocolate">Chocolate
</ asp:listitem>
<asp:listitem
value="Strawberry">Strawberry
</ asp:listitem>
</asp:listbox>
</asp:tablecell>
</asp:tablerow>
<asp:tablerow
runat="server">
<asp:tablecell
runat="server">
DropDownList Control:
</asp:tablecell>
<asp:tablecell
runat="server">
<asp:dropdownlist
id="MyDropDownList" runat="server">
<asp:listitem
value="Single"
selected="true">Single</asp:listitem>
<asp:listitem
value="Multiline">Multiline
</ asp:listitem>
<asp:listitem
value="Password">Password</asp:listitem>
</asp:dropdownlist>
</asp:tablecell>
</asp:tablerow>
<asp:tablerow
runat="server">
<asp:tablecell
runat="server">
CheckBoxList Control:
</asp:tablecell>
<asp:tablecell
runat="server">
<asp:checkboxlist
id="MyCheckBoxList"
repeatdirection="vertical" runat="server">
<asp:listitem
value="Vanilla" text="Vanilla"/>
<asp:listitem
value="Chocolate" text="Chocolate"/>
<asp:listitem
value="Strawberry" text="Strawberry"/>
</asp:checkboxlist>
</asp:tablecell>
</asp:tablerow>
<asp:tablerow
runat="server">
<asp:tablecell
runat="server">
RadioButtonList Control:
</asp:tablecell>
<asp:tablecell
runat="server">
<asp:radiobuttonlist
id="MyRadioButtonList"
repeatdirection="Horizontal" runat="server">
<asp:listitem
value="Female"
text="Female"
selected="true"/>
<asp:listitem
value="Male" text="Male"/>
</asp:radiobuttonlist>
</asp:tablecell>
</asp:tablerow>
</asp:table>
</form>
</body>
</html>
Comments
Post a Comment