Search - Articles
DevASP.NET for ASP.NET, VB.NET, XML and C# (C-Sharp) Developers Tuesday, March 03, 2009
Dev Articles
Search Directory
ASP.NET
VB.Net
C-Sharp
SQL Server
 

How to implement Keyboard Shortcuts using jQuery in ASP.NET

Author: Jeff Nava
Download Source Code : 1286_KeyboardShortcuts.zip

In this article, you will learn how to implement keyboard shortcuts using jQuery. We will use keyboard shortcuts to navigate to different pages. You can download source code.

 

  1. Open Visual Studio 2010
  2. File > New > Website
  3. Visual basic or Visual C# > ASP.NET Empty Web Site
  4. Website > NewFolder and rename the folder as “Scripts” 
  5. Add “jquery-1.4.1.min.js” file in this folder. This is jQuery file that we will use in our example.
  6. Website > Add New Item > Master Page
  7. Website > Add New Item > Web Form > Select Master Page and rename the Web page as “Home.aspx”
  8. Website > Add New Item > Web Form > Select Master Page and rename the Web page as “FirstPage.aspx”
  9. Website > Add New Item > Web Form > Select Master Page and rename the Web page as “SecondPage.aspx”
  10. Website > Add New Item > Web Form > Select Master Page and rename the Web page as “ThirdPage.aspx”
  11. Website > Add New Item > Jscript File and rename the file as “KeyboardShortcuts.js”
  12. Write code below in Home.aspx page

    <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
        <asp:LinkButton ID="LinkButton1" runat="server"
        PostBackUrl="~/FirstPage.aspx">First Page</asp:LinkButton>
        <br />
        <asp:LinkButton ID="LinkButton2" runat="server"
        PostBackUrl="~/SecondPage.aspx">Second Page</asp:LinkButton>
        <br />
        <asp:LinkButton ID="LinkButton3" runat="server"
        PostBackUrl="~/ThirdPage.aspx">Third Page</asp:LinkButton>
    </asp:Content>
     
    We have added three LinkButtons for three pages and set the PostBackUrl attribute.
     
  13. Write code below in “KeyboardShortcuts.js” file

    $(document).ready(function () {
        $(document).keyup(function (event) {
            var key = event.keyCode || event.charCode || 0;
            if (key == 49) {
                eval($("[id$='LinkButton1']").attr("href"));
            } else if (key == 50) {
                eval($("[id$='LinkButton2']").attr("href"));
            } else if (key == 51) {
                eval($("[id$='LinkButton3']").attr("href"));
            }
        });
    });

    The kepup event is fired when a key from the keyboard is released. “event.keyCode” returns the ASCII code of the key. LinkButton ID is get by using eval function. The ASCII code of “1” is 49 so when we press 1 the click event of the LinkButton1 will fire.
     
  14.  Write below <script> tags in between <head> tags in MasterPage.master

    <script src="Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="KeyboardShortcuts.js"></script>

     
  15.  Save all files and press F5. Now press 1 to go to FirstPage.aspx and 2 for SecondPage.aspx
   
Add Article Comment:
Name :
Email Address :
   
Comments :
 
   
<< What is LINQ in ASP.NET?

Disclaimer - Privacy
© 2002-2017 DevASP.net