Blazor database example's list page is reloaded when coming back from a details page

[HubKing]

Describe the issue
In the BlazorServerDbContextExample sample, if I go back from item details page to the list, the list reloads. This makes that the list page would lose the previous state such as scroll position. This will annoy users if the list is long.

If there is a way to keep the list page view in the memory and do not reload the list page when coming back, please explain the way to implement that in the sample's documentation.

To Reproduce
Steps to reproduce the behavior:

1. Run BlazorServerDbContextExample
2. Make the window smaller so that a scroll bar would appear
3. Scroll down to any item down below in the list
4. Click the item
5. Click [Back to Grid] or press the mouse back button or click the browser back button

Expected behavior
Going back the list view exactly where I was.

Screenshots

Additional context
Add any other context about the issue here.

.NET Version
6.0

---

Issue Details

⚠ Do not edit this section. It is required for issue processing.

• Content Source: dotnet/blazor-samples
• GitHub Login: @guardrex

[guardrex]

Hello @HubKing ... That's beyond the scope of the concepts addressed by the sample app, which are to demonstrate EF Core with Blazor. The approach the sample app takes is to merely return to the same page of results, and it would take a bit more work to make it do what you suggest, namely: include a property for the record Id in IPageHelper/PageHelper, update the Index component route to include an optional route parameter to receive the record Id back from the ViewContact component, and then have the Index component provide the record Id as an argument to a component parameter of the of the GridWrapper component to scroll the grid to the position of the record. It would take a bit of work, and it's not within the scope of this particular example.

I think you have a good idea for a common use case in CRUD apps: A grid shows pages of records, select one that loads a different component that works with the record, either via closing the record detail component or selecting the browser's back button the grid reappears with the correct page loaded and scrolled to the record that the user selected. This is such a common case for apps that I think we could have an example. I'll make a note of this on one of my tracking issues, and I'd like to build it out with the NEW QuickGrid component. The earliest that I can reach this for consideration is 23Q1. I'm totally booked with work 😅 right through the EOY.

btw - The new QuickGrid component is documented here 👉 https://learn.microsoft.com/en-us/aspnet/core/blazor/components/?view=aspnetcore-7.0#quickgrid-component

In the meantime if you can't work out what's needed for this app's approach on your own, we refer devs to the usual public support channels, such as ...

• Stack Overflow (tag: blazor)
• ASP.NET Core Slack Team
• Blazor Gitter

We only work on docs here and don't provide product support for developer apps.

[guardrex]

btw ... One more approach occurred to me ... virtualization. It's not a grid. It's more like a scrolling list container.

https://learn.microsoft.com/en-us/aspnet/core/blazor/components/virtualization?view=aspnetcore-7.0

The problem is that it doesn't have a scroll position feature, which the product unit is considering for it in .NET 8 ... November, 2023 ... not much help in the near-term. It can be done with JS interop tho. Steve Sanderson put up an example that shows how to do it ...

• https://github.com/SteveSandersonMS/presentation-2021-01-NDCLondon/blob/master/demo/CalendarApp/src/CalendarApp/Pages/Home/Home.razor#L70-L82
• https://github.com/SteveSandersonMS/presentation-2021-01-NDCLondon/blob/master/demo/CalendarApp/src/CalendarApp/wwwroot/scroller.js

GuickGrid will probably suffer from the same problem. I kind'a doubt that it has a scroll-to-record feature at this time. I didn't see it mentioned in the live example, and it wasn't described in the API for the new docs ...

https://aspnet.github.io/quickgridsamples/virtualizing