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

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

Glad it was usefull - THANKS !

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

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

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.

Addendum:

I get this error report:

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

How do I make it be found?

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.

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.

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

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

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

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

Hello Joe,

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

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?

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!

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"

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.

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?

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!

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

Hi

The downloaded C# code has a bad zip header. Is it corrupt?

Also, where is the C# code for GetDropDownContentsPageMethod - its not on the video or in the downloaded code. i.e. this stuff:

<script runat="server">

       <System.Web.Services.WebMethod()>

       <System.Web.Script.Services.ScriptMethod()>

       public Shared function GetDropDownContentsPageMethod(ByVal knownCategoryValues as string, ByVal Category as string) As AjaxControlToolkit.CascadingDropDownNameValue()

           return new CarsService().GetDropDownContents(knownCategoryValues, category)

       end function

       </script>

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.

sir i am usring you control in my website but some time i am getting this error Sys.WebForms.PageRequestManagerParserErrorException

Can you tell me how can i solve this problem and where it is existing?

Please reply me

Thanks

why everything has to be in ajax section in visual basic anguage?!!

why not any c# one

When I try to download this video the ZIP file comes back corrupt.  When I try to save target as on the wmv file, I get the first 5 minutes of the video and then it just stops.  Is there something wrong with the WMV version of the video, or is it just me?

Thanks.

thanks I was struggling with the implementation. Now its ok. But I am getting 'Method 500' error if the data size is large.

Can you please suggest a solution.

At how large does the problem start to appear ?

i am not sure about the size but I found a solution in another post

forums.asp.net/.../1706189.aspx

the below change in web.config solved by problem

<system.web.extensions><scripting>

   <webServices>

     <jsonSerialization maxJsonLength="5000000" />

   </webServices>

 </scripting>

 </system.web.extensions>

Hi,

Has anybody been able to bind this example to a database through datasets and table adapters? Also, has anybody been able to use the Cascading DropDown Lists in a formview?

Thanks,

E

www.asp.net/.../CCDWithDB.aspx

use the url above to learn how to hook up the CDDL extender to a database through table adapters. if you need to learn about table adapters look at the data access tutorials in the learn section.

Hi Joe: I'm need help. Now I am attempting to use a example with my data. I have error [Method error 500]

This the WebService:

using System;

using System.Web;

using System.Collections;

using System.Collections.Generic;

using System.Collections.Specialized;

using System.Web.Script.Services;

using System.Web.Services;

using System.Web.Services.Protocols;

using System.Data;

using System.Data.SqlClient;

using AjaxControlToolkit;

/// <summary>

/// Servucio web que nos proporcionara el listado de Catagorias y sus productos

/// </summary>

[System.Web.Script.Services.ScriptService()]

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

[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]

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

   public CategoriesProducts () {

       //Eliminar la marca de comentario de la línea siguiente si utiliza los componentes diseñados

       //InitializeComponent();

   }

[WebMethod]

public CascadingDropDownNameValue[] GetCategories(string knowCategoryValues, string Category)

{

SqlConnection cnn;

SqlCommand cmd;

SqlDataReader dtr;

try

{

cnn=new SqlConnection("Data Source=ARBAWKS081; User Id=sa; Password=sa; Initial Catalog=NorthWind");

cnn.Open();

cmd = new SqlCommand("Select CategoryId, CategoryName From Categories");

cmd.Connection=cnn;

dtr=cmd.ExecuteReader(CommandBehavior.CloseConnection);

List Categorias =

new List();

if (dtr.Read() == true)

{

while (dtr.Read() == true)

{

Int32 CatId = (Int32)dtr.GetInt32(0);

string CatName = (string)dtr.GetString(1);

Categorias.Add(new CascadingDropDownNameValue(CatName, CatId.ToString()));

}

return Categorias.ToArray();

}

else

{

return null;

}

}

catch(Exception ex)

{

string msg = "";

msg = ex.Message;

return null;

}

}

[WebMethod]

public CascadingDropDownNameValue[] GetProducts(string knowCategoryValues, string Category)

{

SqlConnection cnn;

SqlCommand cmd;

SqlDataReader dtr;

try

{

StringDictionary kv = CascadingDropDown.ParseKnownCategoryValuesString(knowCatego ryValues);

Int32 CatId;

if (!kv.ContainsKey("Category") || Int32.TryParse(kv["Category"],out CatId))

{

return null;

}

cnn=new SqlConnection("Data Source=ARBAWKS081; User Id=sa; Password=sa; Initial Catalog=NorthWind");

cnn.Open();

cmd = new SqlCommand("Select ProductId, ProductName From Products Where CategoryId = " + CatId.ToString() );

cmd.Connection=cnn;

dtr=cmd.ExecuteReader(CommandBehavior.CloseConnection);

List Products =

new List();

if (dtr.Read() == true)

{

while (dtr.Read() == true)

{

Int32 ProdId = (Int32)dtr.GetInt32(0);

string ProdName = (string)dtr.GetString(1);

Products.Add(new CascadingDropDownNameValue(ProdName, ProdId.ToString()));

}

return Products.ToArray();

}

else

{

return null;

}

}

catch(Exception ex)

{

string msg = "";

msg = ex.Message;

return null;

}

}

}

This aspx Page:

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

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

">www.w3.org/.../xhtml11.dtd">

">www.w3.org/.../xhtml">

   

I have been playing with this for a bit and it seems to me that the signature variable names can NOT be changed in any way.  They must be 'knownCategoryValues' and 'category'.  For example:

Public Shared Function getAssistWC(ByVal knownCategoryValues As String, ByVal category As String) As AjaxControlToolkit.CascadingDropDownNameValue()

if you change it, the code will throw an 500 error.  Is this right?

Hi Joe...

Web service is needed in order for the cascading dropdown to work? or even in class it will work...

I mean the code that load the data to dropdown must be in webservice or it is also ok if it is place in a class...

Please help me,because it gives me error...

Tnx

Hats off to Joe for the view. Thnx a bunch Joe.

Hi Joe,

The video was great...

Many ppl hv already asked the question:

Could you pls clarify:

whats the diff between the methods "GetDropDownContents" and "GetDropDownContentsPageMethod" since both need the web service call.

Thanks,

Sivva

Sivva, while I can't adequately explain the technical difference I can explain the way it works based on observation.

The GetDropDownContentsPageMethod is a method within the actual page, it invokes the web service's method GetDropDownContents.  

By putting [WebMethod] in the page's code behind, I am assuming it makes an asynchronous callback to that method, it invokes the web service method and VOILA, the drop down is filled with appropriate list items relevant to the selection made in the parent control.

Careful though.  Because I noticed when the page has been loaded as a result of a Server.Transfer, the client is unaware of this.  Let me explain.

I have a home page, default.aspx at the root, and a button on it to allow users to register.  The code behind on that page executes Server.Transfer("/register/register.aspx")

My client loads the correct page and the primary drop down and cascading dropdown extender makes it's call to the webservice and is loaded with data.

When I selected a value from the primary drop down, the CascadingDropdown2 control for the secondary dropdown initiates the directive in the ServiceMethod property - which is the name of the page method.

The problem I noticed is that it attempts to execute a page method in my default.aspx page, the page doesn't have that method so I get a [Method 500] error.

v/r

Tom

Joe,

Thanks for the video.  I am successfully using two CascadingDropDown extenders, supporting respective dropdowns.

My workaround for the problem I've described in my attempt to assist Sivva was to use the actual ServicePath and ServiceMethod as opposed to just the ServiceMethod using the WebMethod coded in the page GetDropDownContentsPageMethod.  It works well.  Until I actually try and submit the page.

Then I get the "Invalid Postback" error.  Two questions.

1.  Did I cause this by not using the GetDropDownContentsPageMethod ?  Which I felt compelled to not use due to the Server.Transfer issue.

2.  Is <%@ page enableeventvalidation="false" %> the only way to avoid the Invalid Postback error ?

Thanks

v/r

Tom

good one, thanks joe

hello,

I'm using c# in my ASP.NET applications. And this video is based on VB. Do you think to publish a C# based video tutorial, to let us learn writing web references easily

Hi,

Thanks for the video.  I am successfully able to use CascadingDropDown extenders

I have a question.

If I use all these controls in user control I am not able to set <%@ page enableeventvalidation="false" %> as usercontrol doesn't support can you please help how to fire events

How can I test out the web service.  I am trying to view the format of string the web services output.

reference:

/CascadingDropDown/CarsService.asmx?op=GetDropDownContents

knownCategoryValues: Make

category: Make

but that is the only "test" I can make work.

I wanted to view the output of the web service, So I could better understand how the AJAX control is using the data to populate the drop-down boxes.

No other variation of the asmx paramters worked.  knownCategoryValues / category

Thanks,

Doug Lubey

Ok. So I decided to run the application on my localhost in debug mode.  And put a break point on the webservice.

Found out how the data is returned and also called upon in the web service.

Example format is as follows:

KnowCategoryValues = Make:Acura;

Category = Model

KnowCategoryValues = Make:Acura;Model:Integra;

Category = Color

What I really trying to develop is my own custom web service either by xml or by database calls using the cascadingDropDown.

-Doug Lubey of Louisiana

hi guys i am problems with the following questions.

I need to populate the cddDay where it takes two parameters from the other cascading drop downs

GetDayList ==> how should i modify the below code for this to work.

               TargetControlId="ddlMonth"

               LoadingText="[Loading Months...]"

               ServicePath="../LocationService.asmx"

               ServiceMethod="GetMonthList" Enabled="True" />

               TargetControlId="ddlYear"

               LoadingText="[Loading Year...]"

               ServicePath="../LocationService.asmx"

               ServiceMethod="GetYearList" Enabled="True" />

               TargetControlId="ddlDay"

               LoadingText="[Loading Year...]"

               ServicePath="../LocationService.asmx"

               ServiceMethod="GetDayList" Enabled="True" />

Joe:

Why there is no EnablePageMethods=True for  ScriptManager control. Can we call a page method from client script without this property set to True?

Thanks

John Jiang

cool vedio

It is simple and good

Nice tutorial. Thanks!! I encounter an issue. If select a value with "/"(e.g., VW/Audi)in the level 1 dropdown, the level 2 dropdown gets [method error 550] errors. Take out "/" then it works fine. Could anyone helps? Thanks in advance!!

Excellent video series. Thanks a lot

I just don't know if this could be more frustrating.  For 2 days now I've been fighting with this Method Error 500 error.

People just love developing in the web, and I guess this is why I'm stuck in winforms.  I could have done this in what... four lines of C# code?  

*sighs*  Guess griping about it doesn't get me anywhere.  Better get back to it.

i am not able to download this video..can anyone help me

below is working ccd sample of called from pagemethods

DEFAULT.ASPX

============

<%@ Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" 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">

">www.w3.org/.../xhtml">

   

Hi Guys,

In the video it you had to code for locking on the xml file. If this were a service that would be used by say a thousand users surely it would be locked all the time. Therefore not viable.

I only say this as I'm interested in using this functionality as part of a solution but, can't see why using an xml web service would be better than a call to the database.

Can you use this control with a database?

Cheers,

      Iain

hi...

Realy Nice.

You guys are doing gr8 work.

Keep it up.

Realy i appreciate it.

rajesh singh

Thanks!

Hi Joe,

First let me say I really appreciate all the work you have done on these videos.  I've learned pretty much everything I know about Ajax from them!

I am trying to implement some cascading drop down lists based on your example.  It was working fine until I added an item to my XML file that contains a forward slash (/) in the name property.  When I select that value from the drop down, it puts a Method error 500 in the next drop down in line.  I can change the / to \ or | and it works fine, so I'm sure the / is the culprit.

Any ideas on this one?  Thanks again for all your help!

Where is the video tutorial that references the security measure of authorizing events postback from server that was mentioned at the end of this tutorial video?

Is this tutorial in lesson #7?

Please select a Grade.[Method error 12031]  

Please select a Title[Method error 12031]

You have chosen [Method error 12031] [Method error 12031]. You may proceed

 So this is better than what i was getting earlier today.

:)

My CascadingDropDown List in not binded....its howing [Method error 405].

i just Note that web service is not called i am unable to trace the error why this is happening. i set break point in web service but control is not approaching web service. i confirmed that web service path is correct in CascadingDropDown and also methods name.....Can any body suggest the solution????

Does anyone know why the values I set for PromptValue and EmptyValue are not being initialized? When my PromptText or EmptyText is being displayed, my values are "" instead of the ones I definied in the cascading control

Hi Joe,

Is there any way the comment section could be sorted with the newest ones at the top?  It might help us get more replies.

I'm still looking for an answer to my question regarding the Method Error 500 I get if I have a forward slash (/) in a drop down list with the CascadingDropDown extender attached.

Thanks!

Yeah, placing the latest comments on the top is a great idea.

Hello, I am from China

formview + objectdatasource edit mode, can not be two-way binding, but only in Updating the formview, forced e.newValues set of values.

I would like to ask, there are other ways you

when i m trying to registred but they genrate error "user name already exist" plz send me step how to registred.

on my id msgtoirfan_12@yahoo.com.

asdcasfc

thank you very muach

i serach for it to use it in my web site

http://www.almny.com

and i will copy your lesson to it

thanks again

This is Wonderful Joe........

I m just wondering that..cant it be implemented into class. Means with database connectivity that dropdownlists get data from database. i tried myself but there was Method error 500 or 12031. so i need ur help in this regard ..can u tell me how to solve this. thanks JOE in advance and waiting for you response.

can any body tell me........how to build the same application with the database connectivity ...... if any body has idea do let me know... or email me in the same ID.......thanks in advance .... and waiting for response

can any body tell me........how to build the same application with the database connectivity ...... if any body has idea do let me know... or email me in the same ID.......thanks in advance .... and waiting for response

Thank you very much for this video. It all works just fine till I place in Formview. Under insert mode it works properly. The problem is under edit mode. What code can I add to your video that would enable the edit mode to work properly? I'm sure the error has to do with the binding of data on edit load. Just do not know what to do to correct this error.

Sir, I have create my own xml file. like in place of Make I have use Division And I want to build application. Please help me for the same.

Sir, I have create my own xml file. like in place of Make I have use Division And I want to build application. Please help me for the same.

Sir, I have create my own xml file. like in place of Make I have use Division And I want to build application. Please help me for the same. I have change the porperty of Dropdown as well services.vb file but its not working its quit urgent I will so thanks full if some one can help me.

hi may be this will help you to bind with database :

http://yasserzaid.wordpress.com/2009/01/03/ajax-cascading-dropdown-from-database/

hi may be this will help you to bind with database :

http://yasserzaid.wordpress.com/2009/01/03/ajax-cascading-dropdown-from-database/

For all those still getting a "Method error 500" (or 12031) here are some simple things to check:

*That your _Document.Load() method contains a valid MapPath

(i.e you didn't change the name of your xml file to something else and that it IS in the App_Data folder)

*That all of the CascadingDropDown controls use "CarsService.asmx" (or whatever your .asmx file is entitled) as their ServicePath, remember it's case sensitive!

*That you have filled in the right property fields!! If like me you are using Visual Studio and not Visual Web Developer you will get more property fields for the CascadingDropDown controls, one simple error I made was filling in the PromptValue field instead of PromptText, doh!

Question to experts i am totally new to asp.net, i want to learn very badly this language. Where should i start it? any good books online or to buy by the shop. Has anybody any idea!!!!!!!

Excellent video. Thanks to Joe.

How you have added code snippet in toolbox..

dave 12345,

brilliant stuff mate! I could pull off my hair until I was blue and could not find the error. It was of course in spelling of the _Document.Load()

Excelletn video Joe! You're the star!

Stan

Joe...Thank you very much for this great video...great to see this feature..

I am trying to stress test the web service that returns the CascadingDropDownNameValue collection. I noticed that using the proxy (net 2.0) class. The request payload is an xml document. The web method returns an empty payload.

If you use the ajax toolkit(client side), the request payload is a JSON string. The web method returns the right values. When using the proxy or the test page (the asmx?op=MyMethod), the debugger does not event step into the web method. When using the web page (client side ajax), the debugger steps into the code ok. This behavior only takes place for the CascaidingDropDown web method. All other web methods work ok.

Has anybody been able to use the proxy to call this method?

The proxy works ok as well. The reference had not been updated with the latest web service definition.

Just a little thing that I noticed today.

If you are having ERROR 500... Do a Find & Replace of "Name" and replace with "name", and "Value" to "value". And believe it or not, this actually removed my error!

Just thought I would share that with everyone! (Although, I would have thought the DLL should have had a .ToLower() put on it!

Does anyone know how to make a drop down list auto select if there is only one value?

For example, if I have a car model that is only available in 1 colour how do I get the colours drop down list to recognise this and automatically select the only colour available.