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>



本文转载:CSDN博客