1

If I create a static HTML page with a long list of clickable items, click one item to navigate to the item details page, and then press the mouse back button, the web browser goes back to the exact position where I was.

I wondered if this is possible when creating a Blazor 6.0 app that shows a list of item from Entity Framework Core 6.0. I tried the official sample form Microsoft, and as I worried, when I clicked the mouse back button, the list page was reloaded and shows the beginning.

Is it possible to keep the list state when navigating to item details page and coming back? I mean, it is the same list, so why reload it?

enter image description here

Damn Vegetables
  • 11,484
  • 13
  • 80
  • 135
  • Why navigate to another route [Page]. Show the data in a modal dialog. Here's a demo - https://blazr--demo.azurewebsites.net/ – MrC aka Shaun Curtis Nov 07 '22 at 19:54
  • The solution proposed by MrC is a viable one... You can also make the dialog box a little bit transparent so that the list can be seen through. Another solution, very common in web design is to display the selected record's details in a dedicted window (make it a div container element that is rendered as a RenderFragment delegate) that will open beneath the selected record. – enet Nov 07 '22 at 22:31
  • 1
    Yeah, but what if in some cases, I need the move to a page? There is no way (or at least no practically plausible way) to keep the list and not reload it? – Damn Vegetables Nov 08 '22 at 01:17
  • This is a browser feature called `bfCache or Back/Forward Cache`, and is not supported by Blazor. I've not delved into the why, but here you can read up on the feature and what to do to support it: https://web.dev/bfcache/?utm_source=devtools#optimize-your-pages-for-bfcache. You can however replicate this with some sort of custom cache, like: https://stackoverflow.com/questions/25168861/take-user-back-to-where-they-scrolled-to-on-previous-page-when-clicking-browser – Marius Nov 08 '22 at 20:08
  • Another way is that open the destination page (record details) in the new tab with `_blank` prop on the link in the list. – Arani Nov 09 '22 at 05:47

0 Answers0