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

How to avoid to refetch when the user press the back button

$
0
0

I display a list of posts in Razor Page using an embedded Blazor Server component.

Below is the index Razor Page code:

<component type="typeof(MyApp.Components.PostFeed)" render-mode="Server" />

Below is the PostFeed Blazor Component (reduced to bare minimum for simplicity):

@inject IPostRepo _repo@foreach (var item in _items){<div>        // Display Post Item ...</div>}@if (hasMore()){<Button @onclick=fetchMore>More</Button>}@code {    private IEnumerable<Post> _items = default!;    private int _page = 1;    protected override async void OnInitialized()    {        _items = await _repo.Fetch(page: _page, pageSize: 5);    }    private bool hasMore() => _page < 10; // I fix page count to 10 for simplicity    private async void fetchMore()    {        if (hasMore())        {            _page += 1;            var newItems = await _repo.Fetch(page: _page, pageSize: 5);            _items = _items!.Concat(newItems);            StateHasChanged();        }    }}

My problem is that, let's say I click the more button to fetch the second page, then I open a post on the second page, bringing me to that post's razor page. Now when I click the back button on the phone or the browser to go back to the index, everything is refetched, and I only see posts from page 1 of course.

Which changes should I make to keep the index as it was when I go back to it?


Viewing all articles
Browse latest Browse all 4839

Trending Articles



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