[ Home | Syllabus | Course Notes | Assignments | Search]
ListBox
DropDownList
CheckBoxList
RadioButtonList
Items are represented by instances of the "ListItem" Type:
Text (what is displayed in the list)
Value (what is returned for that item - allows difference between displayed and internal values
Selected:
true if item is selected
(NOTE: the list object itself supports the property "SelectedIndex"
so you don't have to check each item in the list)
List Objects support the "SelectedIndexChanged" event.
Also ListBox supports the SelectionMode="Multiple" property value to permit multiple selections from the list.
Here is an example which demonstrates the four kinds of lists (uses code behind)
(code is here)
<%@ Page Inherits="TestList1" %>
<html>
<body>
<h1>Test List Controls</h1>
<h3><asp:Label ID="OutputDrop" RunAt="Server" /></h3>
<h3><asp:Label ID="OutputBox" RunAt="Server" /></h3>
<h3><asp:Label ID="OutputCheck" RunAt="Server" /></h3>
<h3><asp:Label ID="OutputRadio" RunAt="Server" /></h3>
<form runat="server">
<hr>
Drop Down List:
<asp:DropDownList ID="StateListDrop" RunAt="server">
<asp:ListItem Text="AL" RunAt="server" />
<asp:ListItem Text="AK" RunAt="server" />
.
. //// skip lots of states
.
<asp:ListItem Text="WV" RunAt="server" />
<asp:ListItem Text="WY" RunAt="server" />
</asp:DropDownList>
List Box:
<asp:ListBox ID="StateListBox" Rows="10" RunAt="server">
<asp:ListItem Text="AL" RunAt="server" />
<asp:ListItem Text="AK" RunAt="server" />
.
. //// skip lots of states
.
<asp:ListItem Text="WV" RunAt="server" />
<asp:ListItem Text="WY" RunAt="server" />
</asp:ListBox>
<br>
<hr>
<asp:CheckBoxList ID="StateCheckBoxList" RepeatColumns="10"
RepeatDirection="Horizontal" SelectionMode="Multiple" RunAt="server">
<asp:ListItem Text="AL" RunAt="server" />
<asp:ListItem Text="AL" RunAt="server" />
<asp:ListItem Text="AK" RunAt="server" />
.
. //// skip lots of states
.
<asp:ListItem Text="WV" RunAt="server" />
<asp:ListItem Text="WY" RunAt="server" />
</asp:CheckBoxList>
<br>
<hr>
<asp:RadioButtonList ID="StateRadioButtonList" RepeatColumns="10"
RepeatDirection="Vertical" RunAt="server">
<asp:ListItem Text="AL" RunAt="server" />
<asp:ListItem Text="AL" RunAt="server" />
<asp:ListItem Text="AK" RunAt="server" />
.
. //// skip lots of states
.
<asp:ListItem Text="WV" RunAt="server" />
<asp:ListItem Text="WY" RunAt="server" />
</asp:RadioButtonList>
<asp:Button Text="Submit" OnClick="OnSubmit"
RunAt="Server" />
<br><br>
<hr>
</form>
</body>
</html>

using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
public class TestList1 : Page
{
protected DropDownList StateListDrop;
protected ListBox StateListBox;
protected CheckBoxList StateCheckBoxList;
protected RadioButtonList StateRadioButtonList;
protected Label OutputDrop;
protected Label OutputBox;
protected Label OutputCheck;
protected Label OutputRadio;
public void OnSubmit (Object sender, EventArgs e)
{
ArrayList multipleStates = GetSelectedItems (StateCheckBoxList);
OutputDrop.Text = "Drop Selection is: " + StateListDrop.SelectedItem.Text;
OutputBox.Text = "ListBox Selection is:" + StateListBox.SelectedItem.Text;
OutputRadio.Text = "Radio Button Selection is:" + StateRadioButtonList.SelectedItem.Text;
OutputCheck.Text = "Check List Selection is: ";
foreach (string state in multipleStates) {
OutputCheck.Text += " " + state;
}
}
ArrayList GetSelectedItems (CheckBoxList lb)
{
ArrayList a = new ArrayList ();
for (int i=0; i<lb.Items.Count; i++) {
if (lb.Items[i].Selected)
a.Add (lb.Items[i].Text);
}
return a;
}
}
Demonstrate use of string arrays as data source
Demonstrate implementation of "IEnumerable" as data source and in "foreach"
Demonstrate SelectionChanged event handling
First the aspx file: much shorter because states not enumerated here.
<%@ Page Inherits="TestList2" %>
<html>
<body>
<h1>Test List Controls</h1>
<h3><asp:Label ID="OutputDrop" RunAt="Server" /></h3>
<h3><asp:Label ID="OutputBox" RunAt="Server" /></h3>
<h3><asp:Label ID="OutputCheck" RunAt="Server" /></h3>
<h3><asp:Label ID="OutputRadio" RunAt="Server" /></h3>
<form runat="server">
<hr>
Drop Down List:
<asp:DropDownList ID="StateListDrop" RunAt="server"/>
List Box:
<asp:ListBox ID="StateListBox" Rows="10" RunAt="server"/>
<br>
<hr>
<asp:CheckBoxList ID="StateCheckBoxList" RepeatColumns="10"
RepeatDirection="Horizontal" SelectionMode="Multiple"
RunAt="server"/>
<br>
<hr>
<asp:RadioButtonList ID="StateRadioButtonList" RepeatColumns="10"
RepeatDirection="Vertical" OnSelectedIndexChanged="OnRadioSelect"
AutoPostBack="true" RunAt="server"/>
<asp:Button Text="Submit" OnClick="OnSubmit"
RunAt="Server" />
<br><br>
<hr>
</form>
</body>
</html>
F1: If empty between start and end tags, can use this alternate form with combines both
using System;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Collections;
public class TestList2 : Page
{
protected DropDownList StateListDrop;
protected ListBox StateListBox;
protected CheckBoxList StateCheckBoxList;
protected RadioButtonList StateRadioButtonList;
protected Label OutputDrop;
protected Label OutputBox;
protected Label OutputCheck;
protected Label OutputRadio;
void Page_Load (Object sender, EventArgs e) {
if (!IsPostBack) {
/***** first data source: use string array - comment this and end lines to enable
string[] states = { "AL","AK","AR","AZ","CA","CO","CT","DC","DE","FL","GA","HI","IA","ID","IL","IN","KS",
"KY","LA","MA","MD","ME","MI","MN","MO","MS","MT","NC","ND","NE","NH","NJ","NM","NV","NY","OH","OK",
"OR","PA","RI","SC","SD","TN","TX","UT","VA","VT","WA","WI","WV","WY"};
StateListDrop.DataSource = states;
StateListBox.DataSource = states;
StateCheckBoxList.DataSource = states;
StateRadioButtonList.DataSource = states;
****** end first method */
// /***** second data source: enumeration type - comment this and end lines to enable
StateListDrop.DataSource = new States ();
StateListBox.DataSource = new States ();
StateCheckBoxList.DataSource = new States ();
StateRadioButtonList.DataSource = new States ();
// ****** end second method */
StateListDrop.DataBind ();
StateListBox.DataBind ();
StateCheckBoxList.DataBind ();
StateRadioButtonList.DataBind ();
// demonstrate enumeration type
OutputDrop.Text = "demo States enumeration: ";
foreach(string state in new States())
OutputDrop.Text += " " + state;
}
}
public void OnRadioSelect (Object sender, EventArgs e) {
OutputRadio.Text = "Changed Radio Selection to: " +
StateRadioButtonList.SelectedItem.Text;
}
public void OnSubmit (Object sender, EventArgs e)
{
ArrayList multipleStates = GetSelectedItems (StateCheckBoxList);
OutputDrop.Text = "Drop Selection is: " + StateListDrop.SelectedItem.Text;
OutputBox.Text = "ListBox Selection is:" + StateListBox.SelectedItem.Text;
OutputRadio.Text = "Radio Button Selection is:" + StateRadioButtonList.SelectedItem.Text;
OutputCheck.Text = "Check List Selection is: ";
foreach (string state in multipleStates) {
OutputCheck.Text += " " + state;
}
}
ArrayList GetSelectedItems (CheckBoxList lb)
{
ArrayList a = new ArrayList ();
for (int i=0; i<lb.Items.Count; i++) {
if (lb.Items[i].Selected)
a.Add (lb.Items[i].Text);
}
return a;
}
}
class States : IEnumerable
{
protected Enumerator enumerator = new Enumerator ();
public IEnumerator GetEnumerator ()
{
return enumerator;
}
public class Enumerator : IEnumerator
{
protected int index = -1;
protected string[] states = { "AL","AK","AR","AZ","CA","CO","CT","DC","DE","FL","GA","HI","IA","ID","IL","IN","KS",
"KY","LA","MA","MD","ME","MI","MN","MO","MS","MT","NC","ND","NE","NH","NJ","NM","NV","NY","OH","OK",
"OR","PA","RI","SC","SD","TN","TX","UT","VA","VT","WA","WI","WV","WY"};
public object Current
{
get
{
if (index == -1)
index = 0; // Just in case
return states[index];
}
}
public bool MoveNext ()
{
if (index < (states.Length - 1)) {
index++;
return true;
}
return false;
}
public void Reset ()
{
index = -1;
}
}
}
Modified version of Converter.aspx
Populates its list box by binding to a DataSet containing the currency and exchange values read from Rates.xml.
Stores exchange rates in the list box items’ Value properties,
<%@ Import Namespace=System.Data %>
<html>
<body>
<h1>Currency Converter</h1>
<hr>
<form runat="server">
Target Currency<br>
<asp:ListBox ID="Currencies" Width="256" RunAt="server" /><br>
<br>
Amount in U.S. Dollars<br>
<asp:TextBox ID="USD" Width="256" RunAt="server" /><br>
<br>
<asp:Button Text="Convert" ID="ConvertButton" Width="256"
RunAt="server" /><br>
<br>
<asp:Label ID="Output" RunAt="server" />
</form>
</body>
</html>
<script language="C#" runat="server">
void Page_Init (Object sender, EventArgs e)
{
// Wire the Convert button to OnConvert
ConvertButton.Click += new EventHandler (OnConvert);
}
void Page_Load (Object sender, EventArgs e)
{
// If this isn't a postback, initialize the ListBox
if (!IsPostBack) {
DataSet ds = new DataSet ();
ds.ReadXml (Server.MapPath ("Rates.xml"));
Currencies.DataSource = ds;
Currencies.DataTextField = "Currency";
Currencies.DataValueField = "Exchange";
Currencies.DataBind ();
Currencies.SelectedIndex = 0;
}
}
void OnConvert (Object sender, EventArgs e)
{
// Perform the conversion and display the results
try {
decimal dollars = Convert.ToDecimal (USD.Text);
decimal rate =
Convert.ToDecimal (Currencies.SelectedItem.Value);
decimal amount = dollars * rate;
Output.Text = amount.ToString ("f2");
}
catch (FormatException) {
Output.Text = "Error";
}
}
</script>