<%@ Page
    Language="C#"
    MasterPageFile="~/DefaultMaster.master"
    Title="Using the CascadingDropDown with a Database" %>
<%@ Register
    Assembly="AjaxControlToolkit"
    Namespace="AjaxControlToolkit"
    TagPrefix="ajaxToolkit" %>
<asp:Content ContentPlaceHolderID="SampleContent" Runat="Server">
    <ajaxToolkit:ToolkitScriptManager runat="Server" ID="ScriptManager1" />
    <div class="walkthrough">
        <div class="heading">Using CascadingDropDown with a Database</div>
        <p>
            The sample that ships with the Toolkit uses the CascadingDropDown with an XML data
            store. A common question is how to use it with a database. This walkthrough
            will demonstrate that.</p>
        <p>
            </p>
        <p>
            First, create a new ASP.NET AJAX Website, and add a reference to the toolkit assembly.
            You'll find the assembly (called AjaxControlToolkit.dll) in the "AjaxControlToolkit\bin"
            directory where you installed the toolkit.<br />
            <br />
            In the default.aspx page and add some dropdowns to it:<br />
        </p>
        <code>
        
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span><span style="color: blue">&lt;</span><span
                    style="color: maroon">div</span><span style="color: blue">&gt;<?xml namespace=""
                        ns="urn:schemas-microsoft-com:office:office" prefix="o" ?><?xml namespace="" prefix="o" ?></span></span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span>Make: <span style="color: blue">&lt;</span><span
                    style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">DropDownList</span>
                <span style="color: red">ID</span><span style="color: blue">="ddlMake"<br />
                </span> <span
                    style="color: red">  runat</span><span style="color: blue">="server"/&gt;&lt;</span><span
                        style="color: maroon">br</span><span style="color: blue">/&gt;</span></span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span>Model: <span style="color: blue">&lt;</span><span
                    style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">DropDownList</span>
                <span style="color: red">ID</span><span style="color: blue">="ddlModel"<br />
                </span><span
                    style="color: red">  runat</span><span style="color: blue">="server"/&gt;&lt;</span><span
                        style="color: maroon">br</span><span style="color: blue">/&gt;</span></span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span>Color: <span style="color: blue">&lt;</span><span
                    style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">DropDownList</span>
                <span style="color: red">ID</span><span style="color: blue">="ddlColor"<br />
                      </span> <span
                    style="color: red">runat</span><span style="color: blue">="server"/&gt;</span><span
                        style="">      </span>
                
            </span>
        
        
        <br />
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span><span style="color: blue">&lt;</span><span
                    style="color: maroon">br</span> <span style="color: blue">/&gt;</span><span style="">
                            </span>
                
            </span>
        <br />
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span><span style="color: blue">&lt;</span><span
                    style="color: maroon">asp</span><span style="color: blue">:</span><span style="color: maroon">Button</span>
                <span style="color: red">ID</span><span style="color: blue">="Button1"<br />
                      </span> <span
                    style="color: red">runat</span><span style="color: blue">="server"</span> <span style="color: red">
                        Text</span><span style="color: blue">="Submit"</span> <span style="color: blue">/&gt;</span></span>
        <br />
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span><span style="color: blue">&lt;/</span><span
                    style="color: maroon">div</span><span style="color: blue">&gt;</span></span>
                    </code>
        Now, at the top of your ASPX page, register a prefix for the reference to the toolkit:<br />
        <code>
            <span style="font-size: 10pt; background: yellow; font-family: 'Courier New';">&lt;%</span><span style="font-size: 10pt; color: blue; font-family: 'Courier New';
                    ">@</span><span style="font-size: 10pt; font-family: 'Courier New';
                        "> <span style="color: maroon">Register<br />
                        </span> <span style="color: red"> 
                            Assembly</span><span style="color: blue">="AjaxControlToolkit"</span> <span style="color: red"><br />
                                 
                                Namespace</span><span style="color: blue">="AjaxControlToolkit"</span><br />
                        <span style="color: red">  TagPrefix</span><span style="color: blue">="ajaxToolkit"</span>                    
                        <span style="background: yellow;">%&gt;</span></span></code>
        And then add the extender itself:<br />
        <code>
            <span style="font-size: 10pt; color: blue; font-family: 'Courier New'; ">
                &lt;</span><span style="font-size: 10pt; color: maroon; font-family: 'Courier New';
                    ">ajaxToolkit</span><span style="font-size: 10pt; color: blue;
                        font-family: 'Courier New'; ">:</span><span style="font-size: 10pt;
                            color: maroon; font-family: 'Courier New'; ">CascadingDropDown<br />
                        </span><span
                                style="font-size: 10pt; font-family: 'Courier New'; "> <span style="color: red">
                                    ID</span><span style="color: blue">="CascadingDropDown1"<br />
                                    </span> <span style="color: red">
                                        runat</span><span style="color: blue">="server"/&gt;</span></span><span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style="">   </span>
                
            </span>
        </code>
        At runtime, the extender will make callbacks to a web service we specify (which
            is decorated with the <strong>System.Web.Script.Services.ScriptService</strong> attribute).
        In that web service, it expects a WebMethod with the following signature (<strong><font
            color="#ff0000"><em>note that parameter names must match too</em></font></strong>!):<br />
        <code>
            <span style="font-size: 10pt; font-family: 'Courier New'; ">[<span
                style="color: teal">WebMethod</span>]</span>
        <br />
            <span style="font-size: 10pt; color: blue; font-family: 'Courier New'; ">
                public</span><span style="font-size: 10pt; font-family: 'Courier New'; ">
                    <span style="color: teal">CascadingDropDownNameValue</span>[] GetColorsForModel(<br />
                      </span><span
                        style="font-size: 10pt; color: blue; font-family: 'Courier New'; ;
                          
                        ">string</span><span style="font-size: 10pt; font-family: 'Courier New';
                            ;  
                             "> <strong>knownCategoryValues</strong>,<br />
                             
                            <span style="color: blue">string</span> <strong>category</strong>)<span style=""><br />
                            </span></span>
                            </code>
            The <strong>knownCategoryValues</strong> parameter will return a string containing
            the currently selected category values, as well as the category to retrieve values
            for. For example, if the extender is populating the "Color" field, you will
            be passed the values for the "Make" and "Model" fields, as well as "Color" to specify
            the field to return values for.<br />
            <br />
            The CascadingDropDown class has a helper method for unpacking the category values:
        <code>
            <span style="font-size: 10pt; color: teal; font-family: 'Courier New'; ">
                StringDictionary</span><span style="font-size: 10pt; font-family: 'Courier New';
                    "> kv = <span style="color: teal">CascadingDropDown</span><br />
                     .ParseKnownCategoryValuesString(knownCategoryValues);</span></code>
        <p  style=" ">
            This method will return a StringDictionary containing the name/value pairs of the
            currently selected values. So imagine you've got a database with tables for
            the Make (manufacturer), Model, and Color information, and you're accessing that
            database through a DataSet to which you've added methods for getting each set of
            values.<br />
            <br />
            The web method to get the available colors for a given model would look like this:</p>
        <code>
            <span style="font-size: 10pt; font-family: 'Courier New'; ">[<span
                style="color: teal">WebMethod</span>]</span><br />
            <span style="font-size: 10pt; color: blue; font-family: 'Courier New'; ">
                public</span><span style="font-size: 10pt; font-family: 'Courier New'; ">
                    <span style="color: teal">CascadingDropDownNameValue</span>[] GetColorsForModel(</span><br />
            <span style="font-size: 10pt; color: blue; font-family: 'Courier New'; ">
                string</span><span style="font-size: 10pt; font-family: 'Courier New'; ">
                    knownCategoryValues,<br />
                     <span style="color: blue">string</span> category)<br />
                    {</span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; ">
                
                </span>
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span><span style="color: teal">StringDictionary</span>
                kv =<br />
                  <span
                    style="color: teal"><span> CascadingDropDown</span></span>.ParseKnownCategoryValuesString(<br />
                  knownCategoryValues);</span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; ">
                
                 
                <br />
            </span>
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span><span style="color: blue"> int</span>
                modelId;</span><br />
            <span style="font-size: 10pt; font-family: 'Courier New'; ">
                
                 </span>
            <span style="font-size: 10pt; font-family: 'Courier New'; "><span
                style=""> </span><span style="color: blue">if</span>
                (!kv.ContainsKey(<span style="color: maroon">"Model"</span>) ||<br />
                   !<span style="color: teal">Int32</span>.TryParse(kv[<span