滚动时加载
4.82/5 (6投票s)
以下文章将展示如何在使用户滚动时加载实时数据。
下载示例
引言
以下文章将展示如何在使用户滚动时加载实时数据。这里构建的示例应用程序使用 RESTful 服务从服务器获取实时数据，并使用 JQuery 进行 ajax 调用并加载数据。
我最近写了一篇关于 构建和测试 WCF RESTful 服务 的文章，并希望使用 ASP.Net Web API 探索 RESTful 服务。 我强烈建议您在开始阅读本文之前，先阅读以下 Hello
services webapi rest json and ajax 博客。 该博客为您提供了关于 WebAPI、JSON 和 JQuery Ajax api 的极佳介绍。
创建新的 Web 应用程序
在您的 visual studio 2010 中创建一个新的测试应用程序。
添加最新 Jquery
默认情况下，jquery-1.4.1.js 应该在 Scripts 文件夹中可用。
删除它们并使用 NuGet 包添加最新版本。右键单击 Web 应用程序项目，然后选择“管理 NuGet 包”
搜索 JQuery 并单击安装。 这会将最新的 Jquery 文件添加到脚本文件夹中。
WEB API 库
您可以使用 NuGet 界面添加最新的 WEB api 库。 搜索 WebApi 并安装最新的库。 这将确保所有库都被下载并添加到项目引用中。
LINQ to SQL
我长期以来一直喜欢 LINQ to SQL。 我只是喜欢使用它开发数据访问层的灵活性和速度。 从数据模板中添加一个“LINQ to SQL 类”。 因为我们将使用它与 Northwind 数据库通信，让我们将其命名为“NorthWind.dbml”。
使用服务器资源管理器连接到 northwind 数据库。 将 Product、Supplier 和 Category 表拖放到设计器上。
Model 类
创建模型类，这将有助于我们从服务传输数据到 UI。
public class Product
{
public int ProductID { get; set; }
public string ProductName { get; set; }
public string SupplierName { get; set; }
public string CategoryName { get; set; }
public decimal UnitPrice { get; set; }
}
REST 服务
RESTful 服务将使用 WebAPI 创建。 创建一个控制器类 ProductController.cs。 确保此类将继承 ApiController 作为父类。 只有这样，控制器才会响应请求。public class ProductController : ApiController
GetProductsByPage 方法将根据模式标志获取数据。 如果模式为 SQL，则数据将从 SQL 数据库中检索，否则将从 XML 文件返回。
方法接受 3 个输入参数 –
a. int pageSize – 将定义页面大小。 每次请求要获取的记录数。
b. int currentPage – 当前页码。
c. string mode – 数据应该从 SQL 服务器还是 XML 文件中获取。
返回：将根据页面大小和当前页面返回增量产品。
public List<model.product> GetProductsByPage(int pageSize, int currentPage, string mode)
{
List<model.product> products = new List<model.product>();
if (string.Equals("XML", mode, StringComparison.OrdinalIgnoreCase)) //if XML
{
string xmlPath = HttpContext.Current.Server.MapPath(@"/Data/Product.xml");
XElement xml = XElement.Load(xmlPath);
products = xml.Descendants("Product")
.Select(e => new Model.Product
{
ProductID = Convert.ToInt32(e.Descendants("ProductID").FirstOrDefault().Value),
ProductName = e.Descendants("ProductName").FirstOrDefault().Value,
SupplierName = e.Descendants("SupplierName").FirstOrDefault().Value,
CategoryName = e.Descendants("CategoryName").FirstOrDefault().Value,
UnitPrice = Convert.ToDecimal(e.Descendants("UnitPrice").FirstOrDefault().Value)
}).Skip(pageSize * currentPage).Take(pageSize).ToList();
}
else //if SQL
{
products = (from e in _context.Products
select new Model.Product
{
ProductID = e.ProductID,
ProductName = e.ProductName,
SupplierName = e.Supplier.CompanyName,
CategoryName = e.Category.CategoryName,
UnitPrice = Convert.ToDecimal(e.UnitPrice)
}).Skip(pageSize * currentPage).Take(pageSize).ToList();
}
return products;
}
</model.product>
路由
您将需要设置路由，以便将请求映射到此控制器。 这在 Global.asax 文件的 Application_Start 方法中完成。 void Application_Start(object sender, EventArgs e)
{
// Code that runs on application startup
RouteTable.Routes.MapHttpRoute(name: "Default",
routeTemplate: "api/{controller}/{pageSize}/{currentPage}/{mode}",
defaults: new
{
pageSize = System.Web.Http.RouteParameter.Optional,
currentPage = System.Web.Http.RouteParameter.Optional,
mode = System.Web.Http.RouteParameter.Optional,
}
);
}
UI 代码
以下部分将详细介绍如何使用 Jquery 在滚动时获取数据并将其绑定到 UI。 添加一个 sample .aspx 页面。
添加对 JQuery 库的引用。
<script src="Scripts/jquery-1.7.2.min.js" type="text/javascript"></script>
Html 表格以显示产品信息。
<table id="productstable">
<tr class="row-template">
<th class="row-column">
Product Name
</th>
<th class="row-column">
Product Category
</th>
<th class="row-column">
Supplier Name
</th>
<th class="row-column">
Unit Price
</th>
</tr>
</table>
Div 元素以显示状态信息
<div id="loader_msg">
Loading results......
</div>
以下块将用作模板。 <div id="templates" style="display: none">
<table>
<tr class="row-template">
<td class="ProductName" style="width: 100px;"></td>
<td class="ProductCategory" style="width: 100px;"></td>
<td class="SupplierName" style="width: 100px;"></td>
<td class="UnitPrice" style="width: 100px;"></td>
</tr>
</table>
</div>
JQuery 代码
$(document).ready() 将在所有 DOM 元素都加载到浏览器中后被调用。 默认情况下，我已将 pageSize=20 和 CurrentPage=0 设置为 0。 一旦文档就绪，AddProducts() 函数将被调用，该函数将从服务器获取数据并将其附加到 html 表格中。
我们已经使用 $(window).scroll() 事件绑定了一个函数。 每次用户滚动窗口时都会触发此事件。 当滚动到达窗口的末尾时，AddProducts() 函数将根据页面大小和当前页面获取下一组产品。
var pageSize = 20;
var currentPage = 0;
var $productstable = null;
$(document).ready(function () {
$productstable = $("#productstable");
AddProducts(pageSize, currentPage);
$(window).scroll(function () {
if ($(window).scrollTop() == $(document).height() - $(window).height()) {
$('#loader_msg').html('Loading more results......');
currentPage = currentPage + 1;
AddProducts(pageSize, currentPage);
}
});
});
AddProducts 函数将对 RESTful 服务进行 ajax 调用。 一旦收到数据，它会循环遍历产品列表以创建新行并将其附加到产品表中。
function AddProducts(pageSize, currentPage) {
var url = "api/product/" + pageSize + "/" + currentPage + "/SQL"
$.ajax({
url: url,
contentType: "json",
success: function (data) {
if (data.length > 0) {
$.each(data, function (index, item) {
var $row = $("#templates").find(".row-template").clone();
$row.find(".ProductName").html(item.ProductName);
$row.find(".ProductCategory").html(item.CategoryName);
$row.find(".SupplierName").html(item.SupplierName);
$row.find(".UnitPrice").html(item.UnitPrice);
//Change the style for even rows
if (index % 2 == 0) {
$row.addClass("jtable-row-even")
}
$productstable.append($row);
});
}
else {
$('#loader_msg').html('All Results Loaded......');
}
}
});
}
示例代码
ProductsDisplaySQL.aspx：从 Northwind 数据库中获取数据。 确保，您更改 web.Config 中的数据库连接字符串以使其生效。
ProductsDisplayXML.aspx：从 Data 文件夹中的 Product.xml 文件中获取数据。
结论
我试图涵盖“滚动时加载数据”的最基本实现。 可能有多种更好的方法来做到这一点，并且很乐意听到您的意见。
参考文献
http://www.kendoui.com/blogs/teamblog/posts/12-05-11/hello_services_webapi_rest_json_and_ajax.aspx
http://www.9lessons.info/2009/07/load-data-while-scroll-with-jquery-php.html