http://www.cnblogs.com/sunnycoder/archive/2010/08/10/1796373.html
引言
在ASP.NET页面中，经常会遇到在TextBox中输入完成数据后，点击一个按钮执行一些操作。而作为用户，大都希望按下回车键便捷地完成这个操作，而不是每次输入完数据后，都需要使用鼠标来点击按钮。
本文就将介绍如何简便地完成将TextBox与按钮事件关联。
测试用例
在页面中放入四个控件：TextBox、LinkButton、Button、Label。如下图所示：
clip_image002
效果：
1、在TextBox中输入内容，点击LinkButton时，在Label中使用黑色字体显示TextBox中的内容；点击Button时，在Label中使用红色字体显示TextBox中的内容。
2、指定在TextBox中按下回车键时，执行LinkButton或者Button的事件。
LinkButton事件
为LinkButton注册OnClick事件，代码如下：
protected void LinkButton1_Click(object sender, EventArgs e)
{
Label1.Text = TextBox1.Text;
Label1.ForeColor = Color.Black;
}
Button事件
为Button注册OnClick事件，代码如下：
protected void Button1_Click(object sender, EventArgs e)
{
Label1.Text = TextBox1.Text;
Label1.ForeColor = Color.Red;
}
为TextBox添加Load事件
为TextBox注册OnLoad事件，代码如下：
protected void TextBox1_Load(object sender, EventArgs e)
{
TextBox1.RegisterPressEnterAction(Button1, ButtonType.Button);
}
protected void TextBox1_Load(object sender, EventArgs e)
{
TextBox1.RegisterPressEnterAction(LinkButton1, ButtonType.Link);
}
在此处，调用了TextBox的扩展方法RegisterPressEnterAction(this TextBox, WebControl, ButtonType)，此方法的代码在下文“扩展方法”中可以找到。
方法的第一个参数是Button对象的引用；第二个参数是Button的类型，分为三种：Button、Image和Link。
在此示例中，如果在TextBox按下回车键时要执行Button的事件，则需要调用TextBox1.RegisterPressEnterAction(Button1, ButtonType.Button)，这样在TextBox中按下回车键时，Label中将显示红色文本；如果要执行LinkButton的事件，则需要调用TextBox1.RegisterPressEnterAction(LinkButton1, ButtonType.Link)，这样在TextBox中按下回车键时，Label中将显示黑色文本。
扩展方法
此扩展方法将为TextBox添加客户端脚本事件：onkeypress。
根据不同的ButtonType，注册的脚本内容是不同的，如下所示：
/// <summary>
///TextBoxExtension 的摘要说明
/// </summary>
public static class TextBoxExtension
{
/// <summary>
/// 为TextBox指定回车时执行的按钮事件
/// </summary>
/// <param name="textBox"></param>
/// <param name="button"></param>
/// <param name="buttonType"></param>
public static void RegisterPressEnterAction(this TextBox textBox, WebControl button, ButtonType buttonType)
{
switch (buttonType)
{
case ButtonType.Button:
textBox.Attributes.Add("onkeypress", String.Format("enterPressExecuteButtonAction(this.id,'{0}');", button.ClientID));
break;
case ButtonType.Image:
break;
case ButtonType.Link:
textBox.Attributes.Add("onkeypress", String.Format("enterPressExecuteLinkButtonAction(this.id,'{0}');", button.ClientID));
break;
default:
break;
}
textBox.Attributes.Add("onfocus", "javascript:this.select();");
}
}
脚本
LinkButton
LinkButton翻译为html后是一个a标签，它的点击事件实际上是一个href属性，例如：
<a id=”btnSave” href=”javascript:saveData()”>保存</a>
那么要执行他的方法，就需要获取”saveData()”部分的字符串，然后利用JavaScript的Function对象的构造函数，使用一个字符串构造出一个function。然后调用此函数，效果与点击LinkButton的效果相同（例如验证控件的效果也会包含其中）。
Button
Button翻译为html后是一个<input type=”button” />或者<input type=”submit” />标签，它的点击事件实际上就是它的click事件。
那么要执行他的方法，只需要获取它的click事件，并执行即可。。
代码
<script type="text/javascript">
//为TextBox指定回车时执行的LinkButton按钮事件
// Sunny D.D at 2010-8-10
// sunny19788989@gmail.com
function enterPressExecuteLinkButtonAction(textBoxID, buttonID) {
if (event.keyCode == 13) {
var func = new Function(document.getElementById(buttonID).href.slice(11));
func();
event.returnValue = false;
}
}
//为TextBox指定回车时执行的Button按钮事件
// Sunny D.D at 2010-8-10
// sunny19788989@gmail.com
function enterPressExecuteButtonAction(textBoxID, buttonID) {
if (event.keyCode == 13) {
var func = document.getElementById(buttonID).click;
func();
event.returnValue = false;
}
}
</script>
页面代码
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
<div>
<asp:TextBox ID="TextBox1" runat="server" OnLoad="TextBox1_Load"></asp:TextBox>
<asp:LinkButton ID="LinkButton1" runat="server" OnClick="LinkButton1_Click">LinkButton</asp:LinkButton>
<asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" />
</div>
<div>
<asp:Label ID="Label1" runat="server" Text=""></asp:Label>
</div>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
扫一扫
811
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
