by Pieter Brinkman
24. September 2010 08:47
As proof of concept I wanted to sort images in a Grid by keyboard. The sort logic needed to be implemented on the server. My solution for this problem is a combination of Javascript and C#.
First add following html to you .aspx. Notice that the body tag has runat=”server” and a ID.
[code:html] <body runat="server" ID="bodyTag"> <form id="form1" runat="server"><asp:Button runat="server" Text="Up" ID="UpButton" CommandArgument="up" oncommand="DownButton_Command" /><br /><asp:Button runat="server" Text="Left" ID="LeftButton" CommandArgument="left" oncommand="DownButton_Command" /><asp:Button runat="server" Text="Right" ID="RightButton" oncommand="DownButton_Command" CommandArgument="right" /><br /><asp:Button runat="server" Text="Down" ID="DownButton" oncommand="DownButton_Command" CommandArgument="down" /><br /><asp:Label runat="server" ID="clickedLabel" /></form></body>[/code]
Now add the following JavaScript to your page. This script will fetch all keyboard input and press the corresponding button.
[code:js]
<script language="JavaScript">
document.onkeydown = checkKeycode
function checkKeycode(e) {
var keycode;
if (window.event) keycode = window.event.keyCode;
else if (e) keycode = e.which;
switch (keycode) {
case 37:
var obj = document.getElementById('<%=LeftButton.ClientID%>');
obj.focus();
obj.click();
break;
case 38:
var obj = document.getElementById('<%=UpButton.ClientID%>');
obj.focus();
obj.click();
break;
case 39:
var obj = document.getElementById('<%=RightButton.ClientID%>');
obj.focus();
obj.click();
break;
case 40:
var obj = document.getElementById('<%=DownButton.ClientID%>');
obj.focus();
obj.click();
break;
}
}
</script>
[/code]
At last we need to add the following C# code to the page.
[code:c#]
protected void Page_Load(object sender, EventArgs e)
{
//Ad clientside onkeypress event to the body
bodyTag.Attributes.Add("OnKeyPress", "keyhandlers()");
}
protected void DownButton_Command(object sender, CommandEventArgs e)
{
//Just for testing
clickedLabel.Text = (string)e.CommandArgument;
}
[/code]
Enjoy, Pieter
Subscribe