Question

我有下一个代码：

@foreach (var offer in Model.Packages)
{
    @Html.Partial("Search/PackageOffer", new Primera.Site.WebUI.Models.ViewModels.Search.PackageOfferViewModel
    {
        Package = offer,
        DisplayPricePerPerson = Model.DisplayPricePerPerson,
        RoomsCount = Model.RoomsCount
    })
}

我需要使用js实现无限滚动。如何在js上调用渲染局部视图并在其上传递参数？

Answer 1

作为一个非常基本的演示，您想要一个Partial View，它向您返回某种html。就我而言，这只是根据提交的数字得出的接下来的10个数字：

C-x 2

在现实世界中，这将是下一个n个实体-博客，订单项，评论。

对此的看法也很简单：

public IActionResult _InfiniteNumbers(int lastId)
{
    var Ids = Enumerable.Range(lastId, 10);
    return PartialView(Ids);
}

它只是将每个数字呈现为一个列表项。

然后我的主视图如下：

@model IEnumerable<int>

@foreach (var number in Model)
{
    <li data-number="@number">@number</li>
}

我们有一个<h1>InfiniteNumbers</h1> <ul id="partial-view-container"> </ul> <input id="btnLoadMore" type="button" name="loadMore" value="Load More numbers" /> @section scripts { <script> $(document).ready(() => { $("#btnLoadMore").click(() => { //the trigger var ul = $("#partial-view-container"); //our container for all partial views let lastId = 0; //the lastId displayed let lastLi = $("#partial-view-container li:last-child"); //find the last number if (lastLi.length !== 0) { lastId = lastLi.attr("data-number"); //if we found something set the value //lastId = +lastLi.data("number"); } $.get(`/Home/_InfiniteNumbers?lastId=${lastId}`) //call our action method .then((res) => { ul.append(res); //append the html to the container }); }); }); </script> }元素用作无限加载的容器。由于我很懒，所以我使用按钮作为触发器。在更复杂的情况下，这将是一个事件，等待滚动条到达页面底部或类似内容。我把这个留给你。

然后，我们在列表中查询其最后一个<ul></ul>项，并获取其<li>属性。之后，我们查询操作方法，并根据该数字获取接下来的10个项目，最后将它们注入到我们的视图中。

如何使用Jquery为部分视图传递数据

1 个答案: