AJAX Cascading Dropdown Example using XML Data

by top54u.com 05 Jun, 2008

Inside ASP .NET Tutorials | ASP.Net AJAX

ASP.Net DataColumn Expression Property

ASP.Net DataTable Select Rows using DefaultView RowFilter

AJAX Cascading Dropdown Example using SQL Database

ASP.Net GridView DropDownList DataSource and DataBinding

Add ASP.Net DataColumn to DataTable

ASP.Net Bind GridView to DataTable

ASP.Net Repeater Bind Xml DataSource Control

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

[code:html]
<form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
    </div>
        <table border="0" cellpadding="2" cellspacing="0">
            <tr>
                <td>
                    Select Category</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>
                    Select Product</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"></asp:Label>
                        </ContentTemplate>
                        <Triggers>
                            <asp:AsyncPostBackTrigger ControlID="drdProduct" EventName="SelectedIndexChanged" />
                        </Triggers>
                    </asp:UpdatePanel>
                </td>
            </tr>
        </table>
    </form>

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

[code:c#]
    [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.

Download the free sample code for cascading dropdown extender control with Northwind.xml data document and cascadingwebservice.asmx here...

ajax cascading dropdown xml.zip (5.86 kb)

Spotlight.....

Be the first to rate this post