{"id":22681745,"url":"https://github.com/diegofrata/blazorx.navigationstate","last_synced_at":"2025-04-12T17:11:10.886Z","repository":{"id":143422658,"uuid":"287066258","full_name":"diegofrata/BlazorX.NavigationState","owner":"diegofrata","description":"BlazorX.NavigationState provides a set of utilities that allow you to observe and bind query strings to Blazor components","archived":false,"fork":false,"pushed_at":"2020-08-14T18:48:48.000Z","size":36,"stargazers_count":8,"open_issues_count":0,"forks_count":2,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-26T11:39:22.805Z","etag":null,"topics":["aspnet","blazor","csharp","dotnet","razor"],"latest_commit_sha":null,"homepage":"","language":"C#","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/diegofrata.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2020-08-12T16:46:27.000Z","updated_at":"2023-08-12T16:45:45.000Z","dependencies_parsed_at":"2024-01-18T14:41:21.496Z","dependency_job_id":"e3666b46-da90-4601-925b-e6459dd1a31c","html_url":"https://github.com/diegofrata/BlazorX.NavigationState","commit_stats":null,"previous_names":["diegofrata/blazor.navigationstate"],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegofrata%2FBlazorX.NavigationState","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegofrata%2FBlazorX.NavigationState/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegofrata%2FBlazorX.NavigationState/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/diegofrata%2FBlazorX.NavigationState/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/diegofrata","download_url":"https://codeload.github.com/diegofrata/BlazorX.NavigationState/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248602313,"owners_count":21131616,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["aspnet","blazor","csharp","dotnet","razor"],"created_at":"2024-12-09T20:13:31.432Z","updated_at":"2025-04-12T17:11:10.859Z","avatar_url":"https://github.com/diegofrata.png","language":"C#","funding_links":[],"categories":[],"sub_categories":[],"readme":"![Nuget](https://img.shields.io/nuget/v/BlazorX.NavigationState)\n# BlazorX.NavigationState\nBlazorX.NavigationState provides a set of utilities that allow you to observe and bind query strings to Blazor components.\n\n### Getting Started\n\n1. Add the package BlazorX.NavigationState to your Blazor project.\n2. Register BlazorX.NavigationState with your host builder as follows:\n\n    ```csharp\n    builder.Services.AddNavigationState();\n    ```\n3. Add the namespace BlazorX.NavigationState to your _Imports.razor.\n\n### Query Property\n\nYou can use the method QueryProperty on NavigationState to create an object \nthat will track a given query string parameter. With this object you can bind\nto controls just like a normal value. \n\nIn the below example, anything the user types in the input will be reflected in\nthe URL (eg. http://localhost/?name=Diego) and vice-versa.\n\n ```razor\n@inject INavigationState NavigationState\n\n\u003cinput type=\"text\" @bind-Value=\"Name.Value\" /\u003e\n\n@code {\n    IQueryParameter\u003cstring\u003e Name;\n    \n    protected override void OnInitialized() \n    {\n        Name = NavigationState.QueryProperty(\"name\", \"\");\n    }\n}\n```\n\n\n### Query Array\n\nThe QueryArray class deals with query strings that can appear multiple\ntimes in the URL. It's useful to deal with collection of things. \n\n ```razor\n@inject INavigationState NavigationState\n\n\u003cul\u003e\n@foreach (var item in Numbers.Value) \n{\n    \u003cli\u003e@item\u003c/li\u003e\n}\n\u003c/ul\u003e\n\n\n@code {\n    IQueryParameter\u003cint\u003e Numbers;\n    \n    protected override void OnInitialized() \n    {\n        Numbers = NavigationState.QueryArray(\"numbers\", new int[0]);\n    }\n}\n```\n\n### Observable\n\nBoth QueryProperty and QueryArray supports observables via the property ValueStream:\n\n ```razor\n@inject INavigationState NavigationState\n\n@Sum\n\u003cbutton @onclick=\"@(() =\u003e Number.Value += 1)\"\u003eIncrement\u003c/button\u003e \n\n@code {\n    IQueryParameter\u003cint\u003e Number;\n    int Sum;\n    \n    protected override void OnInitialized() \n    {\n        Number = NavigationState.QueryProperty(\"n\", 0);\n        \n        Number.ValueStream.Subscribe(x =\u003e \n        {\n            Sum += x;\n            StateChanged();\n        });\n    }\n}\n ```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegofrata%2Fblazorx.navigationstate","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdiegofrata%2Fblazorx.navigationstate","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdiegofrata%2Fblazorx.navigationstate/lists"}