可输入的Web下拉列表框控件

vs2005提供的web下拉列表框 不支持输入，只能选择，我们可以继承该控件来支持输入功能，实现的原理很简单，就是增加一个textbox控件叠加在下拉列表框上，客户端通过脚本来同步这两个控件的值，先看看服务端代码：

 

using  System;
using  System.Collections.Generic;
using  System.Text;
using  System.Collections;
using  System.Web.UI.WebControls;
using  System.ComponentModel;
using  System.Text.RegularExpressions;
using  System.Drawing;
using  System.Web.UI;

namespace  Weiky.Web.Control
... {
    public class WeikyWebDropDownList : DropDownList
    ...{
        private TextBox _textBox;
        private Label _label;

        public WeikyWebDropDownList()
        ...{
            _textBox = new TextBox();
            _label = new Label();
            Caption = "标签";
            SetFont(9, "宋体");
            if (this.Parent != null)
            ...{
                this.Parent.Controls.Add(_textBox);
            }
        }

        客户端事件#region 客户端事件
        [CategoryAttribute("客户端事件")]
        [DisplayNameAttribute("Change")]
        public string Change
        ...{
            get
            ...{
                object o = ViewState["Change"];
                return ((o == null) ? "" : (string)o);
            }
            set
            ...{
                ViewState["Change"] = value;
            }
        }

        [CategoryAttribute("客户端事件")]
        [DisplayNameAttribute("Blur")]
        public string Blur
        ...{
            get
            ...{
                object o = ViewState["Blur"];
                return ((o == null) ? "" : (string)o);
            }
            set
            ...{
                ViewState["Blur"] = value;
            }
        }

        [CategoryAttribute("客户端事件")]
        [DisplayNameAttribute("Focus")]
        public string Focus
        ...{
            get
            ...{
                object o = ViewState["Focus"];
                return ((o == null) ? "" : (string)o);
            }
            set
            ...{
                ViewState["Focus"] = value;
            }
        }

        [CategoryAttribute("客户端事件")]
        [DisplayNameAttribute("KeyDown")]
        public string KeyDown
        ...{
            get
            ...{
                object o = ViewState["KeyDown"];
                return ((o == null) ? "" : (string)o);
            }
            set
            ...{
                ViewState["KeyDown"] = value;
            }
        }

        [CategoryAttribute("客户端事件")]
        [DisplayNameAttribute("KeyUp")]
        public string KeyUp
        ...{
            get
            ...{
                object o = ViewState["KeyUp"];
                return ((o == null) ? "" : (string)o);
            }
            set
            ...{
                ViewState["KeyUp"] = value;
            }
        }

        [CategoryAttribute("客户端事件")]
        [DisplayNameAttribute("KeyPress")]
        public string KeyPress
        ...{
            get
            ...{
                object o = ViewState["KeyPress"];
                return ((o == null) ? "" : (string)o);
            }
            set
            ...{
                ViewState["KeyPress"] = value;
            }
        }

        #endregion

        public void SetFont(int size, string name)
        ...{
            _label.Font.Name = name;
            _label.Font.Size = size;
        }

        公共属性#region 公共属性

        public override Unit Width
        ...{
            get
            ...{
                return Unit.Pixel((int)(base.Width.Value + _label.Width.Value));
            }
            set
            ...{
                base.Width = Unit.Pixel((int)(TextwidthScale * value.Value));
                if (Editable && base.Width.Value > 18)
                ...{
                    _textBox.Width = Unit.Pixel((int)(base.Width.Value - 18));
                }
                _label.Width = Unit.Pixel((int)(value.Value * (1 - TextwidthScale)));
            }
        }

        public int Left
        ...{
            get
            ...{
                return ControlBase.AbstractIntFromString(Style.Value,"Left");
            }
            set
            ...{
                Style.Remove(System.Web.UI.HtmlTextWriterStyle.Left);
                Style.Add("Left", string.Format("{0}px", value));
            }
        }

        public int Top
        ...{
            get
            ...{
                return ControlBase.AbstractIntFromString(Style.Value,"Top");
            }
            set
            ...{
                Style.Remove(System.Web.UI.HtmlTextWriterStyle.Top);
                Style.Add("Top", string.Format("{0}px", value));
            }
        }

        public override int SelectedIndex
        ...{
            get
            ...{
                return base.SelectedIndex;
            }
            set
            ...{
                base.SelectedIndex = value;
                if (Editable && SelectedItem != null)
                ...{
                    _textBox.Text = SelectedItem.Text;
                }
            }
        }
        [Category("外观")]
        [DefaultValue("标题")]
        [DisplayNameAttribute("标题")]
        public string Caption
        ...{
            get
            ...{
                return Regex.Match(_label.Text, "/<u/>(?<n1>.*)/</u/>").Result("$1");
            }

            set
            ...{
                _label.Text = string.Format("<u>{0}</u>", value);
            }
        }

        [Category("外观")]
        [DefaultValue("标题的颜色")]
        [DisplayNameAttribute("标题的颜色")]
        public Color LabelColor
        ...{
            get
            ...{
                return _label.ForeColor;
            }

            set
            ...{
                _label.ForeColor = value;
            }
        }

        [CategoryAttribute("外观")]
        [DisplayNameAttribute("录入框长度比例")]
        [Description("录入框占整个控件的长度的比例。")]
        public float TextwidthScale
        ...{
            get
            ...{
                object o = ViewState["TextwidthScale"];
                return ((o == null) ? (float)0.67 : (float)o);
            }
            set
            ...{
                ViewState["TextwidthScale"] = value;
                SetChildControlWidth();
            }
        }

        [CategoryAttribute("行为")]
        [DisplayNameAttribute("是否可编辑")]
        [Description("控件是否可编辑")]
        public bool Editable
        ...{
            get
            ...{
                object o = ViewState["Editable"];
                return ((o == null) ? false : (bool)o);
            }
            set
            ...{
                ViewState["Editable"] = value;
                if (value && base.Width.Value > 18)
                ...{
                    _textBox.Width = Unit.Pixel((int)(base.Width.Value - 18));
                }
            }
        }

        private void SetChildControlWidth()
        ...{
            _label.Width = Unit.Pixel((int)((1 - TextwidthScale) * Width.Value));
        }

        #endregion

        protected override void Render(System.Web.UI.HtmlTextWriter output)
        ...{
            output.WriteBeginTag("Table");
            output.WriteAttribute("style", string.Format("width:{0}px;z-index:1;position:absolute;Left:{1}px;Top:{2}px", Width.Value, Left,Top));
            output.WriteAttribute("cellspacing", "0");
            output.WriteAttribute("cellpadding", "0");
            output.Write(HtmlTextWriter.TagRightChar);
            output.WriteBeginTag("Tr");
            output.WriteAttribute("Nowrap", "true");
            output.Write(HtmlTextWriter.TagRightChar);
            output.WriteBeginTag("Td");
            output.WriteAttribute("valign", "baseline");
            output.WriteAttribute("align", "left");
            output.WriteAttribute("width", ((1 - TextwidthScale) * 100).ToString() + "%");
            output.Write(HtmlTextWriter.TagRightChar);
            _label.RenderControl(output);
            output.WriteEndTag("Td");
            output.WriteBeginTag("Td");
            output.WriteAttribute("width", (TextwidthScale * 100).ToString() + "%");
            output.Write(HtmlTextWriter.TagRightChar);

            if (Change != "")
            ...{
                Attributes.Add("onchange", Editable ? "DropDownList_OnChange('" + ClientID + "',this);" + Change : Change);
            }
            else if(Editable)
            ...{
                Attributes.Add("onchange", "DropDownList_OnChange('" + ClientID + "',this)");
            }

            base.Render(output);

            if (Editable)
            ...{
                _textBox.ID = ClientID + "_inputControl";
                _textBox.Style.Clear();
                _textBox.Style.Add("POSITION", "absolute");
                _textBox.Style.Add("MARGIN-LEFT", "-" + base.Width);
                _textBox.Style.Add("width", _textBox.Width.ToString());
                
                if (Blur != "")
                ...{
                    _textBox.Attributes.Add("onblur", "DropDownList_OnInputBlur('" + ClientID + "',this);" + Blur);
                }
                else
                ...{
                    _textBox.Attributes.Add("onblur", "DropDownList_OnInputBlur('" + ClientID + "',this)");
                }
                if (KeyDown != "")
                ...{
                    _textBox.Attributes.Add("onkeydown", KeyDown);
                }
                if (KeyUp != "")
                ...{
                    _textBox.Attributes.Add("onkeyup", KeyUp);
                }
                if (KeyPress != "")
                ...{
                    _textBox.Attributes.Add("onkeypress", KeyPress);
                }
                if (Focus != "")
                ...{
                    _textBox.Attributes.Add("onfocus", Focus);
                }
                _textBox.RenderControl(output);
            }
            output.WriteEndTag("Td");
            output.WriteEndTag("Tr");
            output.WriteEndTag("Table"); 
        }

        public void SetTextBoxValue(string value)
        ...{
            if (_textBox != null)
            ...{
                _textBox.Text = value;
            }
        }

    }
}

 

这个控件还包括前缀标签，说明该控件的名称，组合成一个完整的控件。

客户端通过两个脚本函数同步输入框控件和下拉框控件的值：

 

function  DropDownList_OnChange(id,theControl)
... {
    document.all(theControl.id + '_inputControl').value = DropDownList_GetText(theControl);
}

function  DropDownList_OnInputBlur(id,theInput)
... {
    var theControl = GetControlByName('8',id);
    var isRela = theControl.attributes.getNamedItem('isRela');
    if(isRela) return;
    var valueIsValid = false;
    for(var i=0;i<theControl.children.length;i++)
    ...{
        if(theInput.value == theControl.children[i].value || theControl.children[i].innerText.indexOf(theInput.value) > -1)
        ...{
            theControl.children[i].selected = true;
            theInput.value = theControl.children[i].innerText;
            valueIsValid = true;
            break;
        }
    }
    if(!valueIsValid)
    ...{
        theInput.style.color = 'red';
    }
    else
    ...{
        theInput.style.color = 'black';
    }
}