[原]无刷新三级连动用户控件

因为最近做的项目需要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>&nbsp;&nbsp;
 4<asp:DropDownList ID="ddl2" runat="server">
 5<asp:ListItem Text="请选择" Value="0"></asp:ListItem>
 6</asp:DropDownList>&nbsp;&nbsp;
 7<asp:DropDownList ID="ddl3" runat="server">
 8<asp:ListItem Text="请选择" Value="0"></asp:ListItem>
 9</asp:DropDownList>&nbsp;&nbsp;<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的页面类后，老报错该注册类“未定义”的错！