在现代Web应用程序中，为了提高用户体验和减少初次加载时间，经常需要实现一种机制，允许用户在浏览产品列表时动态加载更多产品。这种机制通常被称为“加载更多”功能。本文将介绍如何在ASP.NET MVC应用程序中实现这一功能，使用C#和JavaScript技术。
在后端，需要创建一个控制器动作来处理加载更多产品的请求。这个动作将根据请求中的参数来决定加载哪些产品，并返回这些产品的HTML表示。以下是实现这一功能的C#代码示例：
[
HttpPost
]
[AllowAnonymous]
public JsonResult LoadMoreProduct(int size)
{
var model = _db.Products.OrderBy(p => p.ProductId).Skip(size).Take(4);
int modelCount = _db.Products.Count();
if (model.Any())
{
string modelString = RenderRazorViewToString("_LoadMoreProduct", model);
return Json(new { ModelString = modelString, ModelCount = modelCount });
}
return Json(model);
}
在这段代码中，size参数用于确定从数据库中跳过多少产品。每次用户点击“加载更多”按钮时，都会计算点击次数，将其乘以想要返回的产品数量（在这个例子中是4），然后将这个值传递给该方法以获取新的产品集。
RenderRazorViewToString方法负责将一个部分视图和模型渲染成HTML字符串。以下是该方法的定义：
public string RenderRazorViewToString(string viewName, object model)
{
ViewData.Model = model;
using (var sw = new StringWriter())
{
var viewResult = ViewEngines.Engines.FindPartialView(ControllerContext, viewName);
var viewContext = new ViewContext(ControllerContext, viewResult.View, ViewData, TempData, sw);
viewResult.View.Render(viewContext, sw);
viewResult.ViewEngine.ReleaseView(ControllerContext, viewResult.View);
return sw.GetStringBuilder().ToString();
}
}
这个方法使用StringWriter来捕获视图渲染的结果，并将其转换为字符串。
在前端，需要编写JavaScript代码来处理用户的点击事件，并根据后端返回的数据动态更新DOM。以下是实现这一功能的JavaScript代码示例：
$(function() {
var loadCount = 1;
var loading = $("#loading");
$("#loadMore").on("click", function(e) {
e.preventDefault();
$(document).on({
ajaxStart: function() {
loading.show();
},
ajaxStop: function() {
loading.hide();
}
});
var url = "/Product/LoadMoreProduct/";
$.ajax({
url: url,
data: { size: loadCount * 4 },
cache: false,
type: "POST",
success: function(data) {
if (data.length !== 0) {
$(data.ModelString).insertBefore("#loadMore").hide().fadeIn(2000);
}
var ajaxModelCount = data.ModelCount - (loadCount * 4);
if (ajaxModelCount <= 0) {
$("#loadMore").hide().fadeOut(2000);
}
},
error: function(xhr, status, error) {
console.log(xhr.responseText);
alert("message : \n" + xhr.responseText + "\n status : \n" + status + "\n error : \n" + error);
}
});
loadCount = loadCount + 1;
});
});
在这段代码中，首先定义了一个loadCount变量，用于跟踪用户点击“加载更多”按钮的次数。然后，使用AJAX请求向后端发送请求，并根据返回的数据更新DOM。如果返回的数据不为空，将这些数据插入到DOM中，并使用淡入效果显示出来。如果返回的产品数量小于或等于0，将隐藏“加载更多”按钮。
为了确定何时隐藏“加载更多”按钮，使用以下代码：
var ajaxModelCount = data.ModelCount - (loadCount * 4);
if (ajaxModelCount <= 0) {
$("#loadMore").hide().fadeOut(2000);
}