It is possible to create a pager in a view-Component?( Asp.net MVC View-Component)

Asked

Viewed 32 times

0

I have a view with a view-Component What a list of news stories. I want to make a pagination of this news within this view-componet. Paging should be inside the view-Component, as do for this html to call/update/request only the view-Component again and as step the parameter?

In the view the view-Component call is as follows:

@await Component.InvokeAsync("Noticia")

In view-component html I have:

@model Portal.Infra.Entidades.UltimasNoticiasViewModel
<div class="not-content">
    <h4>Últimas notícias</h4>
    <ul>
        @foreach (var item in Model.noticias)
        {
            <li>
                <span>@item.DataCriacao.ToString("dd") <br /><b class="text-capitalize">@item.DataCriacao.ToString("MMM")</b></span>
                <a href="~/noticia/index/@item.Codigo" style="color:#1e2633; text-decoration:none; font-weight:bold;">@item.Titulo</a>
            </li>
        }
           </ul>
</div>

So I added the pager:

@if (Model.totalItens > Model.itensPorPagina)
        {
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    @for (int i = 0; i < Math.Ceiling( Convert.ToDecimal(Model.totalItens / Model.itensPorPagina)); i++)
                    {
                        <li class="page-item" style="display: inline;">
                            <a class="page-link" href="~/home/index/@(i+1)">@(i+1)</a>
                        </li>
                    }
                </ul>
            </nav>
        }

But this href is just for me to test the pager’s values. I know that href will direct to another page or load the current one in full, I want a way to click on the pager item and it reload only the view-Component with on the page clicked.

  • You could edit your question by putting snippet of your code?

  • I edited. It is a complex thing to explain. hehehe If it was not clear warns me that I try to edit again.

No answers

Browser other questions tagged

You are not signed in. Login or sign up in order to post.