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
by Pieter Brinkman
23. June 2009 03:49
The last few years I spend a lot of time working with Asp.Net AJAX. It all worked pretty good, the only downside is that you do not have control the generated HTML. With jQuery you can manipulate generated HTML. This HTML can be generated fully controlled with a ListView.
I'm a lazy programmer so the first thing I needed to do is fix jQuery Intellisense in VS2008. I found my information for doing this on Scott Gu's blog (jQuery Intellisense in Vs 2008). Everything worked great the only bad thing is that my computer needed a restart after installing a Visual Studio Patch...
Now the Intellisense is working the only thing I need to do is blog some nice examples of my work! ;-)
Cheers,
Pieter
by Pieter Brinkman
25. June 2008 10:24
I've search them all up for a 1000 times. Now I'm going to write them down as reference. This post will grow in the next few months.
Remember do not forget to set the behaviorId of the control.
References:
CollapsiblePanelExtender
Expand:
-
$find('BehaviorId')._doOpen();
Collapse:
ModalPopupExtender
Show popup:
Hide popup:
Subscribe