Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > Web Design > Ajax-Jquery-Javascript > Jquery với Asp.net – Phần I
Jquery với Asp.net – Phần I
Nguyễn Trung Hiếu
Share Code Web Company 2012

Jquery với Asp.net – Phần I

Loạt bài viết sau sẽ hướng dẫn các bạn làm quen với jQuery trong lập trình ASP.NET

I. Giới thiệu
Jquery là một thư viện của Javascript được sử dụng rộng rãi nhất cho các ứng dụng web ngày nay, nó được hỗ trợ bởi một cộng đồng lớn.
Jquery có thể được thực thi với hầu hết các flatform khác nhau như .NET, PHP và Java. Được hỗ trợ bởi Microsoft, nó được tích hợp sẵn với Visual Studio (version 2010). Jquery có thể dễ dàng thực thi với các controls của Asp.NET tốt hơn các custom user controls. Nó có thể được sử dụng để kiểm tra các controls chạy phía Client, hoặc có thể tạo ra các hiệu ứng chuyển động mượt mà hơn.
Jquery Selectors cho phép bạn chọn các phần tử DOM sau đó bạn có thể áp dụng các phương thức của Jquery và giúp cho việc kết hợp với CSS được dễ dàng. Sử dụng CSS ở đây cũng như việc bạn thiết kế style cho các thẻ HTML. Bạn có thể chọn phần tử theo Id, theo Class, lọc theo thuộc tính, mối quan hệ giữa các phần tử khác.
Bạn có thể download jQuery từ Official jQuery website.
II. Các sử dụng
Chúng ta copy thư viện mà chúng ta vừa download về. Và chèn vào thẻ Head của trang đoạn mã sau

Thẻ script đầu tiên là nơi chứa đường dẫn tới thư viện mà chúng ta download về. Ví dụ như ở đây nó nằm trong thư mục js, trong thư mục gốc của website. Thẻ script thứ hai sẽ bao gồm các đoạn mã lện của jQuery và Javascript.
Giờ trang web của chúng ta đã có thể sử dụng jQuery.

Tất cả các jQuery được tạo ra trên trang nên được nằm trong hàm $(document).ready(). Hàm này thực thi như là một DOM và được load trước khi trang web được trả lại cho Client.
III. Cấm cut/copy/paste cho ô textbox.
Đoạn code sau sẽ cấm user thực hiện các thao tác như cut/copy/paste trong ô textbox có Id là txtPwd:

Chú ý: trong form của bạn phải có controls textbox với Id=txtPwd
IV. Hiển thị Items được chọn trong CheckboxList
Hàm sau sẽ thực hiện việc duyệt qua từng phần tử checkbox(được check bởi kiểu input[type=checkbox]) trong CheckBoxList bởi hàm each(). Sau đó sẽ đem hiển thị chúng lên dưới một id=message

Chú ý: Trong form của bạn phải có CheckBoxList với Id =CheckBoxList1
Bây giờ chúng ta cùng mổ xẻ đoạn mã này như sau:

input[type=checkbox] lọc tất cả các checkbox trong control checkboxlist
$(this): item hiện thời đang được focus bởi code.
.is(): phương thức được dùng để tìm kiếm checkbox hiện tại bởi thuộc tính checked
.next(): phương thức lấy thằng tiếp theo của node/controls hiện tại. Mỗi checkbox đều được render ra 2 HTML tags là label và input. Vậy chúng ta đang ở vị trí label, và sử dụng next() thì sẽ di chuyển dấu nháy tới input.
.text(): phương thức lấy ra nội dung của item được focus.

V. Lấy value/text từ DropDownList
Với jQuery chúng ta cũng dễ dàng lấy được giá trị của dropdownlist bằng đoạn mã sau đây:

.find(): tìm dropdownlist được chọn, và gán vào biến selectedItem.
– Với item gốc, chúng ta có giá trị string rỗng. Vậy ở đây chúng ta kiểm tra, nếu giá trị rỗng thì sẽ remove tất cả các thông báo ra khỏi thẻ div
– Nếu thuộc tính value không rỗng thì có nghĩa là sẽ có 1 giá trị nào đó được chọn. Chúng ta có thể lấy giá trị này bằng hàm .text().val()

VI. Thay đổi focus khi nhấn Enter
Bind sự kiện keydown của textbox

e.which ==13: kiểm tra xem có nhấn nút Enter hay không
VII. Kết
jQuery là một thư viện rất mạnh của javascript. Nó dành được sự quan tâm từ một lực lượng đông đảo các nhà phát triển. Với bài viết này, hy vọng sẽ đóng góp cho các bạn những cái nhìn tổng quan nhất về jQuery.

Related Posts

Tác giả: Nguyễn Trung Hiếu

Một blogger ... cùi bắp! Đơn giản: tôi muốn ghi lại những gì xảy ra xung quanh, cả công việc lẫn cuộc sống và chia sẻ với các bạn đọc. Nếu bạn cảm thấy bài viết có nhiều điểm không chính xác, hãy comment và chia sẻ để tôi còn được học hỏi từ những góp ý của bạn. Email: hieunt.dcn@gmail.com

http://sharecodeweb.net/?s={search_term_string}