Prerequisites
.Net Framework 2.0 and above
jQuery
How To
1. Create a new ASP.Net website.
Here i will be demonstrating how we can navigate from one webpage to another using keyboard shortcuts.
2. Add a masterpage (default.aspx) and add two more webpages (page1.aspx, page2.aspx) to the current web application.
3. In the default.aspx add two linkbutton. These button will navigate to page1.aspx and page2.aspx respectivly.
<asp:content id="Content1" contentplaceholderid="ContentPlaceHolder1 Runat=">
<div>
<asp:linkbutton id="lnkPage1" runat="Server" poskbackurl="Page1.aspx">Page1</asp:LinkButton>
<br />
<asp:linkbutton id="lnkPage2" runat="Server" poskbackurl="Page2.aspx">Page1</asp:LinkButton>
<br />
</div>
</asp:Content>
4. In master page add the following jQuery
<head runat="server">
<title>My Website</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$='lnkPage1']").attr("href"));
} else if (key == 50) { // Page Two Press 2
eval($("[id$='lnkPage2']").attr("href"));
}
});
});
</script>
<asp:contentplaceholder id="head" runat="server">
</asp:ContentPlaceHolder>
</head>
Using jQuery we are using the KeyUp event and performing actions based on which key has been pressed by the user. The KeyUp event fires when a key on the key is released. The key is captured using the event.KeyCode which returns the Ascii value of the key.
Here in our application page1 shortcut key is 1, whose Ascii value is 49 and page2 shortcut key is 2 whose Ascii value is 50.
In code we are accessing the master page control using $("[id$='lnkPage1']". The '$=' operator will match the end of the id string as in ctl100_ContentPlaceHolder1_lnkPage1
Once the page is rendered, we can see the source. The link button will be in the following html format
<a id="ctl00_ContentPlaceHolder1_lnkPage1" href="javascript:WebForm_DoPostBackWithOptions(new WebForm_PostBackOptions("ctl00$ContentPlaceHolder1$lbPage1", "", false, "", "Page1.aspx", false, true))"> Page 1</a>
The javascript code in the href which is responsible for the postback when the linkbutton is clicked. So we will be trying to invoke the same code using Keyboard shortcut. For this we will be using eval(), which executes the javascript code and emulates a click().
This article is just for explaining how to use jQuery with Asp.net webpage to create userfriendly applications. Am assuming you will get the trick of how the most popular webapplications make use of keyboard shortcut. You can extend the demostrated approach as per your requirement.
No comments:
Post a Comment