|
Implementing KeyBoard Shortcuts in ASP.NET applications using jQuery
|
|
Rating: 4 user(s) have rated this article
Posted by: Suprotim Agarwal,
on 6/4/2009,
in category "jQuery and ASP.NET"
Views: this article has been read 14748 times
Abstract: Continuing my journey of exploring ASP.NET with jQuery, I will show you how to implement Keyboard Shortcuts in ASP.NET applications using jQuery, without using any C# or VB.NET code.
Implementing KeyBoard Shortcuts in ASP.NET applications using jQuery
Last year, I had written an article Going Mouseless - Implementing Keyboard Shortcuts in ASP.NET 2.0 Using Javascript where I had used the ClientScript.RegisterClientScriptBlock to register a client script block to the top of the rendered page using a type, key, and script literal. The client script would intercept each keystroke and then take action based on the key pressed. Continuing my journey of exploring ASP.NET with jQuery, in this article, I will show you how to implement Keyboard Shortcuts in ASP.NET applications using plain jQuery, without using any C# or VB.NET code.
Popular Web apps like Gmail and Windows Live Mail feature Keyboard shortcuts, which help you save time by executing common operations using the Keyboard, without having to switch between the keyboard and mouse. In this article, we will implement Keyboard shortcuts in our own ASP.NET applications using jQuery. Let us get started.
Step 1: Create an ASP.NET website. Add a master page to the application(MasterPage.master). Also create 4 pages that will be using this master page: Default.aspx, Page1.aspx, Page2.aspx and Page3.aspx.
Step 2: In the Default.aspx, drag and drop 3 LinkButton to the form. Rename these LinkButton’s as Page 1, Page 2 and Page 3 respectively. The markup would be similar to the following:
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<div>
<asp:LinkButton ID="lbPage1" runat="server" PostBackUrl="Page1.aspx">
Page 1</asp:LinkButton><br />
<asp:LinkButton ID="lbPage2" runat="server" PostBackUrl="Page2.aspx">
Page 2</asp:LinkButton><br />
<asp:LinkButton ID="lbPage3" runat="server" PostBackUrl="Page3.aspx">
Page 3</asp:LinkButton><br />
</div>
</asp:Content>
Step 3: Go back to your MasterPage.master and add the following jQuery code to the <head> section of the page. Ideally all scripts should go to a separate .js file, however for understanding purposes; we will keep it in the same page. The code would look similar to the following:
<head runat="server">
<title>KeyBoard ShortCuts</title>
<script src="Scripts/jquery-1.3.2.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
$(document).keyup(function(event) {
var key = event.keyCode || event.charCode || 0;
if (key == 49) { // Page One Press 1
eval($("[id$='lbPage1']").attr("href"));
} else if (key == 50) { // Page Two Press 2
eval($("[id$='lbPage2']").attr("href"));
} else if (key == 51) { // Page Three Press 3
eval($("[id$='lbPage3']").attr("href"));
} else if (key == 52) { // Alert Press 4
$("[id$='btnAlert']").trigger('click');
}
});
});
</script>
<asp:ContentPlaceHolder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
In the code above, we are binding to the keyup event and performing different actions depending on the key pressed by the user. The keyup event fires when a key on the keyboard is released. The Key is captured using the event.keyCode which returns the Ascii value of the key. We then take action depending on the Ascii code returned. Here 1 returns Ascii 49, 2 returns 50, 3 returns 51 and 4 returns 52.
There are two very important points to observe here –
1. Accessing controls in Master Content Pages using $("[id$='lbPage1']". The trick is to use the '$='operator to match the end of the id string as in ctl00_ContentPlaceHolder1_lbPage1.
2. The usage of eval() – Let me explain why eval() is required. The link button gets rendered as
<a id="ctl00_ContentPlaceHolder1_lbPage1" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$lbPage1", "", false, "", "Page1.aspx", false, true))"> Page 1</a>
Observe the JavaScript code in the href which is responsible for a postback when the LinkButton is clicked. So in order to invoke this code using our KeyBoard Shortcut, we use eval(), which executes the JavaScript code and emulates a click().
Step 4: The last step is to test the Keyboard shortcut on the Default.aspx page by pressing 1, 2 or 3 to navigate to Page1 , Page2 or Page 3 respectively. Similarly press ‘4’ to refresh the Default.aspx page.
Cool, isn’t it! The main focus of this article was to demonstrate how to use jQuery in ASP.NET pages and create a simple Keyboard shortcut functionality. However once you understand how to use this effectively, the possibilities are endless. Gmail, Live Mail, Yahoomail are three good examples where keyboard shortcuts are being used to improve user interactiveness with the application. Mail back and let me know how you used this code in your application.
The entire source code of this article can be downloaded from here.
I hope you liked the article and I thank you for viewing it. If you liked the article, 
Subscribe to the RSS Feed or Subscribe Via Email