javascript - .NET Core中如何使用ajax返回ViewComponent列表进行分页？

Question

我有一个显示视频缩略图列表的 .NET Core 网页。在此页面上，我有一个“加载更多”按钮，它使用 ajax 来查询并返回要附加到页面的新缩略图列表。

我熟悉以下从我的 Controller 请求单个 View 组件的方法:

function getVideo() {
$.ajax({
    method: "GET",
    url: `api/videos`
}).done(function (response) {
    //response contains a video object
    //using .get() I can hit my server to return a view component for that specific video
    $.get(`/Video/LoadVideoViewComponent/${response.id}`, function (data) {
        //add the components to my html
        $('#video-list').prepend(data);
    });
})
}

这是LoadVideoViewComponent的 Controller

public async Task<IActionResult> LoadVideoViewComponent(int id)
{
    var video = await _db.Videos.FindAsync(id);

    return ViewComponent("Video", video);
}

好的，太好了，我已将一个视频附加到我的页面，但是如果我的 api 端点 api/videos 返回多个视频怎么办？如何返回多个 ViewComponents 并将它们附加到我的页面？我能想到的唯一方法是循环 $.get()，但这会导致服务器点击量过高。有没有办法使用ajax为我的分页方法返回 View 组件的列表？谢谢!

Answer 1

制作新组件返回所有视频并在视频 View 中循环播放视频。

public async Task<IActionResult> LoadVideosViewComponent()
{
    var videos = await _db.Videos;

    return ViewComponent("Videos", videos);
}

现在您可以调用一个电话。

function getVideos() {
$.get(`/Video/LoadVideosViewComponent/`, function (data) {
        $('#video-list').prepend(data);
    });
}

这是您要找的吗？