Filtering dropdown by value selected from another dropdown

This is the first posting of Beginners section of this blog. I will put here code samples that are not advanced enough to put them elsewhere in this blog. First example shows how to filter one dropdown list based on value selected from another.

Let’s create example web form and let’s name it as DropDownFiltering.aspx. We will add two dropdown lists to it and name it as ddlMain and ddlSub. ddlMain is main dropdown that provides filter value to ddlSub. The code of form follows.

<%@ Page 
   
Language="C#" AutoEventWireup="true"
 
   
CodeBehind="DropDwonFiltering.aspx.cs"
 
   
Inherits="MyApplication1.DropDownFiltering" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 
   
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<
html xmlns="http://www.w3.org/1999/xhtml" 
>
<
head id="Head1" runat="server">
    <title>My Page</title
>
</
head
>
<
body>
    <form id="form1" runat="server">
    <div>
        Main selection:
       
<asp:DropDownList runat="server" ID="ddlMain" DataTextField="Title"
 
           
DataValueField="Id" AutoPostBack="true"
 
           
onselectedindexchanged="ddlMain_SelectedIndexChanged">
 
       
</asp:DropDownList>
        Sub selection
       
<asp:DropDownList runat="server" ID="ddlSub" DataTextField="Title"
 
           
DataValueField="Id">
        </asp:DropDownList>
    </div>
    </form
>
</
body
>
</
html
>

As you can see I defined OnSelectedIndexChanged event for ddlMain, also it has  AutoPostBacks turned on. If user selects some value from ddlMain then web page will be sent to server and OnSelectedIndexChanged event will be fired.

Let’s see now the code behind this page. There are two methods for binding dropdown lists with data. These methods are separate and not part of some events because we need to call them in more than one place in our code. When Page is loaded we will check if it is post back. If it is not post back then there is no data in dropdown lists and we have to bind them.

using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using
System.Web.UI.WebControls.WebParts;

namespace
MyApplication1
{
   
public partial class DropDownFiltering : System.Web.UI.Page
    {
       
protected void Page_Load(object sender, EventArgs
e)
        {
           
if
(IsPostBack)
               
return
;

            BindMain();
            BindSub();
        }

       
protected void
BindMain()
        {
            ddlMain.DataSource = GetMainData();
            ddlMain.DataBind();
        }

       
protected void
BindSub()
        {
           
DataTable
table = GetSubData();
            table.DefaultView.RowFilter =
"ForeignID="
+ ddlMain.SelectedValue;

            ddlSub.DataSource = table;
            ddlSub.DataBind();
        }

       
protected DataTable
GetMainData()
        {
           
DataTable table = new DataTable
();
            table.Columns.Add(
"ID"
);
            table.Columns.Add(
"Title"
);

           
DataRow
dr;

            dr = table.NewRow();
            dr[
"ID"
] = 1;
            dr[
"Title"] = "First"
;
            table.Rows.Add(dr);

            dr = table.NewRow();
            dr[
"ID"
] = 2;
            dr[
"Title"] = "Second"
;
            table.Rows.Add(dr);

            dr = table.NewRow();
            dr[
"ID"
] = 3;
            dr[
"Title"] = "Third"
;
            table.Rows.Add(dr);

           
return
table;
        }

       
protected DataTable
GetSubData()
        {
           
DataTable table = new DataTable
();
            table.Columns.Add(
"ID"
);
            table.Columns.Add(
"ForeignID"
);
            table.Columns.Add(
"Title"
);

           
DataRow
dr;

            dr = table.NewRow();
            dr[
"ID"
] = 1;
            dr[
"ForeignID"
] = 1;
            dr[
"Title"] = "1:First"
;
            table.Rows.Add(dr);

            dr = table.NewRow();
            dr[
"ID"
] = 2;
            dr[
"ForeignID"
] = 1;
            dr[
"Title"] = "1:Second"
;
            table.Rows.Add(dr);

            dr = table.NewRow();
            dr[
"ID"
] = 3;
            dr[
"ForeignID"
] = 2;
            dr[
"Title"] = "2:First"
;
            table.Rows.Add(dr);

            dr = table.NewRow();
            dr[
"ID"
] = 4;
            dr[
"ForeignID"
] = 2;
            dr[
"Title"] = "2:Second"
;
            table.Rows.Add(dr);

           
return
table;
        }

       
protected void ddlMain_SelectedIndexChanged(object sender, EventArgs e)
        {
            BindSub();
        }
    }
}

The last thing is SelectedIndexChanged event handler that is attached to ddlMain. This event will be fired when the value of ddlMain is changed on client side. When ddlMain has changed then ddlSub is binded again to show the values that correspond to ddlMain value.

Methods GetData() and GetSubData() are for example purposes only and in real applications you should replace them with your own methods that provide real data to dropdowns.

Gunnar Peipman

Gunnar Peipman is ASP.NET, Azure and SharePoint fan, Estonian Microsoft user group leader, blogger, conference speaker, teacher, and tech maniac. Since 2008 he is Microsoft MVP specialized on ASP.NET.

    Leave a Reply

    Your email address will not be published. Required fields are marked *