可輸入的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';
    }
}