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# và 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.aspx và thiết kế HTML như sau
1 2 3 4 5 6 | <form id="form1" runat="server"> <asp:HiddenField runat="server" ID="hdf_page_index" /> <div id="divNews" style="width:700px; margin:auto;border-left:1px solid #CCCCCC;border-right:1px solid #CCCCCC;"> </div> </form> |
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 đã.
1 2 | <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script> <script type="text/javascript" src="Scripts/CommonFunctions.js"></script> |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | $(function () { doLoadingMore($("#divNews"), 1); $(document).unbind("scroll"); var lastScrollTop = 0; $(document).scroll(function (event) { var st = $(this).scrollTop(); if (st > lastScrollTop) { if (st >= ($(document).height() - $(window).height())) { doLoadingMore($("#divNews"), 0); } else { //donothing } lastScrollTop = st; } }); }); |
Trong đó:
- #divNews là thẻ div dùng để bind dữ liệu
- hàm doLoadingMore như sau:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 | function doLoadingMore(that, actiontype) { var $that = $(that); if ($that.data("ajax") == true) return; var hdfPageIndex = $("#<%=hdf_page_index.ClientID %>"); var pageIndex = parseInt($(hdfPageIndex).val()); if (actiontype == 1) { pageIndex = 1; $(hdfPageIndex).val("1"); } else { pageIndex = parseInt(pageIndex) + 1; } var data = "{'pageIndex':'" + pageIndex + "'}"; LoadingAjax("jQueryShowMore.aspx/FetchNews", data, //Before send function () { $that.ShowLoadingImange(); $that.data("ajax", true); }, //On success function (dt) { $("#divNews").append(dt.d); if (data.data != '') { $(hdfPageIndex).val(pageIndex); } $that.data("ajax", false); $that.find(".indicator").remove(); }, //On error function () { $that.data("ajax", false); $that.find(".indicator").remove(); } ); } |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | var base_ajax_timeout = 120000; function LoadingAjax(url, datapost, beforesend, onsuccess, onerror) { $.ajax({ url: url, data: datapost, dataType: 'json', contentType: 'application/json; charset=utf-8', type: 'POST', async: true, timeout: base_ajax_timeout, beforeSend: function () { beforesend(); }, success: function (data) { if (data.d != null) { onsuccess(data); } }, error: function () { onerror(); } }); } |
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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | $.fn.extend({ ShowLoadingImange: function () { var img = $(this); $(this).css({ "position": "relative" }); var indicator = $("<div>").addClass("indicator").css({ width: img.width(), height: img.height(), backgroundColor: "#ffffff", opacity: 0.3, display: "block", position: "absolute", top: 0, 'z-index': 9999 }).append($("<img>", { src: "Images/indicator.gif" }).css({ position: "fixed", top: $(window).innerHeight() / 2, left: $(window).innerHeight() / 2 + 300 })); return $(this).append(indicator); } }); |
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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | [System.Web.Services.WebMethod] public static string FetchNews(int pageIndex) { var sbToReturn = new StringBuilder(); var lstFetchSocialNews = lstSocialNewsRepository.Skip((pageIndex - 1) * PageSize).Take(PageSize).ToList(); //Server delay to see loading image System.Threading.Thread.Sleep(1200); foreach (var item in lstFetchSocialNews) { string imagePath = (item.ImagePath != "") ? "<tr> <td><img src='{3}' id='imageContent'/></td></tr>" : "{3}"; sbToReturn.AppendFormat("<div id='container'>" + "<table>" + "<tr>" + "<td rowspan='4' valign='top'>" + "<img src='{0}' id='avatar'/>" + "</td>" + "<td id='owner'>" + "<b>{1}<b>" + "</td>" + "</tr>" + "<tr>" + "<td id='contentText'>" + "{2}" + "</td>" + "</tr>" + imagePath + "<tr>" + "<td style='font-size:0.8em;'> <a href='#'>Like . </a><a href='#'>Comment . </a><a href='#'>Share </a>" + "<span id='postedDate'>{4}</span>" + "</td>" + "</tr>" + "</table>" + "</div>", item.AvatarPath, item.Owner, item.ContentText, item.ImagePath, item.PostedDate); } return sbToReturn.ToString(); } |
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!
You must log in to post a comment.