使用异步controller与jQuery实现卷帘式分页

今天很多网站与数据库交互。如果您的网站接收大量的流量,SQL查询来检索数据,是相当激烈的。更重要的是因为普通用户点击一个在15秒内到达您的网站的链接, 检索和生成内容的工作可能是不必要的,尤其是当内容是“地域折叠”(不滚动是不可见的)。为了帮助解决这个问题,内容将被“按需”载入。足够的内容将被载入,使页面感觉起来是随用户向下滚动阅读递增的,更多的内容将在不影响用户体验的场景下填充。

解决方案

使用异步controller与jQuery按需加载内容,当用户开始通过网站的内容滚动时进一步加载内容。

讨论

异步controller可能在许多MVC应用中未充分利用。最有可能的是因为人们不知道他们,更重要的是,不知道何时使用它们。以下是摘录见MSDN网站:

“在应用中,线程饥饿可能会发生,您可以配置action 异步处理。异步请求和同步请求过程需要相同的时间例如,如果一个请求,使得网络调用需要两秒钟来完成的,请求需要两秒钟,无论是执行同步或异步。然而,在一个异步调用,当服务器响应等待它的第一次请求时完成时他响应其他的请求没有被阻塞。因此,当有许多请求调用长时间运行的操作时,异步请求会防止请求排队。“

在这个例子里,异步请求是完美的解决方案。因为他会让IIS服务器有能力去处理更多重要的请求,比如一个新的用户第一次访问网站。其中,加载用户点播内容是不太重要,因为大多数人甚至不关注被加载额外的内容。在一个典型的社交网站,大多数活动可能包含用户的意见。在以前的秘方中,创建了一个评论的功能。

在这个例子中,将更新网站的网页,列出最近的评论。足够的评论会被显示,所以会出现滚动条。一旦用户开始滚动,一个Ajax请求异步controller将检索其他评论。

首先Home/Index view 需要更新去显示最近的评论。为了提供一些评论的上下文内容,关于书的基础详情也将被显示为导航到图书的链接。所以这个view将简单的调用view 中的render function会在下边创建:

@model IEnumerable<MvcApplication.Models.BookComment> @{ ViewBag.Title = "Home Page"; } <h2>@ViewBag.Message</h2> <p> To learn more about ASP.NET MVC visit <a href="https://asp.net/mvc" title="ASP.NET MVC Website"> </a>. </p> <script type="text/javascript"> var lastY = 0; var currentY = 0; var page = 1; var maxPages = @ViewBag.maxPages; $(window).scroll(function () { if (page < maxPages) { currentY = $(window).scrollTop(); if (currentY - lastY > 200 * (page - 1)) { lastY = currentY; page++; $.get('CommentFeed/Comments?page=' + page, function(data) { $('#comments').append(data); }); } } }); </script> <div> <h2> Recent Comments</h2> @Html.Partial("../CommentFeed/Comments", Model) </div>

在上面的例子,执行滚动窗口时也有一些比较复杂的JavaScript代码会执行。一些全局JavaScript变量被定义去保持监控当前的“Y”滚动的位置,最后的“Y”滚动位置和当前被检索的页面。当窗口的scrollTop位置减去最后的滚动位置是大于一个具体的数字,通过Ajax检索新书评论并附加到评论列表。

你将根据你自己的网站去根据矫正那个具体的数字,基于内容的高度,要确保新的内容总是要提前检索。

下一步,HomeController需要更新检索图书评论列表。 评论在降序排序,以确保最新的创建日期评论首先显示。为了防止激烈的数据库负载,全部评论将减少到一个小数目。这应该根据你的网站去调节,以确保有足够的内容,导致滚动。在下面的例子,建议被限制在3。分页的最大数也取决于评论总数于除以3。一旦最大的评论数已经返回,最大分页数是用来防止进一步的Ajax调用。

using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Globalization; using System.Data.Entity; using MvcApplication.Models; namespace MvcApplication.Controllers { public class HomeController : Controller { private BookDBContext db = new BookDBContext(); public ActionResult Index() { ViewBag.Message = "Welcome to ASP.NET MVC!"; // Get our recent comments var bookcomments = db.BookComments.Include(b => b.Book).OrderByDescending(b => b.Created).Take(3); var count = db.BookComments.Count(); ViewBag.maxPages = count / 3 + 1; return View(bookcomments); } public ActionResult ChangeLanguage(string language) { Session["CurrentLanguage"] = new CultureInfo(language); return Redirect("Index"); } public ActionResult About() { return View(); } public ActionResult MobileTest() { return View(); } public ActionResult MobileTest2() { return View(); } } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/77da55bee866b8d424eaff819af5deae.html