AJAX Cascading Dropdown Example using XML Data

In the previous article we discussed about the properties of Cascading Dropdown extender control, now here we will learn how to use the XML data document to populate the data in associated dropdown controls of ASP.Net. Cascading Dropdown web method consumes the very simple hierarchy of XML document to populate the first dropdown and then other dropdown according to the change in selected index of first dropdown control.

In this example code for Cascading Dropdown extender control we have generated a XML document using Categories and Products table of Northwind database. The cascading dropdown extender controls used in this example will explain the functionality to load the first dropdown control with categories and on selected index change it will populate the second dropdown control with corresponding product names.

HTML code for Cascading Dropdown Extender Control

<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<table border="0" cellpadding="2" cellspacing="0" width="500">
    <tr>
        <td width="100">
            <b>Select Category :</b></td>
        <td>
            <asp:DropDownList ID="drdCategory" runat="server">
            </asp:DropDownList>
            <ajaxToolkit:CascadingDropDown
            ID="CascadingDropDown1"
            runat="server"
            Category="category"
            TargetControlID="drdCategory"
            PromptText="[Select Category]"
            ServicePath="cascadingwebservice.asmx"
            ServiceMethod="GetDropDownContents">
            </ajaxToolkit:CascadingDropDown>
        </td>
    </tr>
    <tr>
        <td>
            <b>Select Product :</b></td>
        <td>
            <asp:DropDownList ID="drdProduct" runat="server" OnSelectedIndexChanged="drdProduct_SelectedIndexChanged" AutoPostBack="True">
            </asp:DropDownList>
            <ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server"
            Category="product"
            TargetControlID="drdProduct"
            ParentControlID="drdCategory"
            PromptText="[Select Product]"
            LoadingText="Loading products..."
            ServicePath="cascadingwebservice.asmx"
            ServiceMethod="GetDropDownContents">
            </ajaxToolkit:CascadingDropDown>
        </td>
    </tr>
    <tr>
        <td colspan="2">
             </td>
    </tr>
    <tr>
        <td colspan="2">
            <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
                <ContentTemplate>
                    <asp:Label ID="Label1" runat="server" Font-Size="16px" ForeColor="Maroon" Style="padding: 5px;"></asp:Label>
                </ContentTemplate>
                <Triggers>
                    <asp:AsyncPostBackTrigger ControlID="drdProduct" EventName="SelectedIndexChanged" />
                </Triggers>
            </asp:UpdatePanel>
        </td>
    </tr>
</table>

Above example shows the HTML code for CascadingDropdown Extender control with Web Service Property.  Following is the web service method to populate the dropdown controls:

Web Service for CascadingDropdown Extender

private static XmlDocument _xmlDocument;
private string[] documentHierarchy = new string[] { "category", "product" };

public CascadingWebService()
{

    //Uncomment the following line if using designed components 
    //InitializeComponent(); 
}

[WebMethod]
public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)
{
    _xmlDocument = new XmlDocument();
    _xmlDocument.Load(HttpContext.Current.Server.MapPath("~/App_Data/northwind.xml"));
    StringDictionary knownCategoryValuesDictionary = AjaxControlToolkit.CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
    return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(_xmlDocument, documentHierarchy, knownCategoryValuesDictionary, category);
}

Please note that you can change the name of web method but you have to use the same name and datatype for the web method parameters and return type as used in the sample web service provided with this article. E.g.:

public AjaxControlToolkit.CascadingDropDownNameValue[] GetDropDownContents(string knownCategoryValues, string category)

You have to add EnableEventValidation="false" in <% @Page %> header section of your ASP.Net web page to enable the AsynchronousPostback trigger of UpdatePanel.

You can download the XML Data file here: northwind.xml (4.08 kb)

Continue to next tutorial: AJAX CollapsiblePanel Control Extender to learn the expand and collapse functionality of Collapsible Panel.