CascadingDropDown ( AjaxControlToolkit ) and PageMethods

 

When i looked cascading dropdowns of AjaxControlToolkit at first i confused so i gave up and wrote my own client scripts. But i found a very easy example in my code sample archive, so here it is.

What i need is 2 pagemethod for populate dropdown items and 1 ( or 2 ) for get values from them. Values in dropdownlists are type of “CascadingDropDownNameValue” . It needs name and value.

In client side scriptmanager “EnablePageMethods” attribute should set true. Extender codes are below :

<ajaxToolkit:CascadingDropDown runat="server" ID="cdd1" TargetControlID="ddl1" PromptText="Select Type" Category="type" LoadingText="[Loading]"     ServiceMethod="GetType" /> <ajaxToolkit:CascadingDropDown runat="server" ID="cdd2" TargetControlID="ddl2" ParentControlID="ddl1"     PromptText="Select Content" Category="content"     LoadingText="[Loading]" ServiceMethod="GetContent" />

Attributes are describe themselves. So there are two dropdownlist (ddl1,ddl2) and two PageMethods (“GetType”,”GetContent”) needed.

My aim is populate BlogengineNet’s categories or posts in sub dropdownlist. “CascadingDropDownNameValue[]” is need to returned.

using System.Web.Services; using AjaxControlToolkit;

 

[WebMethod]     [System.Web.Script.Services.ScriptMethod]     public staticCascadingDropDownNameValue[]            GetType(stringknownCategoryValues, stringcategory)     {             return new[] {         newCascadingDropDownNameValue("category", "category"),         newCascadingDropDownNameValue("post", "post") };       }     [WebMethod]     [System.Web.Script.Services.ScriptMethod]     public staticCascadingDropDownNameValue[]            GetContent(stringknownCategoryValues, stringcategory)     {             if(knownCategoryValues.Contains("category"))             {                 return(BlogEngine.Core.Category.Categories                       .Select(c =>                           newCascadingDropDownNameValue                          { value = c.Id.ToString(), name = c.Title }).ToArray());             }             else if(knownCategoryValues.Contains("post"))             {                 return(BlogEngine.Core.Post.Posts                       .Select(c =>                           newCascadingDropDownNameValue                          { value = c.Id.ToString(), name = c.Title }).ToArray());             }     }

How values populated are below.

 

Finally, how are we going to take values? I used a client script which communicate with another pagemethod. In client side, dropdowns “onchange” event:

<asp:DropDownList runat="server" ID="ddl1" onchange="GetSubDDLContent(this.options[this.selectedIndex].value ,this.options[this.selectedIndex].text,'1')" Width="200" /> <asp:DropDownList runat="server" ID="ddl2" onchange="GetSubDDLContent(this.options[this.selectedIndex].value ,this.options[this.selectedIndex].text,'2')" Width="200" />

GetSubDDLContent takes 3 params (third one is non smart identifier for which dropdown sent to value).

Client side:

<scripttype="text/javascript">              functionGetSubDDLContent(id, title, controlid) {            var param = newArray();            param[0] = id;            param[1] = title;            param[2] = controlid;            PageMethods.GetSubDDLContent(param,      OnSubRequestComplete, OnError);        }        function OnSubRequestComplete(result) { //do something        }        function OnError(result) {     //do something              }              </script>

On Server Side GetSubDDLContent pagemethod: ( return type is not important )

[WebMethod()] [System.Web.Script.Services.ScriptMethod()] public static Boolean GetSubDDLContent(IList values) { if (values[2].ToString() == "1") { //first dropdown sent } else if (values[2].ToString() == "2") { //second dropdown sent } return true; }

At the end cascadingdropdowns work with pagemethods…