使用 jquery 和 mvc 对繁重的文档进行分页

Question

我有一个 html 文档，但它的大小约为 5MB。

这是我的代码“../Product/index?page=1”，它生成 5MB html：

插件网址：http://andersonferminiano.com/jqueryscrollpagination/

    <script type="text/javascript">
        $(function () {
            $('#content').scrollPagination({
                'contentPage': '../Product/index?page=1',
                'contentData': {},
                'scrollTarget': $(window),
                'heightOffset': 10,
                'beforeLoad': function () {
                    $('#loading').fadeIn();
                },
                'afterLoad': function (elementsLoaded) {
                    $('#loading').fadeOut();
                    var i = 0;
                    $(elementsLoaded).fadeInWithDelay();
                    if ($('#content').children().size() > 100) {
                        $('#nomoreresults').fadeIn();
                        $('#content').stopScrollPagination();
                    }
                }
            });
            $.fn.fadeInWithDelay = function () {
                var delay = 0;
                return this.each(function () {
                    $(this).delay(delay).animate({ opacity: 1 }, 200);
                    delay += 100;
                });
            };
        });
    </script>
<!--_____________________________________________________________________-->
    @{
    // here is "Product/index" Code
    if (Request.QueryString.HasKeys())
    {
        int iPage = Request.QueryString["page"].AsInt();
        using (var db = new PNUBOOKIR.Models.KowsarSiteEntities())
        {
            var queries = from n in db.vwGood
                          select n;
            long counter = 0;
            for (int i = 1; i <= iPage; i++)
            {
                foreach (var q in queries)
                {
                    counter++;
    <li style="opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0);">
        <p>
            @counter
        </p>
    </li>           
                }
            }
        }
    }
}

我不想在滚动向下时加载它，它应该加载其他 10 个“li”元素

Answer 1

我没有模拟这么重的页面，但是我有另一种加载页面的方式。也许，它可以作为你的参考。

1. 在action端分离每个页面请求，只返回一个页面内容。
2. 将“样式”内容收集到 css 类，以减少页面内容。
3. 使用 PLINQ 提高 LINQ 的性能。

我注意到代码输出每个页面内容。

var queries = from n in db.vwGood select n;
        long counter = 0;    
for (int i = 1; i <= iPage; i++)
{
    foreach (var q in queries)
    {
        counter++;
    }
}

我建议你可以

1. 用分页功能修改 LINQ。
2. 将 LINQ 更新为 PLINQ 以提高性能。我在 db.vwGood 之后添加了 AsParallel()，我不确定是什么 db.vwGood 实例，希望这个修改可以很好。
3. 不在 Razor 视图中返回 HTML 内容，而是在操作中。

Action的伪代码如下，

// iAmount is record amount in each page.
int iAmount = 50;
// queries is only the iPage content 
// but not all of content from page one to page iPage.
var queries = (from n in db.vwGood.AsParallel() select n)
              .Skip(iPage - 1).Take(iAmount);
long counter = 0;
string strContent = string.Empty;
foreach (var q in queries)
{
    counter++;
    // Generate Cotnent here.
    strContent += @"<li class='YourClassName'><p>@counter</p></li>"
}
return Content(strContent) 

当点击 ShowMore 按钮时，会执行 ShowMore_OnClick()。

<input type="button" style="width: 100%" id="BtnShowMore" value="MORE"
    onclick="return ShowMore_OnClick();" />

这是用于加载功能的 JavaScript。 我注意到您不使用按钮来控制内容显示，而是使用滚动分页。您可以修改 JavaScript 以适应 scrollPagination 插件。代码结构的思路是一样的。

    var PageNO = 1;
    function ShowMore_OnClick() {
        var BtnShowMore = document.getElementById("BtnShowMore");
        BtnShowMore.value = "Loading...";
        jQuery.post(
            "/Home/GetHomeEventAjax/",
            { "PageNO": PageNO + 1 },
            function (data, states) {
                if (states == "success") {
                    var EventListArea = document.getElementById("EventListArea");

                    var newCommentItem = document.createElement("DIV");
                    newCommentItem.setAttribute("ID", "EventItem");
                    newCommentItem.innerHTML = data;
                    EventListArea.appendChild(newCommentItem);
                    PageNO = PageNO + 1;
                    BtnShowMore.value = "More";
                }
            }
        );
    }