Как использовать ajax, чтобы вернуть список ViewComponents в. NET Ядро для разбивки на страницы?

Question

У меня есть. NET Основная веб-страница, которая отображает список миниатюр видео. На этой странице у меня есть кнопка «Загрузить еще», которая использует ajax для запроса и возврата списка новых миниатюр для добавления на страницу.

Я знаком со следующим методом запроса одного компонента просмотра с моего контроллера:

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

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

    return ViewComponent("Video", video);
}

Хорошо, отлично, я добавил одно видео на мою страницу , но что, если моя конечная точка API api/videos вернет несколько видео? Как мне вернуть несколько ViewComponents и добавить их на мою страницу? Единственный способ, который я могу придумать, - это l oop вместо $.get(), но это приведет к абсурдному количеству попаданий на сервер. Есть ли способ вернуть список компонентов вида, используя ajax для моего метода нумерации страниц? Спасибо!

Answer 1

Создание нового компонента, возвращающего все видео, и l oop для видео в режиме просмотра видео.

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);
    });
}

Это то, что вы ищете?