AJAX Cascading Dropdown Example using SQL Database

by top54u.com 31 May, 2008

Inside ASP .NET Tutorials | ASP.Net AJAX

AJAX Cascading Dropdown Example using XML Data

ASP.Net AJAX Cascading Dropdown Control Extender

ASP.Net Dynamic AJAX Dropdown Menu Extender Control

ASP.Net 2.0 SQL Server database connection string

ASP.Net GridView DropDownList DataSource and DataBinding

Database Connectivity in ASP.Net

ADO.Net Data Access Model for ASP.Net-Part 1

Spotlight.....

The AJAX Cascading Dropdown extender control can also be used with SQL Server Database to populate the target dropdown controls with data retrieved form the database using web service method. Here we will use the same example of Northwind database in which first drop will display the categories retrieved from the categories table of Northwind and on selected index event will call the web service method to populate the other dropdown control with the products that belong to the selected category.

In this sample example for AJAX cascading dropdown control to work with SQL Database we will see how the Category property plays an important role to retrieve the related results from the database tables.

HTML code for Cascading Dropdown Extender Control

    <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]"
                    LoadingText="Loading categories..."
                    ServicePath="cascadingdataservice.asmx"
                    ServiceMethod="GetDropDownCategories">
                    </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="cascadingdataservice.asmx"
                    ServiceMethod="GetDropDownProducts">
                    </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>

When ParentControlID is passed to the Cascading Dropdown extender it sends the value of the selected item of parent dropdown control along with its key name defined in the Category Property of Parent dropdown control. In the sample code you will see that categoryID of the selected item of categories dropdown (Parent Dropdown control) is sent to the web method when any categoryName is selected. It passed the combination of Category Property value and selected item value of Parent Dropdown control as:

category:3
or
category:5

In the above values category is the key name used in the Category property of first dropdown control of the Cascading Dropdown sample. Numeric value is the categoryID of the selected item. knownCategoryValues parameter of the web method provides the value for the selected item of Parent Dropdown control.

To use the above value you can declare a variable of type StringDictionary and parse it using:

StringDictionary categoryValues = AjaxControlToolkit.CascadingDropDown. ParseKnownCategoryValuesString(knownCategoryValues);

StringDictionary class belongs to the Specialized namespace of System.Collections

List<> type Generic collection can be used to accumulate the results retrieved using SqlDataAdapter:

List<AjaxControlToolkit.CascadingDropDownNameValue> cascadingValues = new List<AjaxControlToolkit.CascadingDropDownNameValue>();

In the web method used for web service of cascading dropdown extender control You can use the different names for the web methods but you have to use the same name and datatype of the web method parameters and return type as used in the provided web service sample. E.g.:

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

You have to set the EnableEventValition="false" in the <% @Page %> header section of ASP.Net web page to enable the Asynchronous postback triggers of UpdatePanel.

You can download the free sample code for AJAX Cascading Dropdown Example using SQL Database here…

ajax cascading dropdown database.zip (4.63 kb)

Spotlight.....

Currently rated 2.0 by 1 people