MudBlazor pagination

Question

I would like to create a datapagination not on a table but MudPaper components. These paper components contains user data form which display user data or let the user to modify it. It would be better if it works like carousel with sliding animation. I have made it with carousel but there are too many users and there are too many step buttons. Any suggestion, please?

Answer 1

Define when and how data is loaded. For my example I use 10 cards per page. If you go from the first entry of each page you will fetch the previous Page and vice versa for the last entry.

private int selectedIndex = 0; // index of displayed card
private int pageSize = 10; // number of entries in the carousel
private int page = 1; // current page
private int lastIndex = -1; // index of the last entry in the last page

when Page is the last page lastIndex != -1 . Additionally I block the action to get next entry/page since there's none

<MudCarousel 
    Class="mud-width-full" @ref="_carousel" 
    ItemsSource="@_source" 
    SelectedIndex="selectedIndex" 
    Style="height:200px;" 
    ShowArrows="true" 
    AutoCycle="false"
>
<PreviousButtonTemplate>
    @if(selectedIndex != 0 || page != 1)
    {
        <MudIconButton Icon="@Icons.Material.Filled.ChevronLeft" OnClick="GoToPrevious"/>
    }
</PreviousButtonTemplate>
<NextButtonTemplate>
    @if(selectedIndex != lastIndex)
    {
        <MudIconButton Icon="@Icons.Material.Filled.ChevronRight" OnClick="GoToNext"/>
    }
</NextButtonTemplate>
    <ItemTemplate>
        <div class="d-flex flex-column flex-column justify-center" style="height:100%">
            <MudText Align="@Align.Center" Class="mx-auto">@context</MudText>
        </div>
    </ItemTemplate>
</MudCarousel>

I overwrite PreviousButtonTemplate and NextButtonTemplate so I have better control over these actions.

public async Task GoToPrevious()
{
    if(selectedIndex == 0)
    {
        if(page != 1)
        {
            selectedIndex = pageSize - 1;
            page--;
        }
    }
    else
    {
        selectedIndex--;
    }
}

public async Task GoToNext()
{
    if(selectedIndex == pageSize - 1)
    {
        if(lastIndex == -1)
        {
            selectedIndex = 0;
            page++;
            await LoadData();
        }
    }
    else if(selectedIndex != lastIndex)
    {
        selectedIndex++;
        await LoadData();
    }
}

And with LoadData() I fetch from a mock api

private async Task LoadData()
{
    // fetch Data
    FakeDataPagination fakeDataPagination = await FakeApi.PaginatedList(page, pageSize);
    _source = fakeDataPagination.Data;
    int maxPages = fakeDataPagination.Total / pageSize;
    lastIndex = maxPages == page ? fakeDataPagination.Count - 1 : -1;
}


FakeApi

public static class FakeApi
{
    public async static Task<FakeDataPagination> PaginatedList(int page, int pageSize){
        FakeDataPagination result = new FakeDataPagination(){
            Page = page,
            PageSize = pageSize,
            Total = pageSize * 5 + 5,
            Count = pageSize
        };
        if(page == 5)
        {
            result.Count = 5;
        }
        for(int i = 0; i < result.Count; i++){
            result.Data.Add($"Page: {page}, index: {i}");
        }
        return result;
    }
}

public class FakeDataPagination{
    public List<string> Data {get; set;} = new List<string>();
    public int Page {get; set;}
    public int PageSize {get; set;}
    public int Count {get; set;}
    public int Total {get; set;}
}

mudSnippet

I hope this is kind of what you're looking for