I have a view with a view-component that lists various news. I want to make a pagination of this news within this view-componet. The page should be within view-component, how do I make this html call / update / request only the view-component again and how do I pass the parameter?
In view the view-component call is as follows:
@await Component.InvokeAsync("Noticia")
In the 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>
Then 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 values. I know that href will point to another page or load the current integer, I want a way to click on the pager item and it reload only the view-component with the clicked page.