altas(ajax)控件(六)：CascadingDropDown 联动选择的下拉框

CascadingDropDown我个人感觉有几个规则：

1.    需要配合xml

2.    需要配合两个方法：CascadingDropDown.ParseKnownCategoryValuesString和CascadingDropDown.QuerySimpleCascadingDropDownDocument

3.    似乎需要配合WebService

 

希望有人指出错误之处。

 

联动选择的下拉框最多的应用我想应该是地区的选择吧，估计每个web程序员都碰到过，下面来看atlas的解决方案：

 

前端代码Default.aspx：

 

  <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
   <div class="demoarea">
        <div class="demoheading">CascadingDropDown 联动选择的下拉框</div>
        <table>
            <tr>
                <td>国家</td>
                <td><asp:DropDownList ID="DropDownList1" runat="server" Width="170" /></td>
            </tr>
            <tr>
                <td>省份</td>
                <td><asp:DropDownList ID="DropDownList2" runat="server" Width="170" /></td>
            </tr>
            <tr>
                <td>城市</td>
                <td><asp:DropDownList ID="DropDownList3" runat="server" Width="170" AutoPostBack="true"
                    OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged" /></td>
            </tr>
        </table>
        
        <cc1:CascadingDropDown ID="CascadingDropDown1" runat="server" TargetControlID="DropDownList1"
            Category="Make" PromptText="Please select a make" LoadingText="[Loading makes...]"
            ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents" />
        <cc1:CascadingDropDown ID="CascadingDropDown2" runat="server" TargetControlID="DropDownList2"
            Category="Model" PromptText="Please select a model" LoadingText="[Loading models...]"
            ServiceMethod="GetDropDownContentsPageMethod" ParentControlID="DropDownList1" />
        <cc1:CascadingDropDown ID="CascadingDropDown3" runat="server" TargetControlID="DropDownList3"
            Category="Color" PromptText="Please select a color" LoadingText="[Loading colors...]"
            ServicePath="CarsService.asmx" ServiceMethod="GetDropDownContents"
            ParentControlID="DropDownList2" />
      
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" RenderMode="inline">
            <ContentTemplate>
                <asp:Label ID="Label1" runat="server" Text="[您还没有选择]" />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="DropDownList3" EventName="SelectedIndexChanged" />
            </Triggers>
        </asp:UpdatePanel>
    </div>
</form>

 

 

Default.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;
using System.Web.Services;
using AjaxControlToolkit;
 
public partial class _Default : System.Web.UI.Page 

 

 

 

 

 

数据：

<?xml version="1.0" encoding="utf-8" ?>
<CarsService>
 <make name="中国">
    <model name="浙江">
      <color name="杭州" />
      <color name="宁波" />
      <color name="金华" />
    </model>
    <model name="江苏">
      <color name="南京" />
      <color name="苏州" />
    </model>
    <model name="福建">
      <color name="福州" />
      <color name="厦门" />
    </model>
 </make>
 <make name="美国" >
    <model name="A4">
     <color name="Azure" />
      <color name="Light Azure"/>
      <color name="Dark Azure" />
    </model>
    <model name="S4" value="S4 (value)">
      <color name="Silver" value="Silver (value)" />
      <color name="Metallic" value="Metallic (value)" />
    </model>
    <model name="A6" value="A6 (value)">
      <color name="Cyan" value="Cyan (value)" />
    </model>
 </make>
 <make name="韩国" >
    <model name="3 series" value="3 series (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="5 series" value="5 series (value)">
      <color name="Yellow" value="Yellow (value)" />
      <color name="Banana" value="Banana (value)" />
    </model>
    <model name="7 series" value="7 series (value)">
      <color name="Brown" value="Brown (value)" />
    </model>
 </make>
</CarsService>
 

 

 

 

 

 

 

WebService代码：

 

// (c) Copyright Microsoft Corporation.
// This source is subject to the Microsoft Permissive License.
// See http://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx.
// All other rights reserved.
 
 
using System;
using System.Collections.Specialized;
using System.Web;
using System.Web.Services;
using System.Xml;
 

效果如下：