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?
– Fernando Souza
I edited. It is a complex thing to explain. hehehe If it was not clear warns me that I try to edit again.
– Bruno