怎么使用异步controller与jQuery实现卷帘式分页-创新互联

@model IEnumerable
@{
ViewBag.Title = "Home Page";
}
@ViewBag.Message

To learn more about ASP.NET MVC visit 
http://asp.net/mvc.


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);
});
}
}
});



Recent Comments
@Html.Partial("../CommentFeed/Comments", Model)

在上面的例子，执行滚动窗口时也有一些比较复杂的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();
}
}
}

同样的功能需要被复制到一个新的异步controller。控制器文件夹选中，右键单击并选择“添加→控制器。新
控制器将被命名为CommentFeedController。该控制器不需要脚手架模板功能，下拉，选择空
控制器，然后按添加。

这个控制器会看起来与一个典型的控制器稍有不同。使用异步控制器，一个view将分成两个函数。第一个函数执行的异步
请求（例如，检索的view）。第二个函数接收结果，异步调用和返回或显示的结果。

提示：在下面的例子，呈现局部视图。在某些应用中，它可能是有益的，以减少网络流量，返回一个JSON结果，让JavaScript代码处理与显示。但是，要简化这个例子，重点放在异步控制器，前者将用于返回一个partial view。

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MvcApplication.Models;
using System.Data.Entity;
namespace MvcApplication.Controllers
{
public class CommentFeedController : AsyncController
{
private BookDBContext db = new BookDBContext();
public void CommentsAsync(int page)
{
AsyncManager.OutstandingOperations.Increment();
AsyncManager.Sync(() =>
{
var bookcomments = db.BookComments.Include(
b => b.Book).OrderByDescending(b =>
b.Created).Skip(page * 3).Take(3);
AsyncManager.Parameters["bookcomments"] =
bookcomments;
AsyncManager.OutstandingOperations.Decrement();
});
}
public ActionResult CommentsCompleted(
IEnumerable bookcomments)
{
return PartialView(bookcomments);
}
}
}

第一个 函数，CommentsAsync，接收从javascript传入的当前页面，并且用这个值去检索接下来的三个评论。然后通过异步方法，检索评论并且传递一个变量到第二个函数。最终的事是执行AsyncManager.OutstandingOperations.Decrement()方法。OutstandingOperations（未解决操作）的increment（递增）和decrement（递减）的匹配是很重要的。否则，当他们不匹配时，sync manager 将取消请求，这可以组织永不休止的请求。

第二个函数接收book comments 并且返回一个partial view。这和Home/Index view一样。在这个过程的最后一个步骤是创建partial view。右击文件夹，添加新文件夹。这个文件夹应该命名为CommentFeed去匹配controller的名字。选择这个文件夹，右击，点Add→View 命名为Comments-----在添加它之前确定去检查Partial view。

@model IEnumerable
@foreach (var item in Model) {

@Html.DisplayFor(modelItem => item.Book.Title)

Comment Posted: @Html.DisplayFor(
modelItem => item.Created)
@MvcHtmlString.Create(Html.Encode(item.Comment).Replace(
Environment.NewLine, ""))
}

上边的view遍历comments，并首先显示书的标题和详细信息页面的链接，然后创建评论的日期，最后创建comment本身。由于View里可能包含换行符，用
替代每个Evironment.NewLine去匹配评论输入间距。

jquery是一个简洁而快速的JavaScript库，它具有独特的链式语法和短小清晰的多功能接口、高效灵活的css选择器，并且可对CSS选择器进行扩展、拥有便捷的插件扩展机制和丰富的插件，是继Prototype之后又一个优秀的JavaScript代码库，能够用于简化事件处理、HTML文档遍历、Ajax交互和动画，以便快速开发网站。

感谢你能够认真阅读完这篇文章，希望小编分享的“怎么使用异步controller与jQuery实现卷帘式分页”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!