User Tools

Site Tools


notes:asp.net:list_controls

ASP.NET List Controls

ASP.NET list controls are:

  • CheckBoxList
  • RadioButtonList
  • DropDownList
  • ListBox

All ASP.NET list controls derive from the ListControl class. They have a few common properties:

  • ListItem (ListItem.Value and ListItem.Text)
  • SelectedIndex and SelectedItem (SelectedItem.Value and SelectedItem.Text and also SelectedValue) point to the selected item with the lowest index
  • SelectedIndex is set to -1 when nothing is selected
  • Selected is set to True for items that are selected
  • The list controls raise the SelectedIndexChanged event
  • The DataTextField property represents a data set member to display as the Text property of the list item
  • The DataValueField property represents a data set member to return as the Value property of the list item

Items can be added statically, programmatically (using Items.Add), or from a data source.

Example: A CheckBoxList with a SelectedIndexChanged event handler:

<asp:CheckBoxList ID="CheckBoxList1" 
    AutoPostBack="True"
    DataValueField="ID" DataTextField="ProductName"
    CellPadding="3" CellSpacing="5"
    RepeatColumns="2" RepeatDirection="Vertical" RepeatLayout="Table"
    OnSelectedIndexChanged="CheckBoxList1_SelectedIndexChanged"
    runat="server" />
public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
            BindList();
    }
 
    protected void CheckBoxList1_SelectedIndexChanged(Object source, EventArgs e)
    {
        // Determine the checkbox list object.
        CheckBoxList list = source as CheckBoxList;
 
        // Display the selected item with the lowest index.
        if (list.SelectedIndex != -1)
        {
            Debug.WriteLine("\nSelected item: ");
            Debug.WriteLine(list.SelectedItem.Value);
            Debug.WriteLine(list.SelectedItem.Text);
        }
 
        // Display all selected items.
        Debug.WriteLine("\nSelected items:");
        foreach (ListItem item in list.Items)
            if (item.Selected)
                Debug.WriteLine(item.Text);
    }
 
    private void BindList()
    {
        var products = new[]
        {
            new Product { ID = 100, ProductName = "Umbrella" },
            new Product { ID = 101, ProductName = "Table" },
            new Product { ID = 102, ProductName = "Chair" },
            new Product { ID = 103, ProductName = "Lamp" },
            new Product { ID = 104, ProductName = "Bookcase" },
        };
 
        CheckBoxList1.DataSource = products;
        CheckBoxList1.DataBind();
    }
 
    public class Product
    {
        public int ID { get; set; }
        public string ProductName { get; set; }
    }
}

Output:

Selected item: 
101
Table
 
Selected items:
Table
Lamp
Bookcase

Example: A RadioButtonList populated statically:

<asp:RadioButtonList id="RadioButtonList1" 
    AutoPostBack="True" 
    CellPadding="3" CellSpacing="5" 
    RepeatColumns="2" RepeatDirection="Horizontal" 
    runat="server">
    <asp:ListItem Text="AAA" Value="1" Selected = "true"/>
    <asp:ListItem Text="BBB" Value="2"/>
    <asp:ListItem Text="CCC" Value="3"/>
    <asp:ListItem Text="DDD" Value="4"/>
    <asp:ListItem Text="EEE" Value="5"/>
    <asp:ListItem Text="FFF" Value="6"/>
</asp:RadioButtonList>

Example: A DropDownList populated statically with an item selected in code:

<asp:DropDownList ID="DropDownList1"
    AutoPostBack="true"
    Width="200" 
    OnSelectedIndexChanged="DropDownList1_SelectedIndexChanged" 
    runat="server">
    <asp:ListItem Value="1" Text="AAA" />
    <asp:ListItem Value="2" Text="BBB" />
    <asp:ListItem Value="3" Text="CCC" />
    <asp:ListItem Value="4" Text="DDD" />
    <asp:ListItem Value="5" Text="EEE" />
</asp:DropDownList>
public partial class Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            // Two methods of selecting an item.
 
            // Method #1 (FindByValue)
            DropDownList1.SelectedIndex = DropDownList1.Items.IndexOf(DropDownList1.Items.FindByValue("3"));
 
            // Method #2 (FindByText)
            ListItem item = DropDownList1.Items.FindByText("CCC");
            if (item != null) DropDownList1.SelectedIndex = DropDownList1.Items.IndexOf(item);
 
        }
    }
 
    protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
    {
        // SelectedValue is a string.
        int val = Convert.ToInt32(DropDownList1.SelectedValue);
 
        Debug.WriteLine(val);
    }
}

Example: A DropDownList with client-side code invoked when a value in the list changes:

<script lang="javascript" type="text/javascript">
function DoSomething(ddl)
{
    alert(ddl.value); // shows 1, 2, or 3
}
</script>
 
...
 
<asp:DropDownList ID="DropDownList1"
    Width="50" 
    onchange="DoSomething(this)" 
    runat="server">
    <asp:ListItem Value="1" Text="A" />
    <asp:ListItem Value="2" Text="B" />
    <asp:ListItem Value="3" Text="C" />
</asp:DropDownList>
notes/asp.net/list_controls.txt · Last modified: 2016/04/18 by admin