在本文中，将探讨如何利用ASP.NET Web API创建RESTful服务，并通过JQuery实现AJAX调用，以实现在用户滚动页面时动态加载数据的功能。
首先，需要创建一个新的Web应用程序。在Visual Studio中，创建一个新的测试应用程序，并添加最新版本的JQuery。通过NuGet包管理器，可以轻松地添加最新版本的JQuery库。
接下来，需要添加Web API库。通过NuGet界面，搜索并安装WebApi库，以确保所有必要的库都被下载并添加到项目引用中。
LINQ to SQL是一个强大的数据访问工具，它允许以灵活和快速的方式开发数据访问层。将添加一个名为“NorthWind.dbml”的LINQ to SQL类，用于与Northwind数据库进行通信。
为了实现数据的传输，需要创建一个模型类。这个模型类将帮助将数据从服务传输到用户界面。
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; }
}
RESTful服务将使用WebAPI创建。需要创建一个名为ProductController.cs的控制器类，并确保它继承自ApiController基类。这样，控制器才能响应请求。
将实现一个名为GetProductsByPage的方法，该方法将根据模式标志获取数据。如果模式是SQL，则数据将从SQL数据库中检索；否则，将从XML文件中返回。
public List<Product> GetProductsByPage(int pageSize, int currentPage, string mode)
{
List<Product> products = new List<Product>();
if (string.Equals("XML", mode, StringComparison.OrdinalIgnoreCase))
{
string xmlPath = HttpContext.Current.Server.MapPath(@"/Data/Product.xml");
XElement xml = XElement.Load(xmlPath);
products = xml.Descendants("Product")
.Select(e => new 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
{
products = (from e in _context.Products
select new 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;
}
为了确保请求映射到这个控制器，需要在Global.asax文件的Application_Start方法中设置路由。
void Application_Start(object sender, EventArgs e)
{
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。需要添加一个示例.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代码将在文档加载完成后被调用。默认情况下，设置了pageSize=20和CurrentPage=0。一旦文档准备就绪，AddProducts()函数将被调用，该函数将从服务器获取数据并将其追加到HTML表格中。
$(document).ready(function () {
var pageSize = 20;
var currentPage = 0;
var $productstable = null;
$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);
}
});
});
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文件获取数据。