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);
    }
}
 
 

效果如下：