Trek Innovations

AJAX Cascading Dropdown Component using WCF

1. Create new Asp.Net Website

2. Add new item for XML file with the name LaptopsService.xml (Data source for DropdownList Items)

<?xml version=“1.0“ encoding=“utf-8“ ?>

<LaptopsService>

<make name=“Dell“>

<model name=“Inspiron 1111“>

<color name=“Green“ />

<color name=“Sea Green“ />

<color name=“Pale Green“ />

</model>

<model name=“Inspiron 2222“>

<color name=“Red“ />

<color name=“Bright Red“ />

</model>

<model name=“Inspiron 3333“>

<color name=“Teal“ />

<color name=“Dark Teal“ />

</model>

</make>

<make name=“Sony“ value=“Sony (value)“>

<model name=“Sony 1111“ value=“Sony 1111 (value)“>

<color name=“Azure“ value=“Azure (value)“ />

<color name=“Light Azure“ value=“Light Azure (value)“ />

<color name=“Dark Azure“ value=“Dark Azure (value)“ />

</model>

<model name=“Sony 2222“ value=“Sony 2222 (value)“>

<color name=“Silver“ value=“Silver (value)“ />

<color name=“Metallic“ value=“Metallic (value)“ />

</model>

<model name=“Sony 3333“ value=“Sony 3333(value)“>

<color name=“Cyan“ value=“Cyan (value)“ />

</model>

</make>

<make name=“IBM“ value=“IBM (value)“>

<model name=“IBM 1111“ value=“IBM 1111 (value)“>

<color name=“Blue“ value=“Blue (value)“ />

<color name=“Sky Blue“ value=“Sky Blue (value)“ />

<color name=“Racing Blue“ value=“Racing Blue (value)“ />

</model>

<model name=“IBM 2222“ value=“IBM 2222 (value)“>

<color name=“Yellow“ value=“Yellow (value)“ />

<color name=“Banana“ value=“Banana (value)“ />

</model>

<model name=“IBM 3333“ value=“IBM 3333 (value)“>

<color name=“Brown“ value=“Brown (value)“ />

</model>

</make>

</LaptopsService>

3. Add new item for AJAX-enabled WCF Service with the name Service1.svc and write the following source code

public class Service1

{

private static XmlDocument XMLDoc;

private static object LockXMLDoc = new object();

// Read XML file

public static XmlDocument Document

{

get

{

lock (LockXMLDoc)

{

if (XMLDoc == null)

{

XMLDoc = new XmlDocument();

XMLDoc.Load(HttpContext.Current.Server.MapPath(“~/App_Data/LaptopsService.xml”));

}

}

return XMLDoc;

}

}

// Hierarchy for XML elements

public static string[] Hierarchy

{

get

{

return new string[] { “make”, “model” };

}

}

[OperationContract]

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

{

// Get a dictionary of known category/value pairs

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

// Perform a simple query against the data document

return AjaxControlToolkit.CascadingDropDown.QuerySimpleCascadingDropDownDocument(Document, Hierarchy, knownCategoryValuesDictionary, category);

}

}

4. Drag and drop the following components and design the following at Default.aspx

1. Script Manager from AJAX Extensions tab in toolbox

2. Update Panel from AJAX Extensions tab in toolbox

3. Three DropDownList controls from Standard tab in toolbox and drop into Update Panel and Enable Autopostback for the 3^rd DropDownList

4. Label control from Standard tab in toolbox and drop into Update Panel

5. Three Cascading Dropdown controls from AJAX Toolkit and drop into Update Panel

5. Set the following properties to the CasecadingDropDown controls

CascadingDropDown1

TargetControlID=DropDownList1

Category=Make

PromptText=Plese Select a Laptop Make

ServiceMethod=GetDropDownContents

ServicePath=Service1.svc

CascadingDropDown2

TargetControlID=DropDownList2

Category=Model

ParentControlID=DropDownList1

PromptText=Please Select a model

ServiceMethod=GetDropDownContentsPageMethod

CascadingDropDown3

TargetControlID=DropDownList3

Category=Color

ParentControlID=DropDownList2

PromptText=Please Select a color

ServiceMethod=GetDropDownContents

ServicePath=Service1.svc

6. Write the following code in Default.aspx.cs

using System.Web.Services;

using AjaxControlToolkit;

[WebMethod]

[System.Web.Script.Services.ScriptMethod]

public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category)

{

return new Service1 ().GetDropDownContents(knownCategoryValues, category);

}

protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)

{

string make = DropDownList1.SelectedItem.Text;

string model = DropDownList2.SelectedItem.Text;

string color = DropDownList3.SelectedItem.Text;

if (string.IsNullOrEmpty(make))

{

Label1.Text = “Please select a make.”;

}

else if (string.IsNullOrEmpty(model))

{

Label1.Text = “Please select a model.”;

}

else if (string.IsNullOrEmpty(color))

{

Label1.Text = “Please select a color.”;

}

else

{

Label1.Text = string.Format(“You have chosen a {0} {1} {2}. Nice laptop!”, color, make, model);

}

}

7. When you run the code you can see the following output

8. When you select the first dropdown list then the rest of the drop downs will be populated with values. You can see the output below

1 comment