按下按钮时在页面中加载更多数据

Question

我有一个部分视图，我在我的主页中使用它。 该视图将一些数据加载为每行有 2 个框的框。 现在的问题是我只需要在开始时显示 2 个框，用户将按下“显示更多”按钮以在新行上显示接下来的 2 个框，依此类推。 这是我的部分观点

@model  Restaurants.ViewModels.RestaurantDetailsViewModel


<label class="sectionLabels">Restaurants</label>
@if (Model.RestaurantDetail.Count() == 0)
{
    <h3 style="text-align:center">No Results Found</h3>
}
else
{
    <div class="tblSeeMore">
        @foreach (var itemRest in Model.RestaurantDetail)
        {
            <div class="seeMoreBox">
                <div>
                    <img class="restImage" src="@Url.Content(itemRest.RestaurantImgPath)">
                </div>
                <div class="restMethods">
                    @if (itemRest.Pickup)
                    {
                        <span style="display: inline-block; border-right: 1px solid lightgrey;padding-right:3px;">
                            <img class="restMethodImg" src="~/Content/Assets/Images/pickup.png" />
                        </span>
                    }
                    @if (itemRest.Delivery)
                    {
                        <span style="display: inline-block; border-right: 1px solid lightgrey;padding-right:3px;">
                            <img class="restMethodImg" src="~/Content/Assets/Images/delivery.png" />
                        </span>
                    }
                    @if (itemRest.OnlinePayments)
                    {
                        <img class="restMethodImg" src="~/Content/Assets/Images/visa.png" />
                    }
                </div>
                <div class="row restLogoNameKitchenType">
                    <div class="col-md-2">
                        <img class="restLogo rounded-circle" src="@Url.Content(itemRest.Logo)">
                    </div>
                    <div class="col-md-9 restKitchenTypeContent">
                        <label class="restName">@itemRest.RestaurantName</label>
                        <br />

                        @{ string kitchenTypeFull = "";}
                        @foreach (var kitchenType in itemRest.RestaurantCategories)
                        {
                            kitchenTypeFull += "," + @kitchenType.Category.Description;
                        }
                        @if (kitchenTypeFull.Length > 0)
                        {
                            kitchenTypeFull = kitchenTypeFull.TrimStart(new Char[] { ',' });
                            <label>@kitchenTypeFull</label>
                        }
                    </div>
                </div>
                <div class="row restAddressPhoneOffer">
                    <div class="col-md-9">
                        <div class="row">
                            <div class="col-md-1">
                                <i class="fas fa-map-marker-alt"></i>
                            </div>
                            <div class="col-md-10">
                                @itemRest.Address1, @itemRest.Area,<br /> @itemRest.City, @itemRest.PostalCode
                            </div>
                        </div>
                        <div class="row">
                            <div class="col-md-1">
                                <i class="fas fa-phone-alt"></i>
                            </div>
                            <div class="col-md-10">
                                @itemRest.PhoneNumber
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 restOffer">
                        <img src="~/Content/Assets/Images/gift.jpg" />
                        @*<i class="fas fa-gift fa-3x"></i>*@
                    </div>
                    @if (itemRest.MenuLink != null && itemRest.TableLink != null)
                    {
                        <div>
                            <div class="rowMenuTableLink">
                                <button class="rowMenuTableLinkM">
                                    @Html.Raw(itemRest.MenuLink)
                                </button>
                                <button class="rowMenuTableLinkT">
                                    @Html.Raw(itemRest.TableLink)
                                </button>
                            </div>
                        </div>
                    }
                    else
                    {
                        if (itemRest.MenuLink != null)
                        {
                            <div class="rowMenuLink">
                                <button class="restMenuResrBtns">
                                    @Html.Raw(itemRest.MenuLink)
                                </button>
                            </div>
                        }
                        if (itemRest.TableLink != null)
                        {
                            <div class="rowTableLink">
                                <button class="restMenuResrBtns">
                                    @Html.Raw(itemRest.TableLink)
                                </button>
                            </div>
                        }
                    }
                </div>
            </div>
        }
    </div>
    <button id="btnSeeMore" value="@Model"> See More</button>
    <input type="button" value="See More"   />
}
<script>
        $(document).ready(function () {
            $("#btnSeeMore").click(function (e) {
                debugger;
                $.ajax({
                    url: "@Url.Action("RestaurantPaging", "Home")",
                    data: this.value,
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                    success: function (data) {
                        $('#test').html(data);
                        $('html, body').animate({
                            scrollTop: $("#test").offset().top
                        }, 1000);
                    },
                    error: function (xhr, status, error) {
                        var err = eval("(" + xhr.responseText + ")");
                        alert(err.Message);
                    }
                });
            });
        });
</script>

在这里我将它加载到索引页面中

<div id="test" class="sectionSeeMore">
            @foreach (var item in Model)
            {
                if (item.restDetails != null && item.restDetails.RestaurantDetail.Count() != 0)
                {
                    @Html.Partial("_RestaurantDetails", item.restDetails)
                }
                break;
            }

        </div>

我在 controller 中的 function

[HttpPost]
public ViewResult RestaurantPaging(RestaurantDetailsViewModel data)
{
    var page = (data.PagingInfo.CurrentPage + 1);
    var RestaurantDetailsViewModelmodel = new RestaurantDetailsViewModel()
    {
        RestaurantDetail = data.RestaurantDetail.Take(page * 2),
        PagingInfo = new PagingInfo
        {
            CurrentPage = page,
            ItemsPerPage = 2,
            TotalItems = data.PagingInfo.TotalItems
        }
    };

    return View("Index",RestaurantDetailsViewModelmodel);
}

我现在的问题是我无法在 controller 中获得 model。 我错过了什么？ 另外，如果这可行，我会丢失以前的数据吗？ 每次按下查看更多按钮时，我都需要包含所有数据