因为最近做的项目需要3级联动显示分类，同时分类又有几种不同类型，如产品类型、公司类型等，出于提高代码的重用性考虑，参考网上代码特将3级联动做成用户控件！
实现效果说明：
1、用户控件的特性——使用和重用简单，通过简单的设置一个属性，就可实现不同类型种类的联动；
2、废话下，无刷新获取子类；
使用技术的选择：
1、AjaxPro的ajax框架
不是我不想用微软的asp.net ajax框架来实现，只是据说udatePanel是一种局部显示、但仍然是整页回传到局部更新，另外微软的ajax每个页面，都必须要一个scriptmanager，麻烦了点，最主要的是本人项目不是soa的，所以客户端调用服务的方法都是页面方法，而不是Service method，于是先天上早已决定了，不能使用AjaxControlToolkit现成的联动控件CascadingDropDown，如果你的项目是soa的你可以选择CascadingDropDown；由于以上原因，选择了相对“原始”的Ajax框架AjaxPro.2（2.0版本），不过使用很简单
2、给用户控件增加属性
给用户控件添加属性
1
//标记不同类型的类别
2public string Type
3 
{
4
set {ViewState["type"]=value;}
5 get { return ViewState["type"].ToString(); }
6
7
}
8
9//提供对下拉框1的选择值到访问
10 public string selValue1
11 {
12 get { return hdf1.Value; }
13
14 }
15
16//提供对下拉框2的选择值到访问
17 public string selValue2
18 {
19
20 get { return hdf2.Value; }
21
22 }
23
24//提供对下拉框3的选择值到访问
25 public string selValue3
26 {
27 get { return hdf3.Value; }
28
29 }
废话不多说，具体实现见代码：
用户控件的cs
1using System;
2using System.Data;
3using System.Configuration;
4using System.Collections;
5using System.Web;
6using System.Web.Security;
7using System.Web.UI;
8using System.Web.UI.WebControls;
9using System.Web.UI.WebControls.WebParts;
10using System.Web.UI.HtmlControls;
11
12
13public partial class controls_ThreeLevelDropdownList : System.Web.UI.UserControl
14{
15
16 public string Type
17 {
18 set {ViewState["type"]=value;}
19 get { return ViewState["type"].ToString(); }
20
21
}
22 public string selValue1
23 {
24 get { return hdf1.Value; }
25
26 }
27 public string selValue2
28 {
29
30 get { return hdf2.Value; }
31
32 }
33 public string selValue3
34 {
35 get { return hdf3.Value; }
36
37 }
38
39
40 protected void Page_Load(object sender, EventArgs e)
41 {
42
43 if (!IsPostBack)
44 {
45 AjaxPro.Utility.RegisterTypeForAjax(typeof(controls_ThreeLevelDropdownList)); //必要的
46
47 ddl1.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'" + ddl2.ClientID + "','" + Type + "');selectValue(this.options[selectedIndex].value,'" + hdf1.ClientID + "');");
48 ddl2.Attributes.Add("onchange", "showNext(this.options[selectedIndex].value,'" + ddl3.ClientID + "','" + Type + "');selectValue(this.options[selectedIndex].value,'" + hdf2.ClientID + "');");
49 ddl3.Attributes.Add("onchange", "selectValue(this.options[selectedIndex].value,'"+hdf3.ClientID+"');");
50
51 ddl1.Items.Add(new ListItem("请选择","0"));
52 DataSet ds = GetLevelList("0", Type);
53
54 if (ds != null && ds.Tables[0].Rows.Count > 0)
55 {
56 foreach(DataRow dr in ds.Tables[0].Rows)
57 {
58 ddl1.Items.Add(new ListItem(dr["txt"].ToString(), dr["val"].ToString()));
59 }
60
61 }
62 ddl1.SelectedValue = "0";
63 }
64 }
65
66 [AjaxPro.AjaxMethod]
67 public DataSet GetLevelList(string parentId,string type)
68 {
69 return new Dao.CategoryDao().getListDs(type, parentId);
70
71 }
72}
73
用户控件的aspx
1<%@ Control Language="C#" AutoEventWireup="true" CodeFile="ThreeLevelDropdownList.ascx.cs" Inherits="controls_ThreeLevelDropdownList" %>
2<asp:DropDownList ID="ddl1" runat="server">
3</asp:DropDownList>
4<asp:DropDownList ID="ddl2" runat="server">
5<asp:ListItem Text="请选择" Value="0"></asp:ListItem>
6</asp:DropDownList>
7<asp:DropDownList ID="ddl3" runat="server">
8<asp:ListItem Text="请选择" Value="0"></asp:ListItem>
9</asp:DropDownList> <br />
10
11<asp:HiddenField ID="hdf1" runat="server" /><asp:HiddenField ID="hdf2" runat="server" /><asp:HiddenField ID="hdf3" runat="server" />
12<script type="text/javascript" language="javascript">
13<!--
14 //常用JS函数
15 function getBid(s){
16 return document.getElementById(s);
17 }
18 function getBmc(s){
19 return document.getElementByName(s);
20 }
21
22 //显示分类列表
23 function showNext(sid,obj,type)
24 {
25 if(sid==null || sid=="" || sid.length<1)return;
26 var slt =getBid(obj);
27 var v = controls_ThreeLevelDropdownList.GetLevelList(sid,type).value; // 类的名称
28
29
30 if (v != null){
31 if(v != null && typeof(v) == "object" && v.Tables != null)
32 {
33 slt.length = 0;
34 slt.options.add(new Option("请选择",0));
35 //加了个“请选择”主要为了触发onchange事件
36 if(obj=="ddl2"){
37 getBid("ddl3").options.length=0;
38 getBid("ddl3").options.add(new Option("请选择",0));
39 }
40 for(var i=0; i<v.Tables[0].Rows.length; i++)
41 {
42 var txt = v.Tables[0].Rows[i].txt; //这个地方需要注意区分大小写
43 var val = v.Tables[0].Rows[i].val; //跟dataset表的列名称要一致
44 slt.options.add(new Option(txt,val));
45 }
46 }
47 }
48 return;
49 }
50
51 //保留Select中选择的值
52 function selectValue(sid,obHdf)
53 {
54 getBid(obHdf).value=sid;
55 //alert(getBid(obHdf).value);
56 }
57 -->
58</script>
59
1<%@ Register TagPrefix="uc1" TagName="ThreeLevelDropdownList" Src="http://www.cnblogs.com/controls/ThreeLevelDropdownList.ascx" %>
2<%@ Page Language="C#" AutoEventWireup="true" CodeFile="JobList.aspx.cs" Inherits="Manager_Job_JobList" %>
3
4<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
5
6<html xmlns="http://www.w3.org/1999/xhtml" >
7<head runat="server">
8 <title>无标题页</title>
9</head>
10<body>
11 <form id="form1" runat="server">
12 <div>
13 所在地区<uc1:ThreeLevelDropdownList id="threeLevelDDL1" runat="server" ></uc1:ThreeLevelDropdownList><br />
14 工作类型<uc1:ThreeLevelDropdownList id="threeLevelDDL2" runat="server" ></uc1:ThreeLevelDropdownList><br /><br />
15 <asp:Button ID="Button1" runat="server" Text="Button" />
16 </div>
17 </form>
18</body>
19</html>
调用实例cs
1using System;
2using System.Data;
3using System.Configuration;
4using System.Collections;
5using System.Web;
6using System.Web.Security;
7using System.Web.UI;
8using System.Web.UI.WebControls;
9using System.Web.UI.WebControls.WebParts;
10using System.Web.UI.HtmlControls;
11
12public partial class Manager_Job_JobList : System.Web.UI.Page
13{
14
15 protected void Page_Load(object sender, EventArgs e)
16 {
17
18 if (!IsPostBack)
19 {
20 /**//*3级连动初始化*/
21 //1 供求信息 2人才招聘 3地区
22 threeLevelDDL1.Type = "3";
23 threeLevelDDL2.Type = "2";
24 /**//*3级连动初始化*/
25
26
27
28 /**//*=========================获取选择值 服务端方法 =========================================*/
29 // string type1=threeLevelDDL1.selValue1;
30 // string type2 = threeLevelDDL1.selValue2;
31 // string type3 = threeLevelDDL1.selValue3;
32 /**//*========================================================================================*/
33
34
35 /**//*========================获取选择值 客户端方法======================================*/
36
37 //用户控件id+"_"+hdf1 =hdf1的clientId 保存的是第一级下拉的值，其他类推
38 //
39 /**//*====================================================================================== */
40 }
41 }
42}
43
附加说明
AjaxPro的Web.config的配置
增加
<System.Web>
<httpHandlers>
<add verb="POST,GET" path="ajaxpro/*.ashx" type="AjaxPro.AjaxHandlerFactory, AjaxPro.2"/>
</httpHandlers>
</System.Web>
题外话
AjaxPro下的Ajax框架，解决了之前在Ajax.dll中常出现的注册应用ajax的页面类后，老报错该注册类“未定义”的错！
