Skip to content

Instantly share code, notes, and snippets.

@Orbis25
Created May 5, 2021 18:24
Show Gist options
  • Save Orbis25/b786f60420b42416a60e717b1b758130 to your computer and use it in GitHub Desktop.
Save Orbis25/b786f60420b42416a60e717b1b758130 to your computer and use it in GitHub Desktop.
Paginacion para las vistas parciales
@model PaginationPartialModel
@{
var pages = Math.Ceiling((decimal)(Model.Total / Model.Qyt));
}
@if (Model.Total > 0)
{
<nav aria-label="Page navigation example">
<ul class="pagination">
@for (int i = 1; i <= pages + 1; i++)
{
var active = i == Model.ActualPage ? "active" : string.Empty;
<li class="page-item @active" onclick="LoadPartialView('@Model.IdToLoad', '@Model.Url&Page=@i')"><button class="page-link">@i</button></li>
}
</ul>
</nav>
}
<script>
var LoadPartialView = async (contentId, url) => {
const content = $(`#${contentId}`);
content.empty();
content.append("cargando...");
try {
const result = await fetch(url, { method: "GET" });
content.empty();
if (result.status === 200) {
content.append(await result.text());
} else if (result.status === 400) {
content.append(`<p>${await result.text()}</p>`);
}
} catch (e) {
content.empty();
content.append(`Error al cargar la información, intente de nuevo mas tarde`);
}
};
</script>
public class PaginationPartialModel
{
public int ActualPage { get; set; }
public int Total { get; set; }
public int Qyt { get; set; }
public bool RenderOneInFirstPage { get; set; }
public string Url { get; set; }
public string IdToLoad { get; set; }
}
@Orbis25
Copy link
Author

Orbis25 commented May 5, 2021

@** Author : Orbis Alonzo Gutierrez

  • COMO USARLO
  •   <partial name="_PaginationPartial"
    
  •            model='new PaginationPartialModel() {
    
  •                Total = Model.Total,
    
  •                Qyt = Model.Qyt,
    
  •               RenderOneInFirstPage = true ,
    
  •               Url = "/Review/GetAll?Qyt=8&productId="+Model.Results.FirstOrDefault()?.ProductId,
    
  •                ActualPage = Model.ActualPage,
    
  •                IdToLoad = "tab-container"
    
  •                }' />
    

*@

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment