在ASP.NET文本框中捕获按键

Is there an easy wayt o capture a keypress (in my case: F5) in a ASP.NET textbox, and executing a server method as a response?

是否有一种简单的方法可以在ASP.NET文本框中捕获按键(在我的情况下:F5),并将服务器方法作为响应执行?

I've created a simple SQL frontend, and out of habit (from SQL Server Mgmt Studio), I keep pressing F5 when I'm done typing my query, but that always refreshes the browser, instead of executing my SQL query :-)

我已经创建了一个简单的SQL前端,并且出于习惯(来自SQL Server Mgmt Studio),我在输入查询时一直按F5,但这总是刷新浏览器,而不是执行我的SQL查询:-)

Can I do this in ASP.NET using possibly some Javascript or jQuery ?

我可以使用一些Javascript或jQuery在ASP.NET中执行此操作吗?

Marc

UPDATE:

I have this jQuery code on my ASP.NET page:

我的ASP.NET页面上有这个jQuery代码:

 $(document).ready(function() {
    $("#<%= txtQuery.ClientID %>").keydown( function (e) {
        if (e.keycode == 116) {
           $("#<%= btnExecute.ClientID %>").trigger('click');
        }
    });
 });

I tried various combinations of "e.which", "e.keycode" and various values for keycode - but none seem to work. I'm using MS IE 7 on my dev machine. txtQuery is the ASP.NET textbox where I type my query, and btnExecute is the ASP.NET button which will send that query to SQL Server to be executed.

我尝试了“e.which”,“e.keycode”和键码的各种值的各种组合 - 但似乎都没有用。我在我的开发机器上使用MS IE 7。 txtQuery是我输入查询的ASP.NET文本框,而btnExecute是ASP.NET按钮,它将该查询发送到要执行的SQL Server。

Any ideas? Do I need to suppress the standard event handling somehow? And if so: then how do I accomplish that?

有任何想法吗?我是否需要以某种方式抑制标准事件处理?如果是这样的话,那我该怎么做呢?

4 个解决方案

#1

See keypress( fn )

见按键(fn)

$("#yourtextboxId").keypress( function (e) {
   // do stuff here
});

and

e.which

will identify the key pressed and I think the keycode for F5 is 116

将识别按下的键,我认为F5的键码是116

For triggering an event you can use the

要触发事件,您可以使用

trigger method

$("#yourexecutescriptbutton").trigger('click');

Edit:

If you need to catch F5 then give a keydown event handler

如果你需要捕获F5,那么给一个keydown事件处理程序

$("#yourtextboxId").keydown( function (e) {
        if ( e.which === 116 )
        {
            $("#yourexecutescriptbutton").trigger('click');  
        }
    });

#2

If you want to do a server-side call from the client, you'll either need to use some javascript to initiate a postback, or perform an AJAX call to your application.

如果要从客户端进行服务器端调用,则需要使用一些javascript来启动回发,或者对应用程序执行AJAX调用。

First of all, you need to handle your key presses. jQuery provides the convenient keypress method to capture key presses on an element:

首先,您需要处理按键操作。 jQuery提供了方便的按键方法来捕获元素上的按键:

$("#mytextbox").keypress(function(e){
    // Use e.which, etc to find out which key was pressed.
});

Unfortunately, the Function keys (F1-F12) need special treatment in certain browsers where they do not generate keypress events. To capture function keys reliably across all modern browsers, you'll have to look at using keydown and keyup events. I suggest you read this article to understand how to interpret the key events in the browsers you are supporting.

不幸的是,功能键(F1-F12)在某些浏览器中需要特殊处理,它们不会生成按键事件。要在所有现代浏览器中可靠地捕获功能键,您必须查看使用keydown和keyup事件。我建议你阅读这篇文章,了解如何解释你支持的浏览器中的关键事件。

Next, you'll need to create a ASP.NET web method. The way to do this is to create a public static method on your page (or a separate page if you like), then decorate it with the WebMethodAttribute attribute:

接下来,您需要创建一个ASP.NET Web方法。这样做的方法是在页面上创建一个公共静态方法(如果你愿意,可以在一个单独的页面上创建),然后使用WebMethodAttribute属性进行装饰:

[WebMethod]
public static string MyMethod(int foo, int bar, string bob)
{
    return "Welcome to The World of Tomorrow!";
}

Lastly, you can use jQuery to call this method and do something with the response:

最后,您可以使用jQuery调用此方法并对响应执行某些操作:

var request = $.ajax({
    type: "POST",
    url: "MyPage.aspx/MyWebMethod",
    data: "{ foo:22, bar:19, bob:'A string' }",
    contentType: "application/json; charset=utf-8",
    dataType: "json",
    success: function(msg) {
        var response = null;

        if (typeof (msg.d) != 'undefined')
            response = msg.d;

        if (response == null)
            Error('Message returned by ASP.NET AJAX call is not in the expected format.');

        alert(response);
        },
    error: function(request, textStatus, errorThrown) {

        if (console && typeof console.log != "undefined") {

            try {
                var result = eval("(" + request.responseText + ")");

                if (result && typeof result.Message != "undefined")
                    console.log(result.ExceptionType + ": " + result.Message + "\n" + result.StackTrace);
            }
            catch (ex) {
                console.log(request.responseText);
            }
        }
    }
});

On a successful call, this little bit of code will display an alert "Welcome to The World of Tomorrow!", passed to the browser as a response from the ASP.NET method.

在成功调用时,这一小段代码将显示警告“欢迎来到明天的世界!”,作为ASP.NET方法的响应传递给浏览器。

The short answer is that what you ask is entirely possible, however it is not as simple as you might imagine. The hassle over detecting key presses can be particularly troublesome. Good luck!

简短的回答是你所要求的是完全可能的,但它并不像你想象的那么简单。检测按键的麻烦可能特别麻烦。祝你好运!

#3

To supress the default behaviour of an event, you have to stop it bubbling up to higher elements. To do this, simply return false from your event handler:

要抑制事件的默认行为,您必须阻止它冒泡到更高的元素。为此,只需从事件处理程序返回false:

$("#yourtextboxId").keydown( function (e) {
    if ( e.which === 116 )
    {
        $("#yourexecutescriptbutton").trigger('click');
        return false; // Stops keydown event being bubbled.  
    }
});

Unfortunately, depending on how the browser interprets the function keys, it may require preventing keydown and keyup events being raised for that particular key in addition to the behaviour here.

不幸的是,根据浏览器如何解释功能键,除了此处的行为之外,还可能需要阻止为该特定键引发的keydown和keyup事件。

#4

You just get the client id of the ASP.NET textbox in jquery. Then call ajax through jquery like following.

您只需在jquery中获取ASP.NET文本框的客户端ID。然后通过jquery调用ajax,如下所示。

var aspTextBox = $("#<%=Me.TextBox1.ClientId%>");
aspTextBox.keypress(function(e){
//Code for $.ajax request
    if(e.which==13){
    $.ajax({
    type:"POST",
    url:"WebService.asmx/GetData",
    contentType:"application/json;charset=utf-8",
    dataType:"json",
    data:"{}",
    success:function(data){
        },
    error:function(a,b,c){
        },
    });
    }
});

#1