在现代的Web应用程序中，性能优化是一个重要的议题。其中一种常见的优化技术是实现滚动加载功能，即当用户滚动页面时，动态地从服务器加载数据。这种技术可以显著提高用户体验，因为它减少了初次加载的数据量，并且只在需要时才加载更多数据。
Facebook是启发实现滚动加载功能的应用程序。当浏览Facebook时，惊讶地发现，每当滚动页面，页面就会从服务器动态地追加新数据。这激发了对在C#中实现相同功能的兴趣。尽管搜索了很多资料，但并没有找到任何关于如何在C#中实现这一功能的文章或博客。当然，有一些关于Java和PHP的文章。仔细阅读了这些文章，并开始用C#编写代码。当它成功工作时，认为应该分享它，所以在这里发布它。
要实现滚动加载功能，需要很少的代码。一个从客户端调用的WebMethod，它返回在滚动时追加的内容，以及一个客户端函数（document.ready），将在这里绑定滚动事件以从服务器加载数据。让详细看看这些服务器端和客户端方法。
这个方法用于从数据库或任何来源获取数据，并根据用于追加数据的控件准备一个HTML字符串。这里只是添加了一个带有序列号的消息。
[WebMethod]
public static string GetDataFromServer()
{
string resp = string.Empty;
for (int i = 0; i <= 10; i++)
{
resp +=
"<p><span>" + counter++ + "</span> This content is dynamically appended " +
"to the existing content on scrolling.</p>";
}
return resp;
}
如果想从数据库加载数据，可以按照以下方式修改方法：
[WebMethod]
public static string GetDataFromServer()
{
DataSet ds = new DataSet();
// Set value of connection string here
string strConnectionString = "";
// Insert your connection string value here
SqlConnection con = new SqlConnection(strConnectionString);
// Write the select command value as first parameter
SqlCommand command = new SqlCommand("SELECT * FROM Person", con);
SqlDataAdapter adp = new SqlDataAdapter(command);
int retVal = adp.Fill(ds);
string resp = string.Empty;
for (int i = 1; i <= ds.Tables[0].Rows.Count; i++)
{
string strComment = string.Empty;
if (ds.Tables != null)
{
if (ds.Tables[0] != null)
{
if (ds.Tables[0].Rows.Count > 0)
{
if (ds.Tables[0].Rows.Count >= i - 1)
{
if (ds.Tables[0].Rows[i - 1][0] != DBNull.Value)
{
strComment = ds.Tables[0].Rows[i - 1][0].ToString();
}
}
}
}
}
resp +=
"<p><span>" + counter++ + "</span> " + strComment +
"</p>";
}
return resp;
}
在客户端，使用了document.ready方法，在其中为div注册了滚动事件绑定。使用了两个div元素：mainDiv和wrapperDiv。为mainDiv注册了滚动事件，并将动态数据追加到wrapperDiv。
$(document).ready(function() {
$contentLoadTriggered = false;
$("#mainDiv").scroll(function() {
if ($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() - $("#mainDiv").height()) &&
$contentLoadTriggered == false)
{
$contentLoadTriggered = true;
$.ajax({
type: "POST",
url: "LoadOnScroll.aspx/GetDataFromServer",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json",
async: true,
cache: false,
success: function(msg) {
$("#wrapperDiv").append(msg.d);
$contentLoadTriggered = false;
},
error: function(x, e) {
alert("The call to the server side failed. " + x.responseText);
}
});
}
});
});
在这里，为了检查滚动条是否移动到了底部，使用了以下条件。
if ($("#mainDiv").scrollTop() >= ($("#wrapperDiv").height() - $("#mainDiv").height()) &&
$contentLoadTriggered == false)
这个条件将确定滚动条是否移动到了底部。如果它移动到了底部，动态数据将从服务器加载并追加到wrapperDiv。将数据追加到所需的div元素的客户端脚本是在异步调用成功时运行的脚本。
success: function(msg) {
$("#wrapperDiv").append(msg.d);
$contentLoadTriggered = false;
}
会注意到，只有在用户滚动到底部时，请求才会发送到服务器。