引言
在ASP.NET页面中，经常会遇到在TextBox中输入完成数据后，点击一个按钮执行一些操作。而作为用户，大都希望按下回车键便捷地完成这个操作，而不是每次输入完数据后，都需要使用鼠标来点击按钮。
本文就将介绍如何简便地完成将TextBox与按钮事件关联。
测试用例
在页面中放入四个控件：TextBox、LinkButton、Button、Label。如下图所示：
效果：
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> |
posted on
