AJAX Cascading Dropdown Example using XML Data

Updated on 19 Apr 2012,
Published on 05 Jun 2008

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.

AJAX Control Toolkit Examples:

You can see the live samples and examples of AJAX Control Toolkit from the following links:

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)

Output:

You can see the output of above discussed code from the following link:

AJAX CascadingDropdown Control XML DataBinding

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

5 Responses to "AJAX Cascading Dropdown Example using XML Data"
Vivian
Hi, Me again :-) In this example you say: "You have to add EnableEventValidation =" false "in <% @ Page%> header section of your ASP.Net web page to enable AsynchronousPostback the trigger of UpdatePanel. This procedure should be used in all components? If not do it, what happens? If you can help me. I thank you very much.
Ezineasp.net
Hi Vivian

If you will not set the EnableEventValidation ="false" then default ASP.Net functionality of validating the event raised by the control placed inside the UpdatePanel will not allow the callback event to execute successfully. It will trap the event and will open up an alert message box displaying the error regarding EnableEventValidation parameter.
Another thing to be aware of is that none of your XML tags have "Name" or "Value" with the capital letter, as it seems to be case sensitive. And this may be causing you "Error 500" to be appearing in your DropDownList. Just thought I would share this little quirk!
hi i am using this example but both the dropdownlist are appearing disabled. can you tell me why this is happening??
Tiny_Sandwich
Hey there, I've been getting an "Method Error 0" in my DropDownLists as my only option, what could be the cause of that?
Leave a Comment
* required
* required
* will not be published
* optional
* hint: http://www.example.com
  • Subscribe via Email