dotnet / dotnet/aspnetcore

[Validation] QuickGrid sorting through the URL

Open
#69,127 1 comment 0 reactions 1 assignee Claimed by @BhaskarSuresh22 View on GitHub
area-blazor Validation validation-scenario
Dominant language
C#
Stars
38.4k
Forks
10.9k
Avg merge
2d 6h
Merged PRs (30d)
290

Description

**Scenario contact:** @dariatiurina

## Scenario

Before .NET 11 a `QuickGrid` could only be sorted by clicking a button that ran interactive code, so a grid on a static SSR page could not be sorted at all. Sorting now happens through query string parameters and ordinary links, which also means a sorted view can be bookmarked or pasted to someone else.

Validate that a grid sorts with no interactivity, that the URL describes the sort, and that a malformed sort in the URL falls back to the default view instead of failing.

## Minimum build

.NET 11 RC1.

## Configurations to cover

* Blazor Web App
* [x] Static SSR
* [x] Interactive Server
* [x] Interactive WebAssembly
* [ ] Interactive Auto
* [ ] Standalone WebAssembly
* [ ] Hybrid (MAUI)

## Also exercise

* [ ] Published output
* [ ] An existing .NET 10 app upgraded to .NET 11
* [ ] Trimming or ahead-of-time compilation
* [ ] More than one server instance, or a proxy in front
* [ ] Hot Reload
* [ ] An IDE as well as the command line
* [ ] Container
* [x] N/A

## What to build

A page with a `QuickGrid` over an in-memory list of 60 or so items, with two sortable columns whose values are obviously ordered. Use the same grid in static SSR (no `@rendermode`), Interactive Server, and Interactive WebAssembly variants. Let QuickGrid handle query state in all three, without custom `NavigationManager` calls or query-string code.

Use columns titled `Name` and `Price`, with `Price` as the default sort column. This makes the first click on `Name` a change of sort column rather than a reversal of an already-ascending default.

## Things to try

* Sort a column, sort it again to reverse it, then sort the other column, watching the address bar each time.
* Copy the URL after sorting and open it in a private window.
* Try a few representative hand-edited URLs: an unknown column name, an invalid direction, an empty direction, and a sort parameter with no direction. Record whether each was a fresh direct load or an in-place navigation if the results differ.
* Load the page with no query string and see what the default sort column does.
* Remove the sort parameters from the URL by hand once a different column is sorted.
* Use browser Back and Forward after several sort changes.
* Middle-click a column header to open it in a new tab.
* Tab to a column header and activate it with Enter.
* Give a column no `Title` and see whether it is still sortable.

## Expected behavior

The URL describes the sort, so the same URL always produces the same order. Malformed values fall back to the grid's default view instead of throwing.

### Must hold

* In static SSR a sortable column header renders as `` rather than a ``, so it opens in a new tab on a middle-click and its address can be copied.
* Sorting a column titled `Name` puts `sort=Name` and `direction=asc` in the URL, and the rows are ordered by that column ascending.
* Sorting the same column again gives `direction=desc` and reverses the visible order.
* A fresh direct load with an unknown sort column or an invalid direction renders the grid's default view and returns HTTP 200.
* Opening a copied sorted URL in a fresh browser session produces the same rows in the same order.

### Expected differences between configurations

* Static SSR sorting requests new server-rendered content and may use enhanced navigation rather than a full document reload. Interactive variants update the URL and rerender the grid.

## Evidence to capture

* The rendered markup of a sortable column header from the static SSR page.
* The URL and the first three rows after each of: the first load, one sort, and the reversed sort.
* What a column with no `Title` rendered as.

## Documentation to use

* [ASP.NET Core Blazor QuickGrid component](https://learn.microsoft.com/aspnet/core/blazor/components/quickgrid?view=aspnetcore-11.0)

Report whether the docs say which value the sort parameter carries, since that determines what a hand-written link has to contain.

## What to report

Report results using the format described in the [validation testing manual](https://github.com/dotnet/aspnetcore/issues/68479). Include link to a repository with the test app.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.