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

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

1. 需要配合xml

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

3. 似乎需要配合WebService

希望有人指出错误之处。

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

前端代码Default.aspx：

<formid="form1"runat="server">
<asp:ScriptManagerID="ScriptManager1"runat="server"/>
<divclass="demoarea">
<divclass="demoheading">CascadingDropDown联动选择的下拉框</div>
<table>
<tr>
<td>国家</td>
<td><asp:DropDownListID="DropDownList1"runat="server"Width="170"/></td>
</tr>
<tr>
<td>省份</td>
<td><asp:DropDownListID="DropDownList2"runat="server"Width="170"/></td>
</tr>
<tr>
<td>城市</td>
<td><asp:DropDownListID="DropDownList3"runat="server"Width="170"AutoPostBack="true"
OnSelectedIndexChanged="DropDownList3_SelectedIndexChanged"/></td>
</tr>
</table>

<cc1:CascadingDropDownID="CascadingDropDown1"runat="server"TargetControlID="DropDownList1"
Category="Make"PromptText="Pleaseselectamake"LoadingText="[Loadingmakes...]"
ServicePath="CarsService.asmx"ServiceMethod="GetDropDownContents"/>
<cc1:CascadingDropDownID="CascadingDropDown2"runat="server"TargetControlID="DropDownList2"
Category="Model"PromptText="Pleaseselectamodel"LoadingText="[Loadingmodels...]"
ServiceMethod="GetDropDownContentsPageMethod"ParentControlID="DropDownList1"/>
<cc1:CascadingDropDownID="CascadingDropDown3"runat="server"TargetControlID="DropDownList3"
Category="Color"PromptText="Pleaseselectacolor"LoadingText="[Loadingcolors...]"
ServicePath="CarsService.asmx"ServiceMethod="GetDropDownContents"
ParentControlID="DropDownList2"/>

<asp:UpdatePanelID="UpdatePanel1"runat="server"UpdateMode="Conditional"RenderMode="inline">
<ContentTemplate>
<asp:LabelID="Label1"runat="server"Text="[您还没有选择]"/>
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTriggerControlID="DropDownList3"EventName="SelectedIndexChanged"/>
</Triggers>
</asp:UpdatePanel>
</div>
</form>

Default.aspx.cs

usingSystem;
usingSystem.Data;
usingSystem.Configuration;
usingSystem.Web;
usingSystem.Web.Security;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.WebControls.WebParts;
usingSystem.Web.UI.HtmlControls;
usingSystem.Web.Services;
usingAjaxControlToolkit;

publicpartialclass_Default:System.Web.UI.Page
...{
protectedvoidPage_Load(objectsender,EventArgse)
...{

}
protectedvoidTextBox1_TextChanged(objectsender,EventArgse)
...{

}
protectedvoidButton1_Click(objectsender,EventArgse)
...{

}
protectedvoidDropDownList3_SelectedIndexChanged(objectsender,EventArgse)
...{
//Getselectedvalues
stringmake=DropDownList1.SelectedItem.Text;
stringmodel=DropDownList2.SelectedItem.Text;
stringcolor=DropDownList3.SelectedItem.Text;

//Outputresultstringbasedonwhichvaluesarespecified
if(string.IsNullOrEmpty(make))
...{
Label1.Text="Pleaseselectamake.";
}
elseif(string.IsNullOrEmpty(model))
...{
Label1.Text="Pleaseselectamodel.";
}
elseif(string.IsNullOrEmpty(color))
...{
Label1.Text="Pleaseselectacolor.";
}
else
...{
Label1.Text=string.Format("您选择的地区是{0}{1}{2}。",color,make,model);
}
}

[WebMethod]
[System.Web.Script.Services.ScriptMethod]
publicstaticCascadingDropDownNameValue[]GetDropDownContentsPageMethod(stringknownCategoryValues,stringcategory)
...{
returnnewCarsService().GetDropDownContents(knownCategoryValues,category);
}
}

数据：

<?xmlversion="1.0"encoding="utf-8"?>
<CarsService>
<makename="中国">
<modelname="浙江">
<colorname="杭州"/>
<colorname="宁波"/>
<colorname="金华"/>
</model>
<modelname="江苏">
<colorname="南京"/>
<colorname="苏州"/>
</model>
<modelname="福建">
<colorname="福州"/>
<colorname="厦门"/>
</model>
</make>
<makename="美国">
<modelname="A4">
<colorname="Azure"/>
<colorname="LightAzure"/>
<colorname="DarkAzure"/>
</model>
<modelname="S4"value="S4(value)">
<colorname="Silver"value="Silver(value)"/>
<colorname="Metallic"value="Metallic(value)"/>
</model>
<modelname="A6"value="A6(value)">
<colorname="Cyan"value="Cyan(value)"/>
</model>
</make>
<makename="韩国">
<modelname="3series"value="3series(value)">
<colorname="Blue"value="Blue(value)"/>
<colorname="SkyBlue"value="SkyBlue(value)"/>
<colorname="RacingBlue"value="RacingBlue(value)"/>
</model>
<modelname="5series"value="5series(value)">
<colorname="Yellow"value="Yellow(value)"/>
<colorname="Banana"value="Banana(value)"/>
</model>
<modelname="7series"value="7series(value)">
<colorname="Brown"value="Brown(value)"/>
</model>
</make>
</CarsService>

WebService代码：

//(c)CopyrightMicrosoftCorporation.
//ThissourceissubjecttotheMicrosoftPermissiveLicense.
//Seehttp://www.microsoft.com/resources/sharedsource/licensingbasics/sharedsourcelicenses.mspx.
//Allotherrightsreserved.


usingSystem;
usingSystem.Collections.Specialized;
usingSystem.Web;
usingSystem.Web.Services;
usingSystem.Xml;

/**////<summary>
///HelperwebserviceforCascadingDropDownsample
///</summary>
[WebService(Namespace="http://tempuri.org/")]
[WebServiceBinding(ConformsTo=WsiProfiles.BasicProfile1_1)]
[System.Web.Script.Services.ScriptService]
publicclassCarsService:WebService
...{
//Membervariables
privatestaticXmlDocument_document;
privatestaticobject_lock=newobject();

//wemakethesepublicstaticsjustsowecancallthemfromexternallyforthe
//pagemethodcall
publicstaticXmlDocumentDocument
...{
get
...{
lock(_lock)
...{
if(_document==null)
...{
//ReadXMLdatafromdisk