{infiniteZest}
// Articles. Tutorials. Utilities.
Home  |   Search  |   Login  
Categories Skip Navigation Links
New / All
AJAX
Apple
ASP.NET
.NET
Git
Google / Android
Python / IronPython
Miscellaneous
SQL Server
Cascading Dropdown without using the AJAX Control Toolkit
Summary
AJAX Control Toolkit contains a cascading dropdown control, where the results shown in the child dropdown depend on the parent dropdown. There is a way to AJAX-ify existing cascading dropdowns without using the AJAX Control Toolkit.
 
Table of Contents

The SqlDataSource Controls

Adding AJAX to the above dropdowns

 

Here we have two related dropdown list boxes: Category and SubCategory. The scenario here is to fill the ddlCategory dropdown with category values; and when a different category is selected in this list, appropriate sub categories would need to be shown in ddlSubCategory dropdown. The Dropdowns First, the two drop down lists:

<asp:DropDownList ID="ddlCategory" runat="server" Width="158px" DataSourceID="sdsCategory"
    DataTextField="ID" AutoPostBack="True">
</asp:DropDownList>

<asp:DropDownList ID="ddlSubCategory" runat="server" Width="157px" DataSourceID="sdsSubCategory"
    DataTextField="ID">
</asp:DropDownList>

Each of these drop downs get their data from its own SqlDataSource control. According to which field contains the the data you want to display, set the DataTextField of DropDownList. In this case, it so happens that the fields we want to display are named ID. It is important to note here that the category drop down has AutoPostBack set to True. Without this post back, the sub categories dropdown will not be updated when a different category is selected. This is what causes the flicker.

The SqlDataSource Controls

Now let’s see how the SqlDataSource controls are configured:

<asp:SqlDataSource ID="sdsCategory" runat="server" ConnectionString="<%$ ConnectionStrings:...%>"
    ProviderName="<%$ ConnectionStrings:... %>" SelectCommand="SELECT ID FROM Categories"
    DataSourceMode="DataReader"></asp:SqlDataSource>

<asp:SqlDataSource ID="sdsSubCategory" runat="server" ConnectionString="<%$ ConnectionStrings:... %>"
    DataSourceMode="DataReader" ProviderName="<%$ ConnectionStrings:... %>" SelectCommand="SELECT ID FROM SubCategories WHERE CategoryID = @CategoryID">
    <SelectParameters>
        <asp:ControlParameter ControlID="ddlCategory" Name="CategoryID" PropertyName="SelectedValue"
            DefaultValue="" />
    </SelectParameters>
</asp:SqlDataSource>

Following settings are set for both the SqlDataSource controls (in addition to the ConnectionString related settings):

  • SelectCommand: Getting the data from the database.
  • DataSourceMode is set to DataReader, because we are not editing the data

The way SqlDataSource for sub categories gets only the relevant sub categories is via the @CategoryID parameter. The parameter in the Where clause is obtained at runtime from the values listed in the SelectParameters settings. Here we are saying that the @CategoryID is to be replaced by SelectedValue of the ddlCategory dropdown.

Following is the entire listing of the two dropdowns and two SqlDataSource controls:

<asp:DropDownList ID="ddlCategory" runat="server" Width="158px" DataSourceID="sdsCategory"
    DataTextField="ID" AutoPostBack="True">
</asp:DropDownList>

<asp:SqlDataSource ID="sdsCategory" runat="server" ConnectionString="" ProviderName=""
    SelectCommand="SELECT ID FROM Categories" DataSourceMode="DataReader"></asp:SqlDataSource>

<asp:DropDownList ID="ddlSubCategory" runat="server" Width="157px" DataSourceID="sdsSubCategory"
    DataTextField="ID">
</asp:DropDownList>

<asp:SqlDataSource ID="sdsSubCategory" runat="server" ConnectionString="<%$ ConnectionStrings:... %>"
    DataSourceMode="DataReader" ProviderName="<%$ ConnectionStrings:... %>" SelectCommand="SELECT ID FROM SubCategories wHERE CategoryID = @CategoryID">
    <SelectParameters>
        <asp:ControlParameter ControlID="ddlCategory" Name="CategoryID" PropertyName="SelectedValue"
            DefaultValue="" />
    </SelectParameters>
</asp:SqlDataSource>

Adding AJAX to the above dropdowns

Now that two drop downs are linked to each other, you can AJAX-ify the above code very easily. Simply wrap the above code (the dropdowns) inside an UpdatePanel and you are home free.

<asp:UpdatePanel ID="UpdatePanel2" runat="server">
    <ContentTemplate>

        <asp:DropDownList ID="ddlCategory" runat="server" Width="158px" DataSourceID="sdsCategory"
            DataTextField="ID" AutoPostBack="True">
        </asp:DropDownList>

        <asp:SqlDataSource ID="sdsCategory" runat="server" ConnectionString="" ProviderName=""
            SelectCommand="SELECT ID FROM Categories" DataSourceMode="DataReader"></asp:SqlDataSource>

        <asp:DropDownList ID="ddlSubCategory" runat="server" Width="157px" DataSourceID="sdsSubCategory"
            DataTextField="ID">
        </asp:DropDownList>

        <asp:SqlDataSource ID="sdsSubCategory" runat="server" ConnectionString="<%$ ConnectionStrings:... %>"
            DataSourceMode="DataReader" ProviderName="<%$ ConnectionStrings:... %>" SelectCommand="SELECT ID FROM SubCategories WHERE CategoryID = @CategoryID">
            <SelectParameters>
                <asp:ControlParameter ControlID="ddlCategory" Name="CategoryID" PropertyName="SelectedValue"
                    DefaultValue="" />
            </SelectParameters>
        </asp:SqlDataSource>

    </ContentTemplate>
</asp:UpdatePanel>

Of course, for AJAX to work on this page, you need to add one and only one instance of ScriptManager.

Bookmark and Share This

More Articles With Similar Tags
Google Suggest style autocomplete feature is readily available from the AutoCompleteExtender control from the AJAX Toolkit. This article shows how to use control with the data obtained from database.
icon-ajaxservercontrol-new-project.jpg
This article explains the various pieces of the code generated for beginning an AJAX Server Control. The class ScriptControl and the over-ridden methods GetScriptDescriptors() and GetScriptReferences() are explained, among others.
icon-ajaxservercontrol-toolbox.jpg
This article talks about using an AJAX Server Control from a web site. Registering the control and adding a ScriptManager are also discussed.
This test has questions about using an AJAX Server Control from a web site. Registering the control and adding a ScriptManager are also included.
This is a test on the various pieces of the code generated for an AJAX Server Control. This includes the class ScriptControl and the over-ridden methods GetScriptDescriptors() and GetScriptReferences().
About  Contact  Privacy Policy  Site Map