List Controls in Asp.net C# Web Form

on

Introduction to List Controls:

In Asp.net there are several list controls, like
1. DropDownList
2. CheckBoxList
3. RadioButtonList
4. ListBox
5. BulletedList
All these controls inherited from ListControl class and all these controls supports databinding.
You can add items either in frontend page (.aspx page) or from backend page (.aspx.cs)

Create a new web form.

Drag a BulletedList, CheckBoxList, DropDownList, ListBox and RadioButtonList from toolbox.

Set ID of all controls.

Add ListItem to all of them.

Each ListItem has 4 properties:

Text: It is used to display to the user.

Value: It is used to get at the back end e.g. it can be set to numerical value.

Enabled: It’s a Boolean property, you can make it true or false.

Selected: It’s a Boolean property, only 1 ListItem can be set to true in a control.

You can add items to each control either from front end page or back end page.

Set AutoPostBack property of all controls to true except BulletedList if you want to generate a backend call whenever it is selected indexed changed.

You can its style properties like CssClass, ForeColor, BackColor, BorderStyle, BorderColor, Height, Width, Font-Bold, Font-Size etc.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style>
        body {
            margin-left: 40%;
        }

        .list {
            margin: 10px;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <h4>BulletedList</h4>
            <asp:BulletedList ID="bList" runat="server" ForeColor="DeepPink" CssClass="list">
                <asp:ListItem Text="Mathematics" Value="Math"></asp:ListItem>
            </asp:BulletedList>
            <br />
            <h4>CheckBoxList</h4>
            <asp:CheckBoxList ID="cBoxList" runat="server" ForeColor="DarkBlue" AutoPostBack="true" CssClass="list" OnSelectedIndexChanged="cBoxList_SelectedIndexChanged">
                <asp:ListItem Text="Physics" Value="Phy"></asp:ListItem>
            </asp:CheckBoxList>
            <br />
            <h4>DropDownList</h4>
            <asp:DropDownList ID="ddList" runat="server" ForeColor="DarkGreen" AutoPostBack="true" CssClass="list" OnSelectedIndexChanged="ddList_SelectedIndexChanged">
                <asp:ListItem Text="Mathematics" Value="Math"></asp:ListItem>
            </asp:DropDownList>
            <br />
            <h4>ListBox</h4>
            <asp:ListBox ID="lBox" runat="server" ForeColor="DarkRed" AutoPostBack="true" CssClass="list" OnSelectedIndexChanged="lBox_SelectedIndexChanged">
                <asp:ListItem Text="Physics" Value="Phy"></asp:ListItem>
            </asp:ListBox>
            <br />
            <h4>RadioButtonList</h4>
            <asp:RadioButtonList ID="rBtnList" runat="server" ForeColor="Purple" AutoPostBack="true" CssClass="list" OnSelectedIndexChanged="rBtnList_SelectedIndexChanged">
                <asp:ListItem Text="Mathematics" Value="Math"></asp:ListItem>
            </asp:RadioButtonList>
            <br />
            <asp:Label ID="lblMsg" runat="server" BackColor="Black" Font-Size="Large" Font-Bold="true" ForeColor="White"></asp:Label>
        </div>
    </form>
</body>
</html>

Functions:

Add LisItems using backend:
protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ListItem item1 = new ListItem("Biology", "Bio");
                ListItem item2 = new ListItem("Chemistry", "Che");

                bList.Items.Add(item1);
                cBoxList.Items.Add(item2);
                ddList.Items.Add(item1);
                lBox.Items.Add(item2);
                rBtnList.Items.Add(item1);
            }

        }

Most common function of each control on changing selection is following:
(BulletedList is just used to display items in a list and doesnot allow selection)

CheckBoxList has OnSelectedIndexChanged function.

DropDownList has OnSelectedIndexChanged function.

ListBox has OnSelectedIndexChanged function.

RadioButtonList has OnSelectedIndexChanged function.

Now in the function generated in .aspx.cs file we are going to display the SelectedItem Text and Value and bind it to a label.

        protected void cBoxList_SelectedIndexChanged(object sender, EventArgs e)
        {
            lblMsg.Text = "Text: " + (sender as CheckBoxList).SelectedItem.Text + " Value: " + (sender as CheckBoxList).SelectedItem.Value;
        }

        protected void ddList_SelectedIndexChanged(object sender, EventArgs e)
        {
            lblMsg.Text = "Text: " + (sender as DropDownList).SelectedItem.Text + " Value: " + (sender as DropDownList).SelectedItem.Value;
        }

        protected void lBox_SelectedIndexChanged(object sender, EventArgs e)
        {
            lblMsg.Text = "Text: " + (sender as ListBox).SelectedItem.Text + " Value: " + (sender as ListBox).SelectedItem.Value;
        }

        protected void rBtnList_SelectedIndexChanged(object sender, EventArgs e)
        {
            lblMsg.Text = "Text: " + (sender as RadioButtonList).SelectedItem.Text + " Value: " + (sender as RadioButtonList).SelectedItem.Value;
        }

Done!
Run the program.
Change the selected item of each control and see the call of backend functions.






Let me know in the comment section if you have any question.

Previous Post:
CheckBox Control in Asp.net C# Web Form

Coming Soon:
SqlDataSource in Asp.net C# Web Form