可输入的Web下拉列表框控件
2008-06-10 19:54
204 查看
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, "/(?.*)/").Result("$1");
}
set
...{
_label.Text = string.Format("{0}", 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
...{
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';
}
}
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, "/(?.*)/").Result("$1");
}
set
...{
_label.Text = string.Format("{0}", 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
...{
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';
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 可输入的Web下拉列表框控件
- 可输入的Web下拉列表框控件
- 类库-----一些经常用到的对控件的处理1. 获取文本框中输入内容2.清除文本框内容3. 获取下拉列表框中选择内容，类型0为Text值，类型1为Value值4.DropDownList绑定日期
- (CEGUI)如何创建控件 ------下拉列表框，表格框，LISTBOX
- 生成（c#检查输入数据、web界面控件）代码的存储过程
- 可选择和输入的下拉列表框示例
- 可选择和输入的下拉列表框
- MFC自带控件CComboBox实现搜索输入是的动态下拉功能
- easyui中如何设置下拉列表框combobox只能选择，列表框内不能输入
- 考试系统——可输入并自动匹配的下拉框（三）——Html，Web控件级联
- 在web上打造可输入下拉列表
- 可选择也可输入的下拉列表框,html文件
- 可输入的下拉列表框
- 可选择也可输入的下拉列表框,html文件
- [自定义服务器控件] 第二步：下拉列表框。
- 自定义控件之节点为下拉列表框的树型控件
- CComboBox控件的下拉列表框，用鼠标在该ListBox上滑动的时候显示出当前具有focus的item项的索引
- 可选择也可以输入的下拉列表框
- [原]考试系统——可输入并自动匹配的下拉框（三）——Html，Web控件级联
- 一个用webservice behavior实现的三级联动下拉列表框