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

本文关键字：文档 分页 jquery MVC 使用 | 更新日期: 2023-09-27 17:56:23

我有一个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"元素

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

我不模拟如此繁重的页面，但我有另一种加载页面的方法。也许，它可以成为您的参考。

  1. 在操作端分隔每个页面请求，并仅返回一个页面内容。
  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 内容，而是在操作中返回。

伪操作代码如下，

// 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_OnClick（）。

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

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

    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";
                }
            }
        );
    }
相关文章：