ASP.NET MVC3 利用滾動條加載數據

　　滾動條加載數據是當前比較流行的分頁方式。

　　操作方式：根據滾動條的當前位置來加載更多的數據。

　　主要有2種形式。

　　1：邊滾動邊加載數據，一開始把容器的高度計算好，當滾動條移動到空白位置時加載更多的數據。類似於 http://qing.blog.sina.com.cn/tag/%E6%97%B6%E5%B0%9A

　　2：滾動到底部加載數據，當滾動條移動到底部時加載更多的數據。類似於“百度圖片”的效果。

　　它的優點：可以利用滾輪進行分頁，而不需要點擊按鈕，方便用戶快速地瀏覽完整的信息，不用經常點擊分頁按鈕。在手機端的效果特別明顯。

　　它的缺點：對於想快速查看某些數據時不是很方便，假如用戶想查看靠后的數據時，需要先加載前面的所有數據才能找到想要的數據。

　　

　　實現方式：利用 ASP.NET MVC + Jquery 框架比較容易實現這種效果（由於本人最近都沒有使用 WEBFORM ，比較生疏，就不拿出來獻丑）

　　

　　已滾動到底部加載數據為例子說明，這個實現起來比較容易。　　

　　html 部分，div : Container 控制滾動條的容器，div : DataList 加載數據的容器。 Container 需要 加上 height: 420px;overflow-y: auto; 樣式

　　JS 部分，主要是針對 Container容器的滾動條進行操作，判斷是否去掉底部。
可使用 $("#Container")[0].scrollTop + $("#Container").height() >= $("#Container")[0].scrollHeight - 10，關於這幾個屬性的詳細說明請自行在網絡上查看，
需要說明的是  -10 主要是為了兼容chrome 瀏覽器，不同瀏覽器對滾動條的屬性解析會不同，如果列表樣式過於復雜，需要反復調試。　　　　

function Add_Data() {
    var scrollTop = $("#Container")[0].scrollTop;
    if (!complete && loaded) {
        if (scrollTop + $("#Container").height() >= $("#Container")[0].scrollHeight) {
            getData();
        }

    }
}

function getData() {
    loaded = false;
    $.ajax({
        url: '@Url.Action("MainListPanel", "Home")',
        type: 'POST',
        data: {
            createTime: maxTime,
            skipCount: skipCount,
            takeCount: takeCount
        },
        dataType: 'html',
        timeout: 10000,
        error: function () { alert('Error loading'); },
        beforeSend: function () {
            //$("#DataList").append("<img class='loading' src='../../Content/ajaxloading.gif' />");
            $("#box").show();
        },
        success: function (result) {
            loaded = true;
            $("#box").hide();
            //$(".loading").remove();
            $("#DataList").append(result);
            count++;
        }
    });            
}

　　服務器端 部分，主要是利用 linq 強大的 OrderByDescending，skip 和 take 方法，把已經加載過的數據過濾掉。

 下載源碼