Microsoft AjaxToolkits 20. CascadingDropDown控件
CascadingDropDown控件用于级连下拉列表的选择，当没有选择第一级下接列表时，第二级是不可选的（从服务器获得数据然后再显示数据）。
属性列表：
TargetControlID:对应的下拉框表控件的ID
Category:当前下拉列表的类型
PromptText:当下拉列表中无数据或没有选择数据时给用户的提示
LoadingText:加载下拉列表数据时的提示
ServicePath:下拉列表获取数据所要的WEB服务路径
ServiceMethod:WEB服务方法
ParentControlID:控制此下拉列表控件的父级控件
SelectedValue:默认的选择值
常见问题和使用技巧
常见问题：在中了联动下拉列表组之后，页面的回送会引发服务器端掷出“Invalid
postback or callback argument”的异常，服务器端也无法取得每个下拉框表中的条目？
使用技巧：我们可以在web.config中加入<pages
enableEventValidation="true" />或者在当前页面注册<%@ Page Language="C#"
EnableEventValidation="false" %>这样会导至应该程序的安全性。
常见问题：如何设置联动下拉列表组中被选中的项目？
使用技巧：DropDownList1.SelectedValue="China";或者：
<ajaxToolkit:CascadingDropDown
ID="ccdCity" TargetControlID="ddlCity" Category="City" PromptText="请选择城市"
LoadingText="城市加载中..." ServicePath="CityService.asmx"
ServiceMethod="GetCitiesForProvince" ParentControlID="ddlProvince"
runat="server" SelectedValue="beijing" />
实例解析一、实现三级连动
1.前台UI
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1"
runat="server"></asp:ScriptManager>
</div>
<table>
<tr>
<td style="width: 100px">学校：</td>
<td style="width: 100px"><asp:DropDownList ID="DropDownList1"
runat="server"></asp:DropDownList></td>
<td style="width: 100px">
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown1" runat="server"
Category="schoolname"
LoadingText="正在加载学校" PromptText="请选择学校" ServiceMethod="GetSchool"
TargetControlID="DropDownList1" ServicePath="PersonDBservice.asmx">
</ajaxToolkit:CascadingDropDown>
</td>
</tr>
<tr>
<td style="width: 100px">部门：</td>
<td style="width: 100px"><asp:DropDownList ID="DropDownList2"
runat="server"></asp:DropDownList></td>
<td style="width: 100px">
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown2" runat="server"
Category="departname"
LoadingText="正在加载部门" PromptText="请选择部门" ServiceMethod="GetDepartsForSchool"
TargetControlID="DropDownList2" ServicePath="PersonDBservice.asmx">
</ajaxToolkit:CascadingDropDown>
</td>
</tr>
<tr>
<td style="width: 100px">成员</td>
<td style="width: 100px"><asp:DropDownList ID="DropDownList3"
runat="server" OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged"
AutoPostBack="true">
</asp:DropDownList></td>
<td style="width: 100px">
<ajaxToolkit:CascadingDropDown ID="CascadingDropDown3" runat="server"
Category="personname"
LoadingText="正在加载人员" PromptText="请选择人员" ServiceMethod="GetPersonsForDepart"
TargetControlID="DropDownList3" ServicePath="PersonDBservice.asmx">
</ajaxToolkit:CascadingDropDown>
</td>
</tr>
</table>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server" Text="Label"></asp:Label>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="DropDownList3"
EventName="SelectedIndexChanged" />
</Triggers>
</asp:UpdatePanel>
</form>
</body>
2.后台CS
protected
void DropDownList3_SelectedIndexChanged(object sender, EventArgs e)
{
string person = DropDownList1.SelectedItem.Text + "学校" +
DropDownList2.SelectedItem.Text + "部门的" + DropDownList3.SelectedItem.Text;
Label1.Text = person;
}
3.PersonDBservice.cs
WEB服务文件
using
System;
using
System.Web;
using
System.Collections;
using
System.Web.Services;
using
System.Web.Services.Protocols;
using
System.Data.SqlClient;
using
System.Collections.Specialized;
using
System.Collections.Generic;
using
System.Configuration;
using
System.Data;
using
AjaxControlToolkit;
///
<summary>
///
PersonDBservice 的摘要说明
///
</summary>
[WebService(Namespace
= "http://tempuri.org/")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
public
class PersonDBservice : System.Web.Services.WebService {
public PersonDBservice () {
//如果使用设计的组件，请取消注释以下行
//InitializeComponent();
}
[WebMethod]
public string HelloWorld() {
return "Hello World";
}
public DataTable getSchoolTable()
{
SqlConnection con = new
SqlConnection(ConfigurationManager.ConnectionStrings["SqlServerConStr"].ToString());
SqlDataAdapter sdr = new SqlDataAdapter("select schoolid,schoolname from
schoolinfo", con);
DataSet ds = new DataSet();
sdr.Fill(ds);
return ds.Tables[0];
}
public DataTable getDepartTable(int schoolid)
{
SqlConnection con = new
SqlConnection(ConfigurationManager.ConnectionStrings["SqlServerConStr"].ToString());
SqlDataAdapter sdr = new SqlDataAdapter("select departid,departname from
departinfo where schoolid="+schoolid.ToString(), con);
DataSet ds = new DataSet();
sdr.Fill(ds);
return ds.Tables[0];
}
public DataTable getSchoolTable(int departid)
{
SqlConnection con = new
SqlConnection(ConfigurationManager.ConnectionStrings["SqlServerConStr"].ToString());
SqlDataAdapter sdr = new SqlDataAdapter("select personid,personname from
personinfo where personid="+departid.ToString(), con);
DataSet ds = new DataSet();
sdr.Fill(ds);
return ds.Tables[0];
}
[WebMethod]
public CascadingDropDownNameValue[] GetSchool(string knownCategoryValue, string
category)
{
List<CascadingDropDownNameValue> values = new
List<CascadingDropDownNameValue>();
DataTable schools = getSchoolTable();
foreach (DataRow dr in schools.Rows)
{
string school = (string)dr["schoolname"];
int schoolid=(int)dr["schoolid"];
values.Add(new CascadingDropDownNameValue(school,schoolid.ToString()));
}
return values.ToArray();
}
[WebMethod]
public CascadingDropDownNameValue[] GetDepartsForSchool(string
knownCategoryValue, string category)
{
StringDictionary kv =
CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValue);
int schoolId;
if (!kv.ContainsKey("departname") || !Int32.TryParse(kv["departname"], out
schoolId))
{
return null;
}
DataTable departs = getDepartTable(schoolId);
List<CascadingDropDownNameValue> values = new
List<CascadingDropDownNameValue>();
foreach (DataRow dr in departs.Rows)
{
values.Add(new CascadingDropDownNameValue((string)dr["departname"],
dr["departid"].ToString()));
}
return values.ToArray();
}
[WebMethod]
public CascadingDropDownNameValue[] GetPersonsForDepart(string
knownCategoryValue, string category)
{
StringDictionary kv =
CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValue);
int departind;
if (!kv.ContainsKey("personname") || !Int32.TryParse(kv["personname"], out
departind))
{
return null;
}
DataTable persons = getDepartTable(departind);
List<CascadingDropDownNameValue> values = new
List<CascadingDropDownNameValue>();
foreach (DataRow dr in persons.Rows)
{
values.Add(new CascadingDropDownNameValue((string)dr["personname"],
dr["personid"].ToString()));
}
return values.ToArray();
}
}
实例解析二、实现静态三级连动
1.前台UI
<head
runat="server">
<title>CascadingDropDown Demo</title>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
</head>
<body>
<form id="form1" runat="server">
<asp:scriptmanager id="sm" runat="server"></asp:scriptmanager>
请选择您所在的城市：
<asp:DropDownList ID="ddlCountry"
runat="server"></asp:DropDownList>
<asp:DropDownList ID="ddlProvince"
runat="server"></asp:DropDownList>
<asp:DropDownList ID="ddlCity" runat="server"></asp:DropDownList>
<ajaxToolkit:CascadingDropDown ID="ccdCountry" TargetControlID="ddlCountry"
Category="Country"
PromptText="请选择国家" LoadingText="国家加载中..." ServicePath="CityService.asmx"
ServiceMethod="GetCountries"
runat="server" />
<ajaxToolkit:CascadingDropDown ID="ccdProvince" TargetControlID="ddlProvince"
Category="Province"
PromptText="请选择省份" LoadingText="省份加载中..." ServicePath="CityService.asmx"
ServiceMethod="GetProvincesForCountry"
ParentControlID="ddlCountry" runat="server" />
<ajaxToolkit:CascadingDropDown ID="ccdCity" TargetControlID="ddlCity"
Category="City"
PromptText="请选择城市" LoadingText="城市加载中..." ServicePath="CityService.asmx"
ServiceMethod="GetCitiesForProvince"
ParentControlID="ddlProvince" runat="server" />
</form>
</body
2.WEB服务
<%@
WebService Language="C#" class="CityService" %>
using
System;
using
System.Web;
using
System.Web.Services;
using
System.Web.Services.Protocols;
using
System.Collections.Generic;
using
System.Collections.Specialized;
using
AjaxControlToolkit;
[WebService(Namespace
= "http://www.dflying.net/")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]
public
class CityService : System.Web.Services.WebService
{
[WebMethod]
public CascadingDropDownNameValue[] GetCountries(string knownCategoryValues,
string category)
{
List<CascadingDropDownNameValue> countryList = new
List<CascadingDropDownNameValue>();
// 在真实程序中一般从数据库中读取，这里仅仅是模拟
countryList.Add(new CascadingDropDownNameValue("中国", "china"));
countryList.Add(new CascadingDropDownNameValue("其他", "other"));
return countryList.ToArray();
}
[WebMethod]
public CascadingDropDownNameValue[] GetProvincesForCountry(string
knownCategoryValues, string category)
{
StringDictionary kv =
CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
// 只模拟提供中国的省份
if (kv["Country"] != "china")
return null;
List<CascadingDropDownNameValue> provinceList = new
List<CascadingDropDownNameValue>();
provinceList.Add(new CascadingDropDownNameValue("辽宁", "liaoning"));
provinceList.Add(new CascadingDropDownNameValue("上海", "shanghai"));
provinceList.Add(new CascadingDropDownNameValue("北京", "beijing"));
return provinceList.ToArray();
}
[WebMethod]
public CascadingDropDownNameValue[] GetCitiesForProvince(string
knownCategoryValues, string category)
{
StringDictionary kv =
CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
// 只模拟提供辽宁省内的城市
if (kv["Province"] != "liaoning")
return null;
List<CascadingDropDownNameValue> cityList = new
List<CascadingDropDownNameValue>();
cityList.Add(new CascadingDropDownNameValue("沈阳", "shenyang"));
cityList.Add(new CascadingDropDownNameValue("大连", "dalian"));
return cityList.ToArray();
}
}
效果图：
实例解析、动态添加数据库
<script
type="text/javascript">
function
validateSkills(sender, args)
{
if (args.Value == "Input skills...")
{
args.IsValid = false;
}
}
</script>
<table style="width: 100%;">
<tr>
<td align="left" style="padding-left: 30px;"><asp:DropDownList
ID="ddlCountry" Runat="server" ></asp:DropDownList></td>
</tr>
<tr>
<td align="left" style="padding-left: 30px;"><asp:DropDownList
ID="ddlState" Runat="server"></asp:DropDownList></td>
</tr>
</table>
<ajaxToolkit:CascadingDropDown
ID="cddCountry" runat="server"
TargetControlID="ddlCountry"
Category="Country"
PromptText="Please Choose a Country"
LoadingText="Loading Countries..."
ServicePath="../LocationService.asmx"
ServiceMethod="GetCountries" />
<ajaxToolkit:CascadingDropDown
ID="cddCity" runat="server"
TargetControlID="ddlState"
Category="City"
PromptText="Please Choose a State"
LoadingText="Loading States..."
ServicePath="../LocationService.asmx"
ServiceMethod="GetStatesForCountry"
ParentControlID="ddlCountry" />
2.web服务
sing
System.Data;
using
System.Collections.Generic;
using
System.Collections.Specialized;
using
AjaxControlToolkit;
using
JobSiteStarterKit.DAL;
using
JobSiteStarterKit.BOL;
///
<summary>
///
Summary description for LocationService
///
</summary>
[WebService(Namespace
= "http://tempuri.org/")]
[WebServiceBinding(ConformsTo
= WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService()]
public
class LocationService : System.Web.Services.WebService
{
[WebMethod]
public CascadingDropDownNameValue[] GetCountries(string knownCategoryValues,
string category)
{
List<CascadingDropDownNameValue> countryList = new
List<CascadingDropDownNameValue>();
DataSet dsCountry = Country.GetCountries();
foreach (DataRow row in dsCountry.Tables[0].Rows)
{
countryList.Add(new CascadingDropDownNameValue(row["CountryName"].ToString(),
row["CountryID"].ToString()));
}
return countryList.ToArray();
}
[WebMethod]
public CascadingDropDownNameValue[] GetStatesForCountry(string
knownCategoryValues, string category)
{
StringDictionary kv =
CascadingDropDown.ParseKnownCategoryValuesString(knownCategoryValues);
List<CascadingDropDownNameValue> stateList = new List<CascadingDropDownNameValue>();
DataSet dsState = State.GetStates(int.Parse(kv["Country"]));
foreach (DataRow row in dsState.Tables[0].Rows)
{
stateList.Add(new CascadingDropDownNameValue(row["StateName"].ToString(),
row["StateID"].ToString()));
}
return stateList.ToArray();
}
}
