引言

ASP.NET页面中,经常会遇到在TextBox中输入完成数据后,点击一个按钮执行一些操作。而作为用户,大都希望按下回车键便捷地完成这个操作,而不是每次输入完数据后,都需要使用鼠标来点击按钮。

本文就将介绍如何简便地完成将TextBox与按钮事件关联。

测试用例

在页面中放入四个控件:TextBoxLinkButtonButtonLabel。如下图所示:

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的类型,分为三种:ButtonImageLink

在此示例中,如果在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()”部分的字符串,然后利用JavaScriptFunction对象的构造函数,使用一个字符串构造出一个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 2010-08-10 11:28  Dawn.D  阅读(14491)  评论(3编辑  收藏  举报