Đỉnh NGUYỄN

life's a journey not a destination

Implementing KeyBoard Shortcuts in ASP.NET applications using jQuery

Leave a comment


Các ứng dụng web như Gmail và Windows Live Mail đều hỗ trợ keyboard shortcuts giúp tiết kiệm thời gian với những hành động thường dùng như check mail, soạn mail, attach file,…

Mục tiêu: Tạo 1 trang web với 2 liên kết (mỗi liên kết sẽ dẫn đến 1 trang khác). Chúng ta sẽ thấy sự khác biệt khi nhấn các phím 1 hoặc 2 chứ không phải nhấn vào liên kết dẫn đến trang 1 hoặc trang 2.

(Nhấn phím 1 hoặc 2 để chuyển đến trang tương ứng với liên kết)

Okay, bắt đầu

Lưu ý: Trước tiên, bạn phải quen với jQuery (không cần phải rành), nếu bạn chưa quen biết jQuery cũng không sao, download jQuery và chúng ta tiếp tục

Bước 1. Tạo website, thêm MasterPage.master và tạo 3 trang Default.aspx, Page1.aspx, Page2.aspx. Copy file jQuery vừa download về vào Website

Bước 2. Trong trang Default.aspx, thêm 2 liên kết đến 2 trang Page1.aspx và Page2.aspx tương tự như sau

<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 />
    </div>
</asp:Content>

Bước 3. Mở MasterPage.master và thêm/sửa đoạn code sau:

<head runat="server">
    <title>Keyboard ShortCuts</title>

    <script src="jquery-1.3.2.min.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"));
                }
            });
        });
    </script>

    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

Đoạn code trên thêm thư viện jQuery vào MasterPage và hàm bắt sự kiện shortcut

event.keyCode sẽ trả về mã ASCII của ký tự được nhấn. Tham khảo bảng mã ASCII để biết thêm thông tin. Ở đây, nhấn phím 1 sẽ trả về mã ASCII là 49, tương tự phím 2 sẽ trả về mã ASCII là 50.

Có 2 điểm quan trọng ở trên là:

1.  $("[id$=’lbPage1′]"). Dùng ‘$=‘operator để khớp với chuỗi gần cuối của id ctl00_ContentPlaceHolder1_lbPage1

2. Dùng hàm eval() – Điều này là bắt buộc, khi xem source code từ trình duyệt, link button sẽ trả về

Đoạn javascript ở trên sẽ đáp lại sự kiện postback khi link button được click.

Advertisements

Author: dinhnn

Senior software developer, a technical leader. You can be reached at via email to dinhnguyenngoc@gmail.com, via my blog at dinhnguyenngoc.wordpress.com, and on Twitter @dinhnguyenngoc.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s