From e826ec6391fa7e53b570979980248daa2f737851 Mon Sep 17 00:00:00 2001
From: Luke Latham <1622880+guardrex@users.noreply.github.com>
Date: Thu, 16 Apr 2026 18:28:19 -0500
Subject: [PATCH 1/2] Document page index handling in QuickGrid

---
 aspnetcore/blazor/components/quickgrid.md | 84 +++++++++++++++++++++++
 1 file changed, 84 insertions(+)

diff --git a/aspnetcore/blazor/components/quickgrid.md b/aspnetcore/blazor/components/quickgrid.md
index ab4c5049ba46..3b3449d53b20 100644
--- a/aspnetcore/blazor/components/quickgrid.md
+++ b/aspnetcore/blazor/components/quickgrid.md
@@ -140,6 +140,90 @@ In the running app, page through the items using a rendered `Paginator` componen
 
 QuickGrid renders additional empty rows to fill in the final page of data when used with a `Paginator` component. In .NET 9 or later, empty data cells (`<td></td>`) are added to the empty rows. The empty rows are intended to facilitate rendering the QuickGrid with stable row height and styling across all pages.
 
+To save the page index and return the user to the same page of items from a details page, use the following API:
+
+* <xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState.CurrentPageIndex%2A?displayProperty=nameWithType>: Gets the current zero-based page index.
+* <xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState.SetCurrentPageIndexAsync%2A?displayProperty=nameWithType>: Sets the current page index and notifies any associated `QuickGrid` components to fetch and render updated data.
+
+In the following example, the `Details` component receives the page index from the query string in the `Page` property and uses it to form a link back to the `QuickGrid` component's page at `/characters`.
+
+`Details.razor`:
+
+```razor
+@page "/details"
+
+<ul>
+    <li>Character Id for this detail record: @Id</li>
+    <li>QuickGrid page index: @Page</li>
+</ul>
+<div>
+    <a href="@($"/characters?page={Page}")">Back to List</a>
+</div>
+
+@code {
+    [SupplyParameterFromQuery]
+    private int Id { get; set; }
+
+    [SupplyParameterFromQuery]
+    private int Page { get; set; }
+}
+```
+
+The `Characters` component:
+
+* Pages the `QuickGrid` component by calling <xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState.SetCurrentPageIndexAsync%2A?displayProperty=nameWithType> on component initialization when `Page` has a non-zero value.
+* Opens the preceding `Details` component with the current page index (<xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState.CurrentPageIndex%2A>) in the query string.
+
+`Characters.razor`:
+
+```razor
+@page "/characters"
+@rendermode InteractiveServer
+@using Microsoft.AspNetCore.Components.QuickGrid
+
+<QuickGrid Items="character" Pagination="pagination">
+    <PropertyColumn Property="@(c => c.Id)" />
+    <PropertyColumn Property="@(c => c.Name)" />
+    <TemplateColumn Context="c">
+        <a href="@($"details?id={c.Id}&page={pagination.CurrentPageIndex}")">
+            Details
+        </a>
+    </TemplateColumn>
+</QuickGrid>
+
+<Paginator State="pagination" />
+
+@code {
+    PaginationState pagination = new PaginationState { ItemsPerPage = 3 };
+
+    private record Character(int Id, string Name);
+
+    private IQueryable<Character> character = new[]
+    {
+        new Character(0, "Ellen Ripley"),
+        new Character(1, "Darth Vader"),
+        new Character(2, "Rick Deckard"),
+        new Character(3, "Sarah Connor"),
+        new Character(4, "Malcolm Reynolds"),
+        new Character(5, "Kara Thrace"),
+        new Character(6, "James Kirk"),
+        new Character(7, "Flash Gordon"),
+        new Character(8, "Max Rockatansky"),
+        new Character(9, "Katniss Everdeen"),
+        new Character(10, "Ellie Sattler"),
+        new Character(11, "Leela")
+    }.AsQueryable();
+
+    [SupplyParameterFromQuery]
+    private int Page { get; set; }
+
+    protected override async Task OnInitializedAsync()
+    {
+        await pagination.SetCurrentPageIndexAsync(Page);
+    }
+}
+```
+
 ## Apply row styles
 
 Apply styles to rows using [CSS isolation](xref:blazor/components/css-isolation), which can include styling empty rows for `QuickGrid` components that [page data with a `Paginator` component](#page-items-with-a-paginator-component).

From cd737d992c8e3e87e1fffc79762aa0d1422ddc54 Mon Sep 17 00:00:00 2001
From: Luke Latham <1622880+guardrex@users.noreply.github.com>
Date: Thu, 16 Apr 2026 18:45:44 -0500
Subject: [PATCH 2/2] Apply suggestions from code review

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Co-authored-by: Luke Latham <1622880+guardrex@users.noreply.github.com>
---
 aspnetcore/blazor/components/quickgrid.md | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/aspnetcore/blazor/components/quickgrid.md b/aspnetcore/blazor/components/quickgrid.md
index 3b3449d53b20..ec429a2e3df0 100644
--- a/aspnetcore/blazor/components/quickgrid.md
+++ b/aspnetcore/blazor/components/quickgrid.md
@@ -153,7 +153,7 @@ In the following example, the `Details` component receives the page index from t
 @page "/details"
 
 <ul>
-    <li>Character Id for this detail record: @Id</li>
+    <li>Character ID for this detail record: @Id</li>
     <li>QuickGrid page index: @Page</li>
 </ul>
 <div>
@@ -171,7 +171,7 @@ In the following example, the `Details` component receives the page index from t
 
 The `Characters` component:
 
-* Pages the `QuickGrid` component by calling <xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState.SetCurrentPageIndexAsync%2A?displayProperty=nameWithType> on component initialization when `Page` has a non-zero value.
+* Pages the `QuickGrid` component by calling <xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState.SetCurrentPageIndexAsync%2A?displayProperty=nameWithType> on component initialization, setting the page index with the value of `Page`.
 * Opens the preceding `Details` component with the current page index (<xref:Microsoft.AspNetCore.Components.QuickGrid.PaginationState.CurrentPageIndex%2A>) in the query string.
 
 `Characters.razor`:
@@ -185,7 +185,7 @@ The `Characters` component:
     <PropertyColumn Property="@(c => c.Id)" />
     <PropertyColumn Property="@(c => c.Name)" />
     <TemplateColumn Context="c">
-        <a href="@($"details?id={c.Id}&page={pagination.CurrentPageIndex}")">
+        <a href="@($"/details?id={c.Id}&page={pagination.CurrentPageIndex}")">
             Details
         </a>
     </TemplateColumn>