query-string-bindable

Bind Blazor filter models to URL query strings with two-way synchronization.

4|1|Updated Mar 15, 2026
One-click install
npx skills add https://github.com/FaysilAlshareef/dotnet-ai-kit --skill query-string-bindable
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: query-string-bindable
Source: https://github.com/FaysilAlshareef/dotnet-ai-kit/tree/main/skills/microservice/controlpanel/query-string-bindable
Command: npx skills add https://github.com/FaysilAlshareef/dotnet-ai-kit --skill query-string-bindable

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Keeps filter state in the browser URL so users can bookmark, share, and navigate back/forward without losing filter, pagination, or sort settings.

Core Features & Use Cases

  • Two-way URL binding: Map filter models to query strings and restore state from the URL on navigation.
  • Reactive UI updates: Uses INotifyPropertyChanged to trigger data grid reloads when filters change.
  • Debounce and API mapping: Prevents excessive requests from text inputs and maps filter state to API query parameters for server-side paging and filtering.
  • Use Case: Implement a searchable, paginated Blazor orders grid where users can share filtered views by URL.

Quick Start

Bind your filter model to the NavigationManager so filters update the URL and the data grid reloads when properties change.

Frequently Asked Questions about query-string-bindable

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I make Blazor filters bookmarkable so they persist in the URL?

Blazor filters become bookmarkable by synchronizing filter model state with the URL query string via NavigationManager binding. This two-way mapping ensures search, pagination, and sort settings persist across navigation and reloads so views can be shared.

How does INotifyPropertyChanged trigger data grid reloads when URL query string filters change?

INotifyPropertyChanged integration detects filter model property changes and triggers reactive UI updates. When URL query parameters update the bound filter model, the property change notification automatically reloads the data grid with the new filtered results.

What's the best way to prevent excessive API calls when binding text search filters to a URL query string in Blazor?

Applying debounce to text input filters prevents excessive API calls during URL query string binding. Debounce delays the API request and query parameter mapping until typing pauses, ensuring the data grid only reloads once the user finishes entering search criteria.

Can I map Blazor filter state directly to API query parameters for server-side paging and sorting?

Blazor filter state maps directly to API query parameters for server-side paging, filtering, and sorting. The filter model properties translate into API-compatible query parameters, enabling the backend to process search, pagination, and status criteria efficiently.

Does this query string binding approach work for Blazor control panels with multiple filter types?

Query string binding works for Blazor control panels by supporting multiple filter types simultaneously. Search text, pagination numbers, sorting columns, and status selections all map to distinct URL query parameters, restoring full panel state on navigation.

Why do my Blazor data grid filters reset when navigating back or refreshing the page?

Filters reset because the filter state lacks URL query string synchronization. Without binding the filter model to the NavigationManager, Blazor cannot restore search, pagination, or sort settings from the URL during back, forward, or reload navigation scenarios.