HomeLearnASP.NET AJAX VideosHow Do I: Use the ASP.NET AJAX CascadingDropDown Control Extender?  

How Do I: Use the ASP.NET AJAX CascadingDropDown Control Extender?

This video demonstrates how ASP.NET’s standard DropDownList can become AJAX-enabled using the CascadingDropDown control extender from the ASP.NET AJAX Control Toolkit. You will also see how easy it is for a web form to draw its data from an XML Web Service.

Presented by Joe Stagner

Duration: 27 minutes, 56 seconds

Date: 24 January 2007

Watch the video   |   Download the video   |   Get VB code  or  C# code

Video downloads: WMV | Zune | iPod | PSP | MPEG-4 | 3GP

Audio downloads: AAC | WMA | MPEG-4 | MPEG-3 | MPEG-2

Comments : 21

Leave a Comment

polaw : On March 04, 2008 9:41 PM said:

I found this much more helpful than the article located at www.asp.net/.../CCDWithDB.aspx

Although, the other article gave me a vague idea of the concept, it left me with more questions than answers.

I will watch this a couple more times and re-create the code shown in order to both learn how to do this and create a re-usable portion of code.

Thanks to Joe

JoeStagner : On March 15, 2008 12:54 PM said:

Glad it was usefull - THANKS !

nehaljain : On March 21, 2008 4:33 PM said:

This is very helpful video. Just a note that the code link shown is not matching with the code shown during presentation. I followed each step to create the same and I am able to populate the first drop down but corresponding values are not loaded in second drop down. Are category values are case sensitive? I will try to debug it through.

I will definately watch other similar video posted by Joe

JoeStagner : On March 22, 2008 11:29 AM said:

Just a note: The videos is recorded with the programming done in VB. The C# code is written later to accomplish the same task.

Rajska : On March 30, 2008 12:29 PM said:

Hello Joe,

I did 4 dropdownlist boxes in VB for World Regions, Countries, States/Provinces and Cities. It works.

I made a new one in C# as required by ASP.Net 3.5, but now all I get are method errors 500, 12030s. Any suggestions?

Thanks.

Rajska : On March 30, 2008 2:16 PM said:

Addendum:

I get this error report:

Error 1 File 'WorldService.asmx' was not found.

How do I make it be found?

Rajska : On March 30, 2008 8:03 PM said:

Ok, I solved problems of the first 3 dropdownlist boxes by placing a "~/" in front of the asmx file.  But the last 4th box still gives Method error 500 or 12031.

JoeStagner : On March 31, 2008 9:37 AM said:

500 is a server error which means there is a problem in your Service Code.

This can be caused either by a prgramming defect or by failing to correctly attribute the Service Class with the ScriptService attributes.

realjuancho : On April 07, 2008 2:35 PM said:

Hey Joe, im a newcomer at this whole ASP AJAX stuff

i have a little question, where is the GetDropDownContentsPageMethod in the C# Code?

JoeStagner : On April 14, 2008 8:53 PM said:

It's all the way to the bottom of Default.aspx.cs

Musafiir : On April 15, 2008 3:38 AM said:

Thx a lot for the tutorials Joe Stagner.

In your tutorial when setting the "ServiceMethod" for the dropdownlist2, you have used "GetDropDownListContentsPageMethod". What would be the result if we use only "GetDropDownListContents" and specifying the service path "CarsService.asmx"?

Am doing a page whereby the user will type a product name which will automatically update a dropdownlist Location where that particular product is found. There is a connection to a database. Can you please guide me what should i modify to bind it to database or if there is a similar tutorial somewhere.

Thnx Joe, waiting for your response

idanz : On April 17, 2008 4:24 PM said:

Hello Joe,

Do you know what the [Method Error 12030] means to?

agnomonus : On April 23, 2008 11:49 PM said:

I appreciated the video and followed very closely. When I launched my app however the dropdownlists were populated progressively with each selection before it, but for the life of me I can't get the label to display the final text. I've looked at the downloaded source and my code is identical but the label displays nothing. Any ideas about that?

chjk : On April 25, 2008 9:12 AM said:

it's so cool.THANKS Joe!

i have a question:

If i add a new chidnode "TheFirstOwner" in the node "color",seem this:

 <make name="Acura">

   <model name="Integra">

     <color name="Green" >

       <TheFirstOwner name="Joe Stagner" />

     </color >

     ...

 </make>

</CarsService>

i want to know how to dispay the "TheFirstOwner" item in

the Label1 in the DropDownList3_SelectedIndexChanged

event?

thank you very much!

chjk : On April 25, 2008 9:18 AM said:

if i choose Acura--Integra--Green

Label1.txet will display:

"You have chosen a Green Acura Green . Nice car! The First Owner is Joe Stagner"

Hideyoshi : On May 06, 2008 4:33 AM said:

To Joe,

the attribute of the Service Class with the ScriptService attributes is compulsary in the webservice.vb file? I'm facing the problem of method error 500 too. i'm Using SQL Server 2005 as my database.

Rajska : On May 07, 2008 5:43 PM said:

Same problem with Musafiir. How to data bind the selectedvalue to the database?  Will this work?  Add DataTextField="Make" SelectedValue='<%#Bind("Make") %>'  to the asp:DropDownList.

Or can SelectedValue='<%Bind("Make")%>' be added in the code-behind?

charnata : On May 12, 2008 2:39 PM said:

Joe,

I have been able to get the example to work.  Now I am attempting to use this example with my data.  I have been able to get the first two boxed to work however on the third dropdown box I get the dreaded 500 error.  Can you give me an idea of where to look in my code.  I have three datasets dsAllSite, dsServiceUnits and dsSelectedSites.

My appologies if I have been to vague or not given you enough information to assist me.

//default.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="false" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "www.w3.org/.../xhtml11.dtd">

<html xmlns="www.w3.org/.../xhtml">

<head runat="server">

<link href="returnSiteService.css" rel="stylesheet" type="text/css" />

   <title>Untitled Page</title>

</head>

<body style="text-align: center">

   <form id="form1" runat="server">

       <asp:ScriptManager ID="ScriptManager1" runat="server" />

       <br />

       &nbsp;<div style="text-align: center">

           <table>

               <tr>

                   <td class="tblLabel">ATO:</td>

                   <td class="tblSpacer"></td>

                   <td class="tblDropDown">

                       <asp:DropDownList ID="ddlAto" runat="server" CssClass="dropdown" />

                   </td>

               </tr>

               <tr>

                   <td class="tblLabel">Service Unit:</td>

                   <td class="tblSpacer"></td>

                   <td class="tblDropDown">

                       <asp:DropDownList ID="ddlSu" runat="server" CssClass="dropdown" />

                   </td>

               </tr>

           </table>

       </div>

       <br />

       <br />

       <cc1:CascadingDropDown ID="ccdAto"

                              runat="server"

                              TargetControlID="ddlAto"

                              Category="Symbol"

                              PromptText="Please begin here..."

                              LoadingText="Please wait..."

                              ServicePath="ReturnSiteService.asmx"

                              ServiceMethod="GetAto">

       </cc1:CascadingDropDown>

       <cc1:CascadingDropDown ID="ccdSU"

                              runat="server"

                              TargetControlID="ddlSu"

                              ParentControlID="ddlAto"

                              Category="Symbol"

                              PromptText="Select a Service Unit..."

                              LoadingText="Please wait..."

                              ServicePath="ReturnSiteService.asmx"

                              ServiceMethod="GetSUData">

       </cc1:CascadingDropDown>

       <cc1:CascadingDropDown ID="ccdOffice"

                              runat="server"

                              TargetControlID="ddlOffice"

                              ParentControlID="ddlSu"

                              Category="Symbol"

                              PromptText="Select an Office..."

                              LoadingText="Please wait..."

                              ServicePath="ReturnSiteService.asmx"

                              ServiceMethod="GetOfficeSites">

       </cc1:CascadingDropDown>

    </form>

</body>

</html>

//returnSiteService.cs

using System;

using System.Web;

using System.Collections;

using System.Collections.Generic;

using System.Collections.Specialized;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Data;

using System.Data.SqlClient;

using AjaxControlToolkit;

/// <summary>

/// Summary description for ReturnSiteService

/// </summary>

[WebService(Namespace = "http://tempuri.org/")]

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

[System.Web.Script.Services.ScriptService]

public class ReturnSiteService : System.Web.Services.WebService {

   public ReturnSiteService () {

       //Uncomment the following line if using designed components

       //InitializeComponent();

   }

   [WebMethod]

   public CascadingDropDownNameValue[] GetAto(string knownCategoryValues, string category)

   {

       dsAllSitesTableAdapters.atostructureTableAdapter siteAdapter = new dsAllSitesTableAdapters.atostructureTableAdapter();

       dsAllSites.atostructureDataTable makes = siteAdapter.GetAllSiteData();

       List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();

       foreach (DataRow dr in makes)

       {

           string Symbol = (string)dr["Symbol"];

           int siteIdx = (int)dr["Idx"];

           values.Add(new CascadingDropDownNameValue(Symbol, siteIdx.ToString()));

       }

       return values.ToArray();

   }

   [WebMethod]//This method selectcts the Service Units

   public CascadingDropDownNameValue[] GetSUData(string knownCategoryValues, string category)

   {

       StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCateg oryValues);

       int siteIdx;  //clear after testing

       if (!kv.ContainsKey("Symbol") || !Int32.TryParse(kv["Symbol"], out siteIdx))

       {

           return null;

       }

       dsServiceUnitTableAdapters.atostructureTableAdapter serviceUnitAdapter = new dsServiceUnitTableAdapters.atostructureTableAdapter();

       dsServiceUnit.atostructureDataTable su = serviceUnitAdapter.GetSUAllData(siteIdx);

       List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();

       foreach (DataRow dr in su)

       {

           values.Add(new CascadingDropDownNameValue((string)dr["Symbol"], dr["Idx"].ToString()));

       }

       return values.ToArray();

   }

   [WebMethod]// This method selesct the children of the service unit

   public CascadingDropDownNameValue[] GetOfficeSites(string knownCategoryValues, string category)

   {

       StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knownCateg oryValues);

       int siteIdx;  //clear after testing

      if (!kv.ContainsKey("Symbol") || !Int32.TryParse(kv["Symbol"], out siteIdx))

       {

           return null;

       }

       dsSelectedSitesTableAdapters.atostructureTableAdapter selectedSitesAdapter = new dsSelectedSitesTableAdapters.atostructureTableAdapter();

       dsSelectedSites.atostructureDataTable ss = selectedSitesAdapter.GetSelectedSites(siteIdx);

       List<CascadingDropDownNameValue> values = new List<CascadingDropDownNameValue>();

       foreach (DataRow dr in ss)

       {

           values.Add(new CascadingDropDownNameValue((string)dr["Symbol"], dr["Idx"].ToString()));

       }

       return values.ToArray();

   }

}

the_N_Channel : On May 14, 2008 8:02 AM said:

Ok, so the 500 error is a Server error...now I'm getting a 405 error. I went into the Toolkit code to try to find the dictionary that has the relationship between these numbers and what they mean, but it didn't seem to be in the CascadingDropDown...where can one find the information to decode these numbers? Generic numeric error messages is very Therac-25!

charnata : On May 15, 2008 1:00 PM said:

OK, I narrow down the issue I beleive but I do not know how to fix it or where to start.  In my third dropdown box the ParentControlID will not recongnize the dropdown box ID.  If I switch the third box to the first box it fill its box with selections based on the first dropdown box.  Can anyone give me an idea of where to look to correct this?

Thanks

charnata : On May 16, 2008 1:18 PM said:

Yea... I found my issue other than myself, Duh!  Since I was using a single table that had a hierarchal data set I was referencing the same column name in each of my [WebMethod] coding blocks.  Since I needed to use this data I gave the column an alias in each of the data set calls change .cs and .aspx pages accordingly and bingo it works!  A user to have up to 8 dropdown boxes and they all are working off the parent dropdown.

Leave a Comment

You must be logged in to leave a comment. Click here to log in.