Share Code Web - Chia sẻ niềm đam mê bất tận > Lập trình > ASP/ASP.Net > [Tuts]Tự động hiển thị dữ liệu khi cuộn chuột
[Tuts]Tự động hiển thị dữ liệu khi cuộn chuột
Nguyễn Trung Hiếu
Share Code Web Company 2014

[Tuts]Tự động hiển thị dữ liệu khi cuộn chuột

Hầu hết các mạng xã hội hiện nay như facebook, google+, twitter… đều tích hợp tính năng này, đó là khi người dùng cuộn con chuột giữa, thì tự động dữ liệu như các dòng status, tin mới nhất sẽ được load lên mà không cần phải reload lại trang. Và trong bài này, mình sẽ hướng dẫn các bạn làm điều tương tự với ASP.Net C#jQuery.

Về chủ đề này hình như mình cũng đã có một bài viết rồi, bạn có thể tham khảo tại đây. Còn bài này mình sẽ hướng dẫn thêm một cách nữa cũng khá là đơn giản.

Khung HTML

Đầu tiên, chúng ta tạo một file mới và đặt tên là jQueryShowMore.aspxthiết kế HTML như sau

Nhúng jQuery

Đầu tiên, bao giờ khi thao tác với jQuery chúng ta cũng cần nhúng một vài cái thư viện vào trong thẻ head trước đã.

Ngoài ra, chúng ta viết thêm một chút ajax nữa. Đầu tiên sẽ là bắt sự kiện khi người dùng scroll chuột bằng hàm doLoadingMore

Trong đó:

  • #divNews là thẻ div dùng để bind dữ liệu
  • hàm doLoadingMore như sau:

Trong đó #hdf_page_index là id của một hiddenField, chúng ta sẽ dùng giá trị lấy trong hidden field này để truyền vào hàm ajax, sau đó lấy theo từng trang trong cơ sở dữ liệu.
Hàm trên sẽ giúp chúng ta load dữ liệu bằng Ajax trong phương thức jQueryShowMore.aspx/FetchNews ở dòng 14 bằng hàm LoadingAjax. Hàm này được viết trong file CommonFunction.js mà chúng ta đã nhúng bên trên.

Nếu bạn để ý, trong dòng 17 chúng ta còn có thêm một hàm nữa là ShowLoadingImage. Hàm này được viết theo cách kế thừa, để load ảnh khi chúng ta đang chờ server phản hồi lại. Nội dung của hàm bạn có thể tham khảo dưới đây

Trong file jQueryShowMore.aspx.cs chúng ta sẽ viết phương thức FetchNews để load dữ liệu từ db ra ngoài.

Download code

Vậy là chúng ta đã có một vài hàm cơ bản giúp bạn có thể thực hiện load dữ liệu từ db lên website khi người dùng cuộn chuột rồi, bạn có thể download code bên dưới đây để học hỏi. Chúc bạn thành công!

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}