Để 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
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
Ở đâ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