加载更多按钮Umbraco，Razor功能

Question

我是umbraco和c＃的新手，我在umbraco剃须刀中制作了一个博客列表，但是我如何才能加载更多的按钮功能呢？

我想当用户点击按钮时将更多5个项目加载到列表中。一种方法是用户单击按钮更新查询，但我需要刷新页面。

任何帮助都会很棒，因为我坚持这个，并且不知道如何在umbraco中做到这一点。

@{
    var selection = Model.Content.Children().Where(x => x.IsVisible()).Take(5).ToList();
}



   <div class="container-fluid" style="padding-left: 117px;">

   <div class="row" style="margin-top: 5em;">

   <div class="col-lg-9 col-md-9 col-sm-9">

    <!-- BLOG START -->

        @while(selection.Any()){

                    var oneItem = selection.First();
                    selection.Remove(oneItem);


                <div class="row">

                   <div class="col-md-4 col-sm-12" onclick="location.href='@oneItem.Url'" style="cursor:pointer">
                        <div class="card">

                            <img src="@Umbraco.TypedMedia(oneItem.GetPropertyValue<int>("imagemPublicacaoBlog")).Url" style="height: 15em;">
                         </div>
                    </div> 

                    <div class="col-md-6 col-sm-12"  onclick="location.href='@oneItem.Url'" style="cursor:pointer">
                        <span class="card-text qs-blog-direcao">@oneItem.GetPropertyValue("tipoDeDirecao")</span><br><br>


                            <span class="qs-blog-date-1page" id="qs-datetime">@(oneItem.GetPropertyValue<DateTime>("dataDePublicacaoBlog").ToString("dd MMMM yyyy",new CultureInfo("pt-PT")))</span>

                        <br>
                        <span class="qs-blog-publicado-por">@oneItem.GetPropertyValue("publicadoPorBlog") - OPINIÃO </span>
                        <span class="qs-blog-titulo-1page">@oneItem.GetPropertyValue("tituloBlog")</span>
                    </div>   

                    <div class="col-md-12 col-sm-12  onclick="location.href='@oneItem.Url'" style="cursor:pointer"" style="margin-top:2em;">
                        <span class="qs-blog-resumo d-flex justify-content-start">@oneItem.GetPropertyValue("resumoBlog")</span>
                        <span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
                    </div>  

                </div>


                var twoItems = selection.Take(2).ToList();

                if(twoItems.Any()){

                <div class="row">

                    @foreach (var item in twoItems){
                    selection.Remove(item);

                    <div class="col-md-6 col-sm-12" onclick="location.href='@item.Url'" style="cursor:pointer">
                        <span class="card-text qs-blog-direcao-double">@item.GetPropertyValue("tipoDeDirecao")</span><br>
                        <img src="@Umbraco.TypedMedia(item.GetPropertyValue<int>("imagemPublicacaoBlog")).Url" style="height: 10em;margin-top: 2em;">

                        <div class="qs-blog-sideByside">
                        <span class="qs-blog-date-1page-double" id="qs-datetime">@(item.GetPropertyValue<DateTime>("dataDePublicacaoBlog").ToString("dd MMMM yyyy",new CultureInfo("pt-PT")))</span><br>
                        <span class="qs-blog-publicado-por-double"> @item.GetPropertyValue("publicadoPorBlog") - OPINIÃO </span>
                        </div>

                        <div class="qs-blog-titulo-1page-double">@item.GetPropertyValue("tituloBlog")</div>
                        <div class="qs-blog-resumo-blog d-flex justify-content-start">@item.GetPropertyValue("resumoBlog")</div>
                        <span class="d-flex justify-content-end"><a><img src=" /media/1027/icon_inf_verde.png"></a></span>
                    </div>
                }
            </div>

            <br>
        }
}



   <!-- BLOG END -->
</div> 

Answer 1

它可能是这样的：

@{
    int page = int.TryParse(Request["page"], out page) ? page : 0;
    int pageSize = 5;

    var selection = Model.Content
        .Children()
        .Where(x => x.IsVisible())
        .Skip(page * pageSize)
        .Take(pageSize)
        .ToList();
}

<div class="container-fluid">
    ...
</div>

<a href="@Request.RawUrl.Split('?')[0]?page=@(page + 1)">
    Load next @pageSize results
</a>