ListBox Control in ASP.NET

Introduction & Demonstration

The ListBox control is similar to the DropDownList control with two important differences. First, the ListBox control requires more screen real estate because it always displays a certain number of list items. Furthermore, unlike the DropDownList control, the ListBox control enables a user to select multiple items.

Selecting Single Item

The page given below illustrates how we can enable a user to select a single item from a ListBox control.

ListBox1.gif

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub btnSubmit_Click(ByVal sender As ObjectByVal e As EventArgs)
        lblProduct.Text = lstProducts.SelectedItem.Text
    End Sub

</script>
<
html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
</head>
<
body>
    <form id="form1" runat="server">

    <div>

    <asp:ListBox
        id="lstProducts"
        DataSourceID="SqlDataSource1"
        DataTextField="TITLE"
        DataValueField="ID"
        Rows="4"
        Runat="server" />

    <p>
    <asp:Button
        id="btnSubmit"
        Text="Submit"
        OnClick="btnSubmit_Click"
        Runat="server" />
    </p>

    <hr />

    <asp:Label
        id="lblProduct"
        Runat="server" />

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
            ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
            SelectCommand="SELECT [ID], [TITLE] FROM [PRO_LIST]"></asp:SqlDataSource>

    </div>
    </form>
</body>
</
html>

Notice that the ListBox control in above example includes a Rows property. The Rows property determines the number of list items that the ListBox displays.

Selecting Multiple Item

We can also configure the ListBox control to enable a user to select multiple items. This is illustrated in the page given below.

ListBox2.gif

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub btnSubmit_Click(ByVal sender As ObjectByVal e As EventArgs)
        For Each item As ListItem In lstProducts.Items
            If item.Selected Then
                lblProduct.Text &= "<li>" & item.Text
            End If
        Next
    End Sub

</script>
<
html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title></title>
</head>
<
body>
    <form id="form1" runat="server">

    <div>

    <asp:ListBox
        id="lstProducts"
        DataSourceID="SqlDataSource1"
        DataTextField="TITLE"
        DataValueField="ID"
        Rows="4"
        SelectionMode="multiple"
        Runat="server" />

    <p>
    <asp:Button
        id="btnSubmit"
        Text="Submit"
        OnClick="btnSubmit_Click"
        Runat="server" />
    </p>

    <hr />

    <asp:Label
        id="lblProduct"
        EnableViewState="false"
        Runat="server" />

        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString1 %>"
            ProviderName="<%$ ConnectionStrings:DatabaseConnectionString1.ProviderName %>"
            SelectCommand="SELECT [ID], [TITLE] FROM [PRO_LIST]"></asp:SqlDataSource>

    </div>
    </form>
</body>
</
html>

Notice that the ListBox given above includes a SelectionMode property that is set to the value Multiple. A user can select multiple items from the ListBox by using the Ctrl or Shift key when clicking more than one list item. Most users don't understand how to select multiple items from a ListBox control. If you want to enable users to pick multiple items, a better approach is to use either the CheckBoxList control or the MultiSelectList control. When we click the Submit button then all the selected list items are displayed in a Label control. The SelectedItem, SelectedIndex, and SelectedValue properties return only the first list item selected. When multiple items are selected, we need to iterate through the Items collection of the ListBox control to detect the selected items.

HAVE A GREAT CODING!


Similar Articles