Cấp bậc tác giả:

DOTNET

Load dữ liệu từ Server trong khi cuộn chuột giống facebook

Được viết bởi QuangIT ngày 19/08/2014 lúc 10:54 PM
Như tiêu đề, bài viết sẽ hướng dẫn các bạn thực hiện load dữ liệu từ server trong khi cuộn chuột giống facebook khi mà dữ liệu của bạn lớn, và bạn chỉ muốn show dữ liệu cho tới khi nào người dùng cuộn chuột xuống dưới để xem tiếp.
  • 0
  • 2251

Load dữ liệu từ Server trong khi cuộn chuột giống facebook


Để làm được bài này, các bạn cần chú ý chút về ajax, và jquery, cũng như một số kiến thức về webservice nhé.

Server Method: Đầu tiên là phương thức được sử dụng để lấy dữ liệu từ server, sau đó gen nó ra dạng HTML để dùng cho ajax như dưới đây

[WebMethod]
public static string GetDataFromServer() {

string resp = string.Empty;

for(int i = 0; i <= 10; i++){

      resp += "<p><span>" + counter++ + "</span> This content is dynamically appended " + "to the existing content on scrolling.</p>" ;

}

return resp;

}

Nếu bạn muốn load dữ liệu từ server thì dùng đoạn code dưới đây

load-server-01.png

Client Method: Ở phía client chúng ta sử dụng 2 thẻ div, một thẻ được đăng ký sự kiện scroll là mainDiv và một thẻ dùng để append dữ liệu tự động là wrapperDiv

load-server-02.png

Ở đây chúng ta sử lý sự kiện người dùng scroll chuột xem là scroll xuống hay lên, nếu xuống thì thực hiện gen dữ liệu ra

if($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() - $("#mainDiv").height()) && $contentLoadTriggered == false)

Bạn có thể nhìn thành quả của bạn theo 2 hình dưới đây

load-server-03.jpg

Load-data-from-server-while-scroll.jpg

Nguồn bài viết: DOTNET.VN

BÌNH LUẬN BÀI VIẾT

Bài viết mới nhất

LIKE BOX

Bài viết được xem nhiều nhất

HỌC HTML