可输入的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';
}
}
本文来自CSDN博客,转载请标明出处:http://blog.csdn.net/weiky626/archive/2007/07/31/1718741.aspx