Quantcast
Channel: Active questions tagged blazor - Stack Overflow
Viewing all articles
Browse latest Browse all 4046

Paging is sending the wrong value to SetPage method [duplicate]

$
0
0

I have the following Contacts Blazor component and my paging is not working as expected. When I click page 2, the value being sent to the SetPage method is always 6. It's in the for loop for the paging that this is happening.

Snippet of paging

Page @CurrentPage of @TotalPages (@FilteredContacts.Count() total records)
<!-- Pagination Controls --><ul class="pagination mb-0"><li class="page-item @(CurrentPage == 1 ? "disabled" : "")"><button class="page-link" @onclick="() => SetPage(CurrentPage - 1)" disabled="@((CurrentPage == 1))">Previous</button></li>    @for (int i = 1; i <= TotalPages; i++)    {<li class="page-item @(CurrentPage == i ? "active" : "")"><button class="page-link" @onclick="() => SetPage(i)">@i</button></li>    }<li class="page-item @(CurrentPage == TotalPages ? "disabled" : "")"><button class="page-link" @onclick="() => SetPage(CurrentPage + 1)" disabled="@((CurrentPage == TotalPages))">Next</button></li></ul>

Entire listing

@page "/Contacts"@rendermode InteractiveServer<h3>Contacts Component</h3><!-- Search Bar --><div class="row mb-3"><div class="col-md-6"><input type="text" class="form-control" placeholder="Search contacts..." @bind="SearchTerm" @bind:event="oninput" /></div></div><!-- Table with Sorting --><table class="table table-striped"><thead><tr><th @onclick="() => SortByColumn(nameof(Contact))">Contact @GetSortIcon(nameof(Contact))</th></tr></thead><tbody>        @foreach (var contact in PagedContacts)        {<tr><td><button class="btn btn-link" @onclick="() => SelectContact(contact)">@contact</button></td></tr>        }</tbody></table><!-- Pagination --><nav class="d-flex justify-content-between align-items-center"><!-- Page Label --><span>Page @CurrentPage of @TotalPages (@FilteredContacts.Count() total records)</span><!-- Pagination Controls --><ul class="pagination mb-0"><li class="page-item @(CurrentPage == 1 ? "disabled" : "")"><button class="page-link" @onclick="() => SetPage(CurrentPage - 1)" disabled="@((CurrentPage == 1))">Previous</button></li>        @for (int i = 1; i <= TotalPages; i++)        {<li class="page-item @(CurrentPage == i ? "active" : "")"><button class="page-link" @onclick="() => SetPage(i)">@i</button></li>        }<li class="page-item @(CurrentPage == TotalPages ? "disabled" : "")"><button class="page-link" @onclick="() => SetPage(CurrentPage + 1)" disabled="@((CurrentPage == TotalPages))">Next</button></li></ul></nav>@code {    [Parameter] public List<string> ContactsList { get; set; } = new();    [Parameter] public EventCallback<(string ContactName, string FieldName)> OnContactSelected { get; set; }    [Parameter] public string TargetField { get; set; } = string.Empty;    private string SearchTerm = "";    private string SortColumn = nameof(Contact);    private bool SortAscending = true;    private int CurrentPage = 1;    private int PageSize = 5;    private void SortByColumn(string column)    {        if (SortColumn == column)        {            SortAscending = !SortAscending;        }        else        {            SortColumn = column;            SortAscending = true;        }    }    private void SetPage(int page)    {        CurrentPage = page;    }    // private IEnumerable<string> PagedContacts => FilteredContacts    // .Skip((CurrentPage - 1) * PageSize)    // .Take(PageSize);    // Filtered, Sorted, and Paginated Contacts    private IEnumerable<string> FilteredContacts => ContactsList        .Where(c => string.IsNullOrEmpty(SearchTerm) || c.Contains(SearchTerm, StringComparison.OrdinalIgnoreCase))        .OrderBy(c => SortAscending ? c : null)        .ThenByDescending(c => SortAscending ? null : c);    private IEnumerable<string> PagedContacts => FilteredContacts       .Skip((CurrentPage - 1) * PageSize)       .Take(PageSize);    private int TotalPages => (int)Math.Ceiling(FilteredContacts.Count() / (double)PageSize);    protected override void OnParametersSet()    {        Console.WriteLine($"CurrentPage: {CurrentPage}, TotalPages: {TotalPages}");        Console.WriteLine($"FilteredContacts Count: {FilteredContacts.Count()}, PagedContacts Count: {PagedContacts.Count()}");    }    // protected override void OnParametersSet()    // {    //     if (CurrentPage > TotalPages)    //     {    //         CurrentPage = TotalPages > 0 ? TotalPages : 1;    //     }    // }    private string _searchTerm    {        get => _searchTerm;        set        {            if (_searchTerm != value)            {                _searchTerm = value;                CurrentPage = 1; // Reset to the first page on search            }        }    }    private async Task SelectContact(string contact)    {        if (OnContactSelected.HasDelegate)        {            await OnContactSelected.InvokeAsync((contact, TargetField));        }    }    private string GetSortIcon(string column)    {        if (SortColumn == column)        {            return SortAscending ? "▲" : "▼";         }        return string.Empty;    }    public class Contact    {        public string Name { get; set; }        public string Email { get; set; }        public string Phone { get; set; }    }}

enter image description here


Viewing all articles
Browse latest Browse all 4046

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>