ASP.NET 自訂控制項之下拉多選控制項__.net

/// <summary>    /// 多選下拉控制項    /// </summary>    [ToolboxData("<{0}:MultipleDropdownList runat=server></{0}:MultipleDropdownList>")]    public class MultipleDropdownList : CompositeControl    {        #region Fields        private CheckBoxList _checkBoxes;        private TextBox _textBox;        private static ListItem _selectAllItem = new ListItem("全選", "___selectAll___");        #endregion        #region 資料繫結屬性        public Object DataSource        {            get { return ViewState["_dataSource"]; }            set { ViewState["_dataSource"] = value; }        }        public string DataTextField        {            get { return ViewState["DataTextField"] == null ? "" : ViewState["DataTextField"].ToString(); }            set { ViewState["DataTextField"] = value; }        }        public string DataValueField        {            get { return ViewState["DataValueField"] == null ? "" : ViewState["DataValueField"].ToString(); }            set { ViewState["DataValueField"] = value; }        }        public string DataTextFormatString        {            get { return ViewState["DataTextFormatString"] == null ? "" : ViewState["DataTextFormatString"].ToString(); }            set { ViewState["DataTextFormatString"] = value; }        }        #endregion        #region Properties        public IEnumerable<String> SelectedValues        {            get            {                foreach (ListItem item in SelectedItems)                {                    yield return item.Value;                }            }        }        public IEnumerable<ListItem> SelectedItems        {            get            {                foreach (ListItem item in _checkBoxes.Items)                {                    if (IsSelectedAllItem(item)) continue;                    if (item.Selected) yield return item;                }            }        }        /// <summary>        /// 用逗號隔開後的選中的值        /// </summary>        public String SelectedValuesJoined        {            get { return String.Join(",", SelectedValues.ToArray()); }        }        #endregion        public override void DataBind()        {            EnsureChildControls();            _checkBoxes.DataSource = DataSource;            _checkBoxes.DataTextField = DataTextField;            _checkBoxes.DataValueField = DataValueField;            _checkBoxes.DataTextFormatString = DataTextFormatString;            base.DataBind();//由於這個Bind,會遞迴其子控制項的Bind,所以把Insert全選放到下邊，以防在Bind之前清空了資料            _checkBoxes.Items.Insert(0, _selectAllItem);        }        protected override void CreateChildControls()        {            base.CreateChildControls();            _textBox = new TextBox();            if(Width.Value>0) _textBox.Width = Width;            Controls.Add(_textBox);            //下拉框的容器            HtmlGenericControl div = new HtmlGenericControl("div");            div.Style.Add(HtmlTextWriterStyle.BackgroundColor,"white");            div.Style.Add(HtmlTextWriterStyle.Display, "none");            div.Style.Add(HtmlTextWriterStyle.Position, "absolute");                        //使用CheckBoxList作為多選            _checkBoxes = new CheckBoxList();            _checkBoxes.RepeatDirection = RepeatDirection.Vertical;            _checkBoxes.RepeatLayout = RepeatLayout.Flow;            div.Controls.Add(_checkBoxes);            Controls.Add(div);        }        protected override void AddAttributesToRender(HtmlTextWriter writer)        {            base.AddAttributesToRender(writer);            writer.AddAttribute(HtmlTextWriterAttribute.Class, "__MultipleDropdownList__");            writer.AddStyleAttribute(HtmlTextWriterStyle.Display, "block");            writer.AddStyleAttribute("float", "left");        }        protected override void OnInit(EventArgs e)        {            base.OnInit(e);            //包含js            var jsUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(),                                                            "cslc.Athena.WebExtendControl.MultipleDropdownList.js");                        this.Page.ClientScript.RegisterClientScriptInclude("MultipleDropdownList_js",jsUrl);            //包含css            var cssUrl = Page.ClientScript.GetWebResourceUrl(this.GetType(),                                                            "cslc.Athena.WebExtendControl.MultipleDropdownList.css");            string csslink = "<link href='" +cssUrl + "' rel='stylesheet' type='text/css' />";            LiteralControl include = new LiteralControl(csslink);            this.Page.Header.Controls.Add(include);        }        //某選項是否為“全選”項        private bool IsSelectedAllItem(ListItem item)        {            return item.Value == _selectAllItem.Value && item.Text == _selectAllItem.Text;        }    }

以上為C#源碼，JS代碼沒有帖出來，詳見原始碼

使用舉例

<cc1:MultipleDropdownList ID="MultipleDropdownList1" runat="server" />

var procducts = new List<Procduct>()                                {                                    new Procduct(){Id=1,Name="N72"},                                    new Procduct(){Id=2,Name="N95"}                                };            MultipleDropdownList1.DataSource = procducts;            MultipleDropdownList1.DataTextField = "Name";            MultipleDropdownList1.DataValueField = "Id";            MultipleDropdownList1.DataBind();

效果圖如下:

下載源碼