使用jquery和mvc分页重文档

Question

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

这里是我的代码” ../Product/index?page=1" 它生成HTML 5MB：

插件网址：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个其他“李”元素

Answer 1

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

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 View中返回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_OnClick（）被performanced。

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

这是JavaScript的加载功能。 我注意到你不使用按钮来控制内容显示，但scrollPagination。您可以修改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"; 
       } 
      } 
     ); 
    }