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 
...{
    protected void Page_Load(object sender, EventArgs e)
    ...{
 
    }
    protected void TextBox1_TextChanged(object sender, EventArgs e)
    ...{
 
    }
    protected void Button1_Click(object sender, EventArgs e)
    ...{
 
    }
    protected void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)
    ...{
        // Get selected values
        string make = DropDownList1.SelectedItem.Text;
        string model = DropDownList2.SelectedItem.Text;
        string color = DropDownList3.SelectedItem.Text;
 
        // Output result string based on which values are specified
        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("您选择的地区是 {0} {1} {2}。", color, make, model);
        }
    }
 
    [WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static CascadingDropDownNameValue[] GetDropDownContentsPageMethod(string knownCategoryValues, string category)
    ...{
        return new CarsService().GetDropDownContents(knownCategoryValues, category);
    }
}
 

 

 

 

 

 

数据：

<?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;
 
/**//// <summary>
/// Helper web service for CascadingDropDown sample
/// </summary>
[WebService(Namespace = "http://tempuri.org/")]
[WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public class CarsService : WebService
...{
    // Member variables
    private static XmlDocument _document;    
    private static object _lock = new object();
 
    // we make these public statics just so we can call them from externally for the
    // page method call
    public static XmlDocument Document
    ...{
        get
        ...{
            lock (_lock)
            ...{
                if (_document == null)
                ...{
                    // Read XML data from disk
                    _document = new XmlDocument();
                    _document.Load(HttpContext.Current.Server.MapPath("~/App_Data/CarsService.xml"));
                }
            }
            return _document;
        }
    }
 
    public static string[] Hierarchy
    ...{
        get ...{ return new string[] ...{ "make", "model" }; }
    }
 
    /**//// <summary>
    /// Constructor to initialize members
    /// </summary>
    public CarsService()
    ...{
    }
        
    /**//// <summary>
    /// Helper web service method
    /// </summary>
    /// <param name="knownCategoryValues">private storage format string</param>
    /// <param name="category">category of DropDownList to populate</param>
    /// <returns>list of content items</returns>
    [WebMethod]
    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);
    }
}
 
 

效果如下：