Creating Single-Selection List Boxes

By default, Web server list boxes are single-selection list boxes, allowing the user to make one selection at a time, which is to say that the SelectionMode property of list boxes is set to Single by default. To create a multiple-selection list box, set this property to Multiple. In single-selection list boxes, you can determine which item (an object of the ListItem class; see Table 16.6 in Chapter 16) is selected with the list box's SelectedItem property, and the index of the item in the list with the SelectedIndex property.

You can see this at work in the ListBoxes example on the CD-ROM, as discussed in the In Depth section of this chapter. This example displays two list boxes: a single-selection list box on the left, and a multiple-selection list box on the right. When you make selections in these list boxes, the item(s) you've selected appears in a text box.

To handle selections in a single-selection list box, you can work with the SelectedIndexChanged event. In the ListBoxes example, we just want to display the selected item, which I can do like this with the list box's SelectedItem property:

   Private Sub ListBox1_SelectedIndexChanged(ByVal sender As _
       System.Object, ByVal e As System.EventArgs) Handles _
       ListBox1.SelectedIndexChanged
       TextBox1.Text = "You selected " & ListBox1.SelectedItem.Text
   End Sub

You can see the results in Figure 17.8, where I've selected an item in the singleselection list box, and the code displays my choice in the text box.

Figure 17.8: Selecting one item in a list box.

Here is WebForm1.aspx for the ListBoxes example:

<%@ Page Language="vb" AutoEventWireup="false"
Codebehind="WebForm1.aspx.vb" Inherits="ListBoxes.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
  <HEAD>
    <title>ListBoxes example</title>
    <meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
    <meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
    <meta name=vs_defaultClientScript content="JavaScript">
    <meta name=vs_targetSchema content=
        "http://schemas.microsoft.com/intellisense/ie5">
  </HEAD>
  <body MS_POSITIONING="GridLayout">

    <form id="Form1" method="post" runat="server">
<asp:ListBox id=ListBox1 style="Z-INDEX: 101; LEFT: 38px;
POSITION: absolute; TOP: 41px" runat="server" Width="176px"
Height="142px" AutoPostBack="True" >
<asp:ListItem Value="Item 1">Item 1</asp:ListItem>
<asp:ListItem Value="Item 2">Item 2</asp:ListItem>
<asp:ListItem Value="Item 3">Item 3</asp:ListItem>
<asp:ListItem Value="Item 4">Item 4</asp:ListItem>
</asp:ListBox>
<asp:Label id=Label2 style="Z-INDEX: 105; LEFT: 251px; POSITION:
absolute; TOP: 16px" runat="server">Multiple selections:</asp:Label>
<asp:Label id=Label1 style="Z-INDEX: 104; LEFT: 41px; POSITION:
absolute; TOP: 13px" runat="server">Single selections:</asp:Label>
<asp:ListBox id=ListBox2 style="Z-INDEX: 103; LEFT: 248px; POSITION:
absolute; TOP: 40px" runat="server" Width="188px" Height="134px"
AutoPostBack="True" SelectionMode="Multiple">
<asp:ListItem Value="Item 1">Item 1</asp:ListItem>
<asp:ListItem Value="Item 2">Item 2</asp:ListItem>
<asp:ListItem Value="Item 3">Item 3</asp:ListItem>
<asp:ListItem Value="Item 4">Item 4</asp:ListItem>
</asp:ListBox>
<asp:TextBox id=TextBox1 style="Z-INDEX: 102; LEFT: 38px; POSITION:
absolute; TOP: 204px" runat="server" Width="400px" Height="23px">
</asp:TextBox>
    </form>
  </body>
</HTML>

And here is WebForm1.aspx.vb for the ListBoxes example:

Public Class WebForm1
    Inherits System.Web.UI.Page
    Protected WithEvents ListBox1 As System.Web.UI.WebControls.ListBox
    Protected WithEvents ListBox2 As System.Web.UI.WebControls.ListBox
    Protected WithEvents Label1 As System.Web.UI.WebControls.Label
    Protected WithEvents Label2 As System.Web.UI.WebControls.Label
    Protected WithEvents TextBox1 As System.Web.UI.WebControls.TextBox

#Region " Web Form Designer Generated Code "

    'This call is required by the Web Form Designer.
    <System.Diagnostics.DebuggerStepThrough()> _
        Private Sub InitializeComponent()

    End Sub

    Private Sub Page_Init(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Init
        'CODEGEN: This method call is required by the Web Form Designer
        'Do not modify it using the code editor.
        InitializeComponent()
    End Sub

#End Region

    Private Sub Page_Load(ByVal sender As System.Object, _
        ByVal e As System.EventArgs) Handles MyBase.Load
       'Put user code to initialize the page here
    End Sub

    Private Sub ListBox1_SelectedIndexChanged(ByVal sender As _
        System.Object, ByVal e As System.EventArgs) Handles _
        ListBox1.SelectedIndexChanged
        TextBox1.Text = "You selected " & ListBox1.SelectedItem.Text
    End Sub

    Private Sub ListBox2_SelectedIndexChanged(ByVal sender As _
        System.Object, ByVal e As System.EventArgs) Handles _
        ListBox2.SelectedIndexChanged
        Dim LoopIndex As Integer
        TextBox1.Text = "You selected "
        For LoopIndex = 0 To ListBox2.Items.Count - 1
            If ListBox2.Items(LoopIndex).Selected Then
                TextBox1.Text &= ListBox2.Items(LoopIndex).Text & " "
           End If
        Next
    End Sub
End Class