基于HTML Partial实现商品列表无限加载的技术求助

你的核心问题有两个：一是客户端JS里错误地使用了服务器端Razor语法，二是后端接口没有返回仅商品部分的HTML片段。咱们一步步来修正：

1. 前端JS的错误修正 #

你当前代码里的var partial = "@Html.Partial('_ProductWithHover')";完全无效——因为@Html.Partial是服务器端Razor渲染语法，页面加载完成后，这个变量只会是当前页初始渲染的商品HTML，根本不会动态获取下一页的内容。而且你AJAX请求回来的data（也就是下一页的响应）完全没用到，这才是关键！

修正后的前端代码如下：

$(".page-next a").on("click", function (e) {
    e.preventDefault();
    const $nextBtn = $(this);
    const url = $nextBtn.data('url');

    // 添加加载状态，防止重复点击
    $nextBtn.addClass('loading').attr('disabled', true);

    $.ajax({
        url: url,
        method: 'GET',
        dataType: 'html',
        success: function (data) {
            // 直接把AJAX返回的商品片段追加到容器
            $('#js-infinite-scroll-page').append(data);

            // 更新下一页链接（如果还有下一页）
            const newNextLink = $(data).find('.page-next a');
            if (newNextLink.length) {
                $(".page-next").html(newNextLink);
            } else {
                // 没有下一页了，隐藏分页按钮
                $(".page-next").hide();
            }
        },
        complete: function () {
            // 不管请求成功失败，都恢复按钮状态
            $nextBtn.removeClass('loading').attr('disabled', false);
        }
    });
});

2. 后端接口改造（关键！） #

现在前端能正确请求下一页了，但如果后端依然返回完整的HTML页面，你追加的还是整个页面（包含导航、页脚等）。所以必须让后端区分AJAX请求和普通请求，AJAX请求时只返回商品列表的Partial视图。

以ASP.NET MVC为例： #

public ActionResult ProductList(int page = 1)
{
    // 分页获取商品数据
    var productList = _productRepository.GetProducts(page, pageSize: 12);

    // 判断是否是AJAX请求
    if (Request.IsAjaxRequest())
    {
        // 仅返回商品Partial视图
        return PartialView("_ProductWithHover", productList);
    }

    // 普通请求返回完整页面
    return View(productList);
}

如果你用的是ASP.NET Core： #

Request.IsAjaxRequest()已经被移除，需要手动检查请求头：

public IActionResult ProductList(int page = 1)
{
    var productList = _productRepository.GetProducts(page, pageSize: 12);

    bool isAjaxRequest = Request.Headers["X-Requested-With"] == "XMLHttpRequest";
    if (isAjaxRequest)
    {
        return PartialView("_ProductWithHover", productList);
    }

    return View(productList);
}

额外注意点 #

• 确保你的分页链接data-url指向的是正确的分页接口（比如/ProductList?page=2），而不是完整页面的URL。
• 你的_ProductWithHover Partial视图里只能包含商品列表的HTML，不要有布局页的内容（比如<html>、<head>标签），否则追加后会破坏页面结构。

内容的提问来源于stack exchange，提问作者Danzel