https://github.com/diegofrata/blazorx.navigationstate

BlazorX.NavigationState provides a set of utilities that allow you to observe and bind query strings to Blazor components
https://github.com/diegofrata/blazorx.navigationstate

aspnet blazor csharp dotnet razor

Last synced: about 1 year ago
JSON representation

BlazorX.NavigationState provides a set of utilities that allow you to observe and bind query strings to Blazor components

• Host: GitHub
• URL: https://github.com/diegofrata/blazorx.navigationstate
• Owner: diegofrata
• License: mit
• Created: 2020-08-12T16:46:27.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2020-08-14T18:48:48.000Z (almost 6 years ago)
• Last Synced: 2025-03-26T11:39:22.805Z (over 1 year ago)
• Topics: aspnet, blazor, csharp, dotnet, razor
• Language: C#
• Homepage:
• Size: 35.2 KB
• Stars: 8
• Watchers: 1
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
![Nuget](https://img.shields.io/nuget/v/BlazorX.NavigationState)

# BlazorX.NavigationState

BlazorX.NavigationState provides a set of utilities that allow you to observe and bind query strings to Blazor components.

### Getting Started

1. Add the package BlazorX.NavigationState to your Blazor project.

2. Register BlazorX.NavigationState with your host builder as follows:

    ```csharp

    builder.Services.AddNavigationState();

    ```

3. Add the namespace BlazorX.NavigationState to your _Imports.razor.

### Query Property

You can use the method QueryProperty on NavigationState to create an object 

that will track a given query string parameter. With this object you can bind

to controls just like a normal value. 

In the below example, anything the user types in the input will be reflected in

the URL (eg. http://localhost/?name=Diego) and vice-versa.

 ```razor

@inject INavigationState NavigationState

@code {

    IQueryParameter Name;

    

    protected override void OnInitialized() 

    {

        Name = NavigationState.QueryProperty("name", "");

    }

}

```

### Query Array

The QueryArray class deals with query strings that can appear multiple

times in the URL. It's useful to deal with collection of things. 

 ```razor

@inject INavigationState NavigationState



@foreach (var item in Numbers.Value) 

{

    
@item

}



@code {

    IQueryParameter Numbers;

    

    protected override void OnInitialized() 

    {

        Numbers = NavigationState.QueryArray("numbers", new int[0]);

    }

}

```

### Observable

Both QueryProperty and QueryArray supports observables via the property ValueStream:

 ```razor

@inject INavigationState NavigationState

@Sum

 Number.Value += 1)">Increment 

@code {

    IQueryParameter Number;

    int Sum;

    

    protected override void OnInitialized() 

    {

        Number = NavigationState.QueryProperty("n", 0);

        

        Number.ValueStream.Subscribe(x => 

        {

            Sum += x;

            StateChanged();

        });

    }

}

 ```