一个简单的级联DropdownList自定义控件

效果：

避免了选择item时页面刷新或ajax延迟。

测试用的数据库脚本和数据：

create   table  tbl1
(
    CityID  int   primary   key   identity ( 1 , 1 ),
    CityName  nvarchar ( 50 )  not   null ,
)
go
create   table  tbl2
(
    AreaID  int   primary   key   identity ( 1 , 1 ),
    AreaName  nvarchar ( 50 )  not   null ,
    AreaCity  int   references  tbl1(CityID)
)
go
create   table  tbl3
(
    BuildingID     int   primary   key   identity ( 1 , 1 ),
    BuildingName  nvarchar ( 50 )  not   null ,
    BuildingArea  int   references  tbl2(AreaID)
)
go

insert   into  tbl1  values ( ' 淄博 ' )
insert   into  tbl1  values ( ' 青岛 ' )

insert   into  tbl2  values ( ' 张店 ' , 1 )
insert   into  tbl2  values ( ' 辛店 ' , 1 )
insert   into  tbl2  values ( ' 四方 ' , 2 )
insert   into  tbl2  values ( ' 市南 ' , 2 )

insert   into  tbl3  values ( ' Building1 ' , 1 )
insert   into  tbl3  values ( ' Building2 ' , 1 )
insert   into  tbl3  values ( ' Building3 ' , 1 )
insert   into  tbl3  values ( ' Building4 ' , 2 )
insert   into  tbl3  values ( ' Building5 ' , 3 )
insert   into  tbl3  values ( ' Building6 ' , 3 )
insert   into  tbl3  values ( ' Building7 ' , 4 )
insert   into  tbl3  values ( ' Building8 ' , 4 )

注意表间关系。

使用：

导入前缀
<%@ Register TagPrefix="cc1" Namespace="sss" Assembly="构架测试" %>
定义控件
<cc1:CascadeDropdownLists ID="myDropdown" Direction="Vertical" runat="server"  DropDownListStyle-BackColor="AliceBlue" DropDownListStyle-Width="160px"/>
数据绑定
  DataTable[] dts = new DataTable[] { new DataTable(), new DataTable() };
                SqlDataAdapter da = new SqlDataAdapter("select * from tbl1", constr);
                da.Fill(dts[0]);
                da.SelectCommand.CommandText = "select * from tbl2";
                da.Fill(dts[1]);

                myDropdown.DataSource = dts;
                myDropdown.DataBind();

原理就是每个datatable对应一个下拉列表，其中的记录对应下拉列表的选项。
通过客户端脚本根据各下拉列表间的关系控制那些选项显示，哪些不显示。
难点在于控件状态的保持。
实现了简单的样式控制。
优点在于速度快，显示效果好。
缺点是必须要用viewstate，否则无法取回提交数据。需要改进。 

 

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.ComponentModel;
using  System.Collections.Generic;
using  System.Collections.Specialized;

namespace  sss
... {
    [ToolboxData("<{0}:CascadeDropdownLists runat="server"></{0}:CascadeDropdownLists>")]
    public class CascadeDropdownLists : WebControl//, INamingContainer,IPostBackEventHandler, IPostBackDataHandler
    ...{
        Properties#region Properties

        /**//// <summary>
        /// 需要有2至三个字段，第一个字段是在下拉列表内唯一选项标识；第二个字段是选项文本，第三个字段是上级选项的标识
        /// </summary>
        [Browsable(true)]
        [Category("Data")]
        [Description("用于分别绑定各级下拉列表的DataTable数组")]
        public DataTable[] DataSource
        ...{
            get
            ...{
                return _dataSource;
            }

            set
            ...{
                _dataSource = value;
            }
        }

        [Browsable(true)]
        [Category("Appearance")]
        [Description("指定排列多个下拉列表的方向")]
        public RepeatDirection Direction
        ...{
            get
            ...{
                return ViewState["Direction"] == null ? RepeatDirection.Horizontal : (RepeatDirection)ViewState["Direction"];
            }

            set
            ...{
                ViewState["Direction"] = value;
            }
        }

        protected override HtmlTextWriterTag TagKey
        ...{
            get
            ...{
                return HtmlTextWriterTag.Table;
            }
        }

        [Browsable(false)]
        public string[] PostBackValues
        ...{
            get
            ...{
                string[] rval = new string[_dropDownLists.Count];
                for (int i = 0; i < _dropDownLists.Count; i++)
                ...{
                    rval[i] = _dropDownLists[i].SelectedValue;
                }
                return rval;
            }
        }

        [Browsable(false)]
        public int[] SelectedIndexs
        ...{
            get
            ...{
                int[] rval = new int[_dropDownLists.Count];
                for (int i = 0; i < _dropDownLists.Count; i++)
                ...{
                    rval[i] = _dropDownLists[i].SelectedIndex;
                }
                return rval;
            }
        }

        [Browsable(true)]
        [Category("Appearance")]
        [Description("指定排列多个下拉列表的方向")]
        [DesignerSerializationVisibility(DesignerSerializationVisibility.Content)]
        [TypeConverter(typeof(ExpandableObjectConverter))]
        [NotifyParentProperty(true)]
        public Style DropDownListStyle
        ...{
            get
            ...{
                return _dropDownListStyle;
            }
        }

        #endregion

        索引器#region 索引器

        public DropDownList this[int index]
        ...{
            get
            ...{
                return _dropDownLists[index];
            }
        }

        public DropDownList this[string name]
        ...{
            get
            ...{
                return this.FindControl(name) as DropDownList;
            }
        }

        #endregion

        Methods#region Methods

        public override void DataBind()
        ...{
            if (Direction == RepeatDirection.Horizontal)
            ...{
                Literal l = new Literal();
                l.Text = "<tr>";
                this.Controls.Add(l);
            }

            if (_dataSource != null && _dataSource.Length != 0)
            ...{
                Page.ClientScript.RegisterClientScriptBlock(typeof(CascadeDropdownLists), "refreshNext", refreshNext, true);
                Page.ClientScript.RegisterClientScriptBlock(typeof(CascadeDropdownLists), "refreshNextForPostBack", refreshNextForPostBack, true);
                Page.ClientScript.RegisterClientScriptBlock(typeof(CascadeDropdownLists), string.Concat("initCDDL", this.UniqueID), initCDDL, true);

                for (int i = 0; i < _dataSource.Length; i++)
                ...{
                    DataTable dt = _dataSource[i];
                    if (dt.Rows.Count == 0)
                    ...{
                        if (i == 0)
                        ...{   //如果第一个表就是空的
                            Literal l = new Literal();
                            l.Text = "<td></td>";
                            this.Controls.Add(l);
                        }
                        break;
                    }

                    Literal left = new Literal();
                    this.Controls.Add(left);
                    if (Direction == RepeatDirection.Horizontal)
                    ...{
                        left.Text = "<td>";
                    }
                    else
                    ...{
                        left.Text = "<tr><td>";
                    }

                    DropDownList ddl = new DropDownList();
                    ddl.ID = string.Concat("ddl_", i.ToString());
                    this.Controls.Add(ddl);
                    this._dropDownLists.Add(ddl);
                    ddl.ControlStyle.CopyFrom(_dropDownListStyle);

                    for (int j = 0; j < dt.Rows.Count; j++)
                    ...{
                        ListItem li = new ListItem();
                        li.Value = dt.Rows[j][0].ToString();
                        li.Text = dt.Rows[j][1].ToString();
                        if (i != 0)
                        ...{
                            li.Attributes["ParentPtr"] = dt.Rows[j][2].ToString();
                        }

                        ddl.Items.Add(li);
                    }

                    Literal right = new Literal();
                    this.Controls.Add(right);
                    if (Direction == RepeatDirection.Horizontal)
                    ...{
                        right.Text = "</td>";
                    }
                    else
                    ...{
                        right.Text = "</td></tr>";
                    }

                    Page.ClientScript.RegisterStartupScript(typeof(CascadeDropdownLists), i.ToString(), string.Concat(initCDDL_ref + "(document.getElementById('", ddl.ClientID, "'));"), true);
                    ddl.Attributes["onchange"] = refreshNext_ref + "(document.getElementById('" + ddl.ClientID + "'))";
                }
            }

            if (Direction == RepeatDirection.Horizontal)
            ...{
                Literal l = new Literal();
                l.Text = "</tr>";
                this.Controls.Add(l);
            }

            base.DataBind();
        }

        protected override void OnPreRender(EventArgs e)
        ...{
            if (this.Controls.Count == 0)
            ...{
                Literal l = new Literal();
                l.Text = "<td></td>";
                this.Controls.Add(l);
            }
            else
            ...{
                ViewState["DataSource"] = _dataSource;
                if (!Page.IsPostBack)
                ...{
                    Page.ClientScript.RegisterStartupScript(typeof(CascadeDropdownLists), this.ClientID, refreshNext_ref + "(document.getElementById('" + _dropDownLists[0].ClientID + "'));", true);
                }
                else
                ...{
                    Page.ClientScript.RegisterStartupScript(typeof(CascadeDropdownLists), this.ClientID, refreshNextForPostBack_ref + "(document.getElementById('" + _dropDownLists[0].ClientID + "'));", true);
                }
            }

            base.OnPreRender(e);
        }

        protected override void LoadViewState(object savedState)
        ...{
            base.LoadViewState(savedState);

            //回传状态还原
            _dataSource = ViewState["DataSource"] as DataTable[];
            DataBind();
        }

        #endregion

        Fields#region Fields

        private DataTable[] _dataSource;
        private List<DropDownList> _dropDownLists = new List<DropDownList>();
        private Style _dropDownListStyle = new Style();
        private static string initCDDL;
        private static string initCDDL_ref;
        private static string refreshNext;
        private static string refreshNext_ref;
        private static string refreshNextForPostBack_ref;
        private static string refreshNextForPostBack;

        #endregion
        
        static CascadeDropdownLists()
        ...{
            refreshNext_ref = string.Concat("zhyFunc_", typeof(CascadeDropdownLists).FullName.Replace('.', 'I'), "_refreshNext");
            initCDDL_ref = string.Concat("zhyFunc_", typeof(CascadeDropdownLists).FullName.Replace('.', 'I'), "_initCDDL");
            refreshNextForPostBack_ref = string.Concat("zhyFunc_", typeof(CascadeDropdownLists).FullName.Replace('.', 'I'), "_refreshNextForPostBack");

            refreshNext = string.Concat("function ", refreshNext_ref, @"(list)
            {
                var nextList;
                try
                {
                    var index = list.id.lastIndexOf('_');
                    var front = list.id.substring(0,index+1);
                    var count = list.id.substring(index+1);
                    var count2 = parseInt(count)+1;
                    nextList = document.getElementById(front + count2);
                    if(!nextList)
                    {
                        return;
                    }
                }
                catch(e)
                {   //没有下一级
                    return;
                }

                while(nextList.options.length!=0)
                {   //移除下级下拉列表的所有item
                    nextList.options.remove(0);
                }

                for(var i=0;i<nextList.bakOptions.length;i++)
                {
                    if(nextList.bakOptions[i].ParentPtr == list.options[list.selectedIndex].value)
                    {
                        nextList.options.add(nextList.bakOptions[i]);
                    }
                }
                nextList.selectedIndex=0;" + refreshNext_ref + @"(nextList);
            }
");
            refreshNextForPostBack = string.Concat("function ", refreshNextForPostBack_ref, @"(list)
            {
                var nextList;
                try
                {
                    var index = list.id.lastIndexOf('_');
                    var front = list.id.substring(0,index+1);
                    var count = list.id.substring(index+1);
                    var count2 = parseInt(count)+1;
                    nextList = document.getElementById(front + count2);
                    if(!nextList)
                    {
                        return;
                    }
                }
                catch(e)
                {   //没有下一级
                    return;
                }

                for(var i=0;i<nextList.options.length;)
                {
                    if(nextList.options[i].ParentPtr != list.options[list.selectedIndex].value)
                    {
                        nextList.options.remove(i);
                    }
                    else
                    {
                        i++;
                    }
                }" + refreshNextForPostBack_ref + @"(nextList);
            }
");

            initCDDL = string.Concat("function ", initCDDL_ref, @"(list)
            {
                list.bakOptions = new Array();
                for(var i=0; i<list.options.length;i++)
                {   //保存所有item
                    list.bakOptions.push(list.options.item(i));
                }
            }
");
        }
    }

}