Cascaded dropdown using jQuery

• Download source code - 354 KB

Introduction

In this article, I will explain how to create cascaded dropdowns using jQuery and AJAX. Cascaded dropdowns are provided by the AJAX Control Toolkit, but with this technique, you have much more control over your code, and it is quite easy to expand and implement. Also, jQuery is more lightweight than the AJAX Control Toolkit.

Using the code

The server-side method call by jQuery is as follows:

[WebMethod]
public static Dictionary<string, object> GetFileType(string x, string y)
{
    try{
        Dictionary<string, object> dd = new Dictionary<string, object>();
        dd = GetFromDataBase("Select FiletypeId,Filetypename from M_FileType");
        return dd;
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

private static Dictionary<string, object> GetFromDataBase(string Query)
{
    try
    {
        DataSet ds = new DataSet();
        OracleConnection oCon = new OracleConnection(Your Connection String goes here);
        OracleCommand oCmd = new OracleCommand(Query, oCon);
        OracleDataAdapter da = new OracleDataAdapter(oCmd);
        da.Fill(ds);
        return HimJSON1.ToJson(ds.Tables[0]);
    }
    catch (Exception ex)
    {
        throw ex;
    }
}

In the source code, place the dropdownlists:

<asp:DropDownList ID="ddFileType" class="FillDD" 
  SuccessMethod="outputDT" TargetControl="ddFileColumn" 
  ErrorMethod="ShowError" Item="FILECOLID" 
  Description="NAME" 
  ServerMethod="Default.aspx/GetFileColumn" width="300 px" 
  runat="server">
    <asp:ListItem Value="-1">---Select---</asp:ListItem>
</asp:DropDownList> 

Here, you will see some extra attributes:

• SuccessMethod: It will be called on successful execution of the server-side method.
• ErrorMethod: It will be called on exception thrown by the server-side method.
• TargetControl: ID of the child dropdown which will be bound on the selected index change of the parent dropdown.
• Item: Item field of the child dropdown which will be bound to the table column returned by the datatable.
• Description: Description field of the child dropdown which will be bound to the table column returned by the datatable.
• ServerMethod: Name of the server-side method which will be called by jQuery.

Exploring the JS code

• function outputDT: This function is called when a successful result has been returned by the server-side method. In this method, I have called the BindDropdown() method which takes care of binding the child drop down. You can modify this method to implement any additional functionality.
• function ShowError: This function is called when there is any exception thrown by the server-side method. You can modify this function to handle exceptions gracefully.
• $('.FillDD').change(function(e): This will be called every time on the selected index change of the dropdown which has an attribute class="FillDD".

Note: Instead of using a server-side method, you can also use a Web Service.

Here, as you can see, it requires only writing some attributes to your parent dropdown and you are ready to use the cascaded dropdowns.

Points of interest

In the source code, you will find two files in the App_code folder. In these, I have implemented two different approaches to convert a datatable to JSON which you will find quite interesting and useful. You can use these classes not only here but in any project where you want to convert a datatable to JSON.

Any suggestions and improvements will be highly appreciated.