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>
<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);
}
}
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>
<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);
}
}
// 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);
}
}
效果如下: