From 629174c25bf34ff06a32e4ee05e3068013331466 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Tue, 10 Aug 2021 09:45:03 -0500 Subject: [PATCH 1/8] Blazor 6.0 query string enhancements Updates Updates --- aspnetcore/blazor/fundamentals/routing.md | 196 +++++++++++++++++++--- 1 file changed, 177 insertions(+), 19 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/routing.md b/aspnetcore/blazor/fundamentals/routing.md index 64ba379995de..31cbb3d5856c 100644 --- a/aspnetcore/blazor/fundamentals/routing.md +++ b/aspnetcore/blazor/fundamentals/routing.md @@ -45,8 +45,6 @@ Components support multiple route templates using multiple [`@page` directives]( [!INCLUDE[](~/6.0/blazor/includes/layout-page-preview-7.md)] -The doesn't interact with query string values. To work with query strings, see the [Query string and parse parameters](#query-string-and-parse-parameters) section. - ## Focus an element on navigation Use the `FocusOnNavigate` component to set the UI focus to an element based on a CSS selector after navigating from one page to another. You can see the `FocusOnNavigate` component in use by the `App` component of an app generated from a Blazor project template. @@ -118,9 +116,6 @@ protected override void OnParametersSet() } ``` -> [!NOTE] -> Route parameters don't work with query string values. To work with query strings, see the [Query string and parse parameters](#query-string-and-parse-parameters) section. - ## Route constraints A route constraint enforces type matching on a route segment to a component. @@ -134,9 +129,6 @@ In the following example, the route to the `User` component only matches if: [!code-razor[](~/6.0/blazor/samples/BlazorSample_WebAssembly/Pages/routing/User.razor?highlight=1)] -> [!NOTE] -> Route constraints don't work with query string values. To work with query strings, see the [Query string and parse parameters](#query-string-and-parse-parameters) section. - The route constraints shown in the following table are available. For the route constraints that match the invariant culture, see the warning below the table for more information. | Constraint | Example | Example Matches | Invariant
culture
matching | @@ -232,12 +224,15 @@ Use to manage URIs and | | Gets the current absolute URI. | | | Gets the base URI (with a trailing slash) that can be prepended to relative URI paths to produce an absolute URI. Typically, corresponds to the `href` attribute on the document's `` element in `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server). | | | Navigates to the specified URI. If `forceLoad` is `true`:
  • Client-side routing is bypassed.
  • The browser is forced to load the new page from the server, whether or not the URI is normally handled by the client-side router.
| -| | An event that fires when the navigation location has changed. | +| | An event that fires when the navigation location has changed. For more information, see the [Location changes](#location-changes) section. | | | Converts a relative URI into an absolute URI. | | | Given a base URI (for example, a URI previously returned by ), converts an absolute URI into a URI relative to the base URI prefix. | +| `GetUriWithQueryParameter` | Returns a URI constructed by updating with a single parameter added, updated, or removed. For more information, see the [Query strings](#navigation-manager-query-string-api) section. | [!INCLUDE[](~/6.0/blazor/includes/layout-page-preview-7.md)] +## Location changes + For the event, provides the following information about navigation events: * : The URL of the new location. @@ -258,25 +253,188 @@ The following component: For more information on component disposal, see . -## Query string and parse parameters +## Query strings -The query string of a request is obtained from the property: +*The features described in this section apply to ASP.NET Core 6.0 Preview 7 or later. ASP.NET Core 6.0 Preview 7 is scheduled for release in August. ASP.NET Core 6.0 is scheduled for release later this year.* -```razor -@inject NavigationManager NavigationManager +### Supply a parameter value from a query string parameter -... +The `[SupplyParameterFromQueryString]` attribute provides one-way binding from the current URL to the a component parameter. -var query = new Uri(NavigationManager.Uri).Query; + + + + + + + + + + + +Use `NavigationManager.GetUriWithQueryParameter` to add, change, or remove one or more query string parameters on the current URL: + +```csharp +Nav.GetUriWithQueryParameter("{NAME}", {VALUE}) ``` -To parse a query string's parameters, one approach is to use [`URLSearchParams`](https://developer.mozilla.org/docs/Web/API/URLSearchParams) with [JavaScript (JS) interop](xref:blazor/js-interop/call-javascript-from-dotnet): +For the preceding example: -```javascript -export createQueryString = (string queryString) => new URLSearchParams(queryString); +* The `{NAME}` placeholder specifies the query parameter name. The `{VALUE}` placeholder specifies the value. +* A string is returned equal to the current URL with a single parameter: + * Added if the query parameter name doesn't exist in the current URL. + * Updated to the value provided if the query parameter exists in the current URL. + * Removed if the type of the provided value is nullable and the value is `null`. +* The correct culture-invariant formatting is applied for the given type (`C). +* The query parameter name and value are URL encoded. +* All of the values with the matching query parameter name are replaced if there are multiple instances of the type. +* If the value is an `IEnumerable` for one of the supported types, then multiple name/value pairs are emitted. + +Call `NavigationManager.GetUriWithQueryParameters` to create a URI constructed from with multiple parameters added, updated, or removed. For each value, the framework uses `value?.GetType()` to determine the runtime type for each query parameter and selects the correct culture-invariant formatting. The framework throws for unsupported types. + +```csharp +Nav.GetUriWithQueryParameters({PARAMETERS}) ``` -For more information on JavaScript isolation with JavaScript modules, see . +The `{PARAMETERS}` placeholder is an `IReadOnlyDictionary`. + +Pass a URI string to `GetUriWithQueryParameters` to generate a new URI from a provided URI with multiple parameters added, updated, or removed. For each value, the framework uses `value?.GetType()` to determine the runtime type for each query parameter and selects the correct culture-invariant formatting. The framework throws for unsupported types. + +```csharp +Nav.GetUriWithQueryParameters("{URI}", {PARAMETERS}) +``` + +* The `{URI}` placeholder is the URI with or without a query string. +* The `{PARAMETERS}` placeholder is an `IReadOnlyDictionary`. + +Supported types are identical to supported types for route constraints: + +* `bool` +* `DateTime` +* `decimal` +* `double` +* `float` +* `Guid` +* `int` +* `long` +* `string` + +### Replace the query parameter value when the parameter exists + +```csharp +Nav.GetUriWithQueryParameter("full name", "John Doe") +``` + +| Current URL | Generated URL | +| --- | --- | +| `scheme://host/?full%20name=Bob%20Joe&age=42` | `scheme://host/?full%20name=John%20Doe&age=42` | +| `scheme://host/?fUlL%20nAmE=Bob%20Joe&AgE=42` | `scheme://host/?full%20name=John%20Doe&AgE=42` | +| `scheme://host/?full%20name=Sally%20Smith&age=42&full%20name=Emily` | `scheme://host/?full%20name=John%20Doe&age=42&full%20name=John%20Doe` | +| `scheme://host/?full%20name=&age=42` | `scheme://host/?full%20name=John%20Doe&age=42` | +| `scheme://host/?full%20name=` | `scheme://host/?full%20name=John%20Doe` | + +### Append the query parameter and value when the parameter doesn't exist + +```csharp +Nav.GetUriWithQueryParameter("name", "John Doe") +``` + +| Current URL | Generated URL | +| --- | --- | +| `scheme://host/?age=42` | `scheme://host/?age=42&name=John%20Doe` | +| `scheme://host/` | `scheme://host/?name=John%20Doe` | +| `scheme://host/?` | `scheme://host/?name=John%20Doe` | + +### Removes a query parameter when the parameter value is `null` + +```csharp +Nav.GetUriWithQueryParameter("full name", (string)null) +``` + +| Current URL | Generated URL | +| --- | --- | +| `scheme://host/?full%20name=Bob%20Joe&age=42` | `scheme://host/?age=42` | +| `scheme://host/?full%20name=Sally%Smith&age=42&full%20name=Emily%20Karlsen` | `scheme://host/?age=42` | +| `scheme://host/?full%20name=Sally%Smith&age=42&FuLl%20NaMe=Emily%20Karlsen` | `scheme://host/?age=42` | +| `scheme://host/?full%20name=&age=42` | `scheme://host/?age=42` | +| `scheme://host/?full%20name=` | `scheme://host/` | + +### Add, update, and remove query parameters + +In the following example: + +* `name` is removed, if present. +* `age` is added with a value of `25` (`int`), if not present. If present, `age` is updated to a value of `25`. +* `eye color` is added or updated to a value of `green`. + +```csharp +Nav.GetUriWithQueryParameters( + new Dictionary + { + ["name"] = null, + ["age"] = (int?)25, + ["eye color"] = "green" + }) +``` + +| Current URL | Generated URL | +| --- | --- | +| `scheme://host/?name=Bob%20Joe&age=42` | `scheme://host/?age=25&eye%20color=green` | +| `scheme://host/?NaMe=Bob%20Joe&AgE=42` | `scheme://host/?age=25&eye%20color=green` | +| `scheme://host/?name=Bob%20Joe&age=42&keepme=true` | `scheme://host/?age=25&keepme=true&eye%20color=green` | +| `scheme://host/?age=42&eye%20color=87` | `scheme://host/?age=25&eye%20color=green` | +| `scheme://host/?` | `scheme://host/?age=25&eye%20color=green` | +| `scheme://host/` | `scheme://host/?age=25&eye%20color=green` | + + +### Support for enumerable values + +In the following example: + +* `full name` is added or updated to `John Doe`, a single value. +* `ping` ...... XXXXXXXXXXXXXXX + +```csharp +Nav.GetUriWithQueryParameters( + new Dictionary + { + ["full name"] = "John Doe", + ["ping"] = new int?[] { 35, 16, null, 87, 240 } + }) +``` + +| Current URL | Generated URL | +| --- | --- | +| `scheme://host/?full%20name=Bob%20Joe&ping=8&ping=300` | `scheme://host/?full%20name=John%20Doe&ping=35&ping=16&ping=87&ping=240` | +| `scheme://host/?ping=8&full%20name=Bob%20Joe&ping=300` | `scheme://host/?ping=35&full%20name=John%20Doe&ping=16&ping=87&ping=240` | +| `scheme://host/?ping=8&ping=300&ping=50&ping=68&ping=42` | `scheme://host/?ping=35&ping=16&ping=87&ping=240&full%20name=John%20Doe` | + +### Navigate with an added or modified query string + +To navigate with an added or modified query string, pass a generated URL to . + +The following example calls: + +* `GetUriWithQueryParameter` to add or replace the `name` query parameter using a value of `John Doe`. +* Calls to trigger navigation to the new URL. + +```csharp +Nav.NavigateTo(Nav.GetUriWithQueryParameter("name", "John Doe")); +``` + + + + + + + + + + + + + + ## User interaction with `` content From 81f78ea20c6b49d3d2e77ed1741325d5257412d4 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Wed, 11 Aug 2021 13:35:45 -0500 Subject: [PATCH 2/8] Updates --- aspnetcore/blazor/fundamentals/routing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/fundamentals/routing.md b/aspnetcore/blazor/fundamentals/routing.md index 31cbb3d5856c..9e8a271ce58c 100644 --- a/aspnetcore/blazor/fundamentals/routing.md +++ b/aspnetcore/blazor/fundamentals/routing.md @@ -227,7 +227,7 @@ Use to manage URIs and | | An event that fires when the navigation location has changed. For more information, see the [Location changes](#location-changes) section. | | | Converts a relative URI into an absolute URI. | | | Given a base URI (for example, a URI previously returned by ), converts an absolute URI into a URI relative to the base URI prefix. | -| `GetUriWithQueryParameter` | Returns a URI constructed by updating with a single parameter added, updated, or removed. For more information, see the [Query strings](#navigation-manager-query-string-api) section. | +| `GetUriWithQueryParameter` | Returns a URI constructed by updating with a single parameter added, updated, or removed. For more information, see the [Query strings](#query-strings) section. | [!INCLUDE[](~/6.0/blazor/includes/layout-page-preview-7.md)] From e6b55d5e79d13eff6cf5d37ccbcfafa5de82add8 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Wed, 11 Aug 2021 15:49:17 -0500 Subject: [PATCH 3/8] Updates --- aspnetcore/blazor/fundamentals/routing.md | 6 ------ 1 file changed, 6 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/routing.md b/aspnetcore/blazor/fundamentals/routing.md index 9e8a271ce58c..232ca5b50a40 100644 --- a/aspnetcore/blazor/fundamentals/routing.md +++ b/aspnetcore/blazor/fundamentals/routing.md @@ -43,8 +43,6 @@ Components support multiple route templates using multiple [`@page` directives]( > [!IMPORTANT] > For URLs to resolve correctly, the app must include a `` tag in its `wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Layout.cshtml` file (Blazor Server) with the app base path specified in the `href` attribute. For more information, see . -[!INCLUDE[](~/6.0/blazor/includes/layout-page-preview-7.md)] - ## Focus an element on navigation Use the `FocusOnNavigate` component to set the UI focus to an element based on a CSS selector after navigating from one page to another. You can see the `FocusOnNavigate` component in use by the `App` component of an app generated from a Blazor project template. @@ -229,8 +227,6 @@ Use to manage URIs and | | Given a base URI (for example, a URI previously returned by ), converts an absolute URI into a URI relative to the base URI prefix. | | `GetUriWithQueryParameter` | Returns a URI constructed by updating with a single parameter added, updated, or removed. For more information, see the [Query strings](#query-strings) section. | -[!INCLUDE[](~/6.0/blazor/includes/layout-page-preview-7.md)] - ## Location changes For the event, provides the following information about navigation events: @@ -255,8 +251,6 @@ For more information on component disposal, see Date: Thu, 12 Aug 2021 06:44:49 -0500 Subject: [PATCH 4/8] Updates --- aspnetcore/blazor/fundamentals/routing.md | 172 ++++++++++++++-------- 1 file changed, 111 insertions(+), 61 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/routing.md b/aspnetcore/blazor/fundamentals/routing.md index 232ca5b50a40..c5fb231ad545 100644 --- a/aspnetcore/blazor/fundamentals/routing.md +++ b/aspnetcore/blazor/fundamentals/routing.md @@ -221,7 +221,7 @@ Use to manage URIs and | ------ | ----------- | | | Gets the current absolute URI. | | | Gets the base URI (with a trailing slash) that can be prepended to relative URI paths to produce an absolute URI. Typically, corresponds to the `href` attribute on the document's `` element in `wwwroot/index.html` (Blazor WebAssembly) or `Pages/_Layout.cshtml` (Blazor Server). | -| | Navigates to the specified URI. If `forceLoad` is `true`:
  • Client-side routing is bypassed.
  • The browser is forced to load the new page from the server, whether or not the URI is normally handled by the client-side router.
| +| | Navigates to the specified URI. If `forceLoad` is `true`:
  • Client-side routing is bypassed.
  • The browser is forced to load the new page from the server, whether or not the URI is normally handled by the client-side router.
If `replace` is `true`, the current URI in the browser history is replaced instead of pushing a new URI onto the history stack. | | | An event that fires when the navigation location has changed. For more information, see the [Location changes](#location-changes) section. | | | Converts a relative URI into an absolute URI. | | | Given a base URI (for example, a URI previously returned by ), converts an absolute URI into a URI relative to the base URI prefix. | @@ -251,51 +251,110 @@ For more information on component disposal, see [!NOTE] +> Component parameters can only receive query parameter values in routable components with an `@page` directive. +Component parameters supplied from the query string support the following types: +* `bool`, `DateTime`, `decimal`, `double`, `float`, `Guid`, `int`, `long`, `string`. +* Nullable variants of the preceding types (except `string`, which doesn't have a nullable variant). +* Arrays of the preceding types, whether they're nullable or not nullable. +The correct culture-invariant formatting is applied for the given type (). +Specify the `[SupplyParameterFromQuery]` attribute's `Name` property to use a query parameter name different from the component parameter name. In the following example, the C# name of the component parameter is `{COMPONENT PARAMETER NAME}`. A different query parameter name is specified for the `{QUERY PARAMETER NAME}` placeholder: +```csharp +[Parameter] +[SupplyParameterFromQuery(Name = "{QUERY PARAMETER NAME}")] +public string {COMPONENT PARAMETER NAME} { get; set; } +``` +In the following example with a URL of `/search?filter=scifi%20stars&page=3&star=LeVar%20Burton&star=Gary%20Oldman`: +* The `Filter` property resolves to `scifi stars`. +* The `Page` property resolves to `3`. +* The `Stars` array is filled from query parameters named `star` (`Name = "star"`) and resolves to `LeVar Burton` and `Gary Oldman`. +`Pages/Search.razor`: +```razor +@page "/search" +

Search Example

+

Filter: @Filter

-Use `NavigationManager.GetUriWithQueryParameter` to add, change, or remove one or more query string parameters on the current URL: +

Page: @Page

-```csharp -Nav.GetUriWithQueryParameter("{NAME}", {VALUE}) +

Assignees:

+ +
    + @foreach (var name in Stars) + { +
  • @name
  • + } +
+ +@code { + [Parameter] + [SupplyParameterFromQuery] + public string Filter { get; set; } + + [Parameter] + [SupplyParameterFromQuery] + public int? Page { get; set; } + + [Parameter] + [SupplyParameterFromQuery(Name = "star")] + public string[] Stars { get; set; } +} +``` + +Use `NavigationManager.GetUriWithQueryParameter` to add, change, or remove one or more query parameters on the current URL: + +```razor +@inject NavigationManager NavigationManager + +... + +NavigationManager.GetUriWithQueryParameter("{NAME}", {VALUE}) ``` For the preceding example: -* The `{NAME}` placeholder specifies the query parameter name. The `{VALUE}` placeholder specifies the value. +* The `{NAME}` placeholder specifies the query parameter name. The `{VALUE}` placeholder specifies the value as a supported type. Supported types are listed later in this section. * A string is returned equal to the current URL with a single parameter: * Added if the query parameter name doesn't exist in the current URL. * Updated to the value provided if the query parameter exists in the current URL. * Removed if the type of the provided value is nullable and the value is `null`. -* The correct culture-invariant formatting is applied for the given type (`C). -* The query parameter name and value are URL encoded. +* The correct culture-invariant formatting is applied for the given type (). +* The query parameter name and value are URL-encoded. * All of the values with the matching query parameter name are replaced if there are multiple instances of the type. -* If the value is an `IEnumerable` for one of the supported types, then multiple name/value pairs are emitted. +* If the value is an `IEnumerable` for one of the supported types, then multiple name/value pairs are emitted. Supported types are listed later in this section. -Call `NavigationManager.GetUriWithQueryParameters` to create a URI constructed from with multiple parameters added, updated, or removed. For each value, the framework uses `value?.GetType()` to determine the runtime type for each query parameter and selects the correct culture-invariant formatting. The framework throws for unsupported types. +Call `NavigationManager.GetUriWithQueryParameters` to create a URI constructed from with multiple parameters added, updated, or removed. For each value, the framework uses `value?.GetType()` to determine the runtime type for each query parameter and selects the correct culture-invariant formatting. The framework throws an error for unsupported types. -```csharp -Nav.GetUriWithQueryParameters({PARAMETERS}) +```razor +@inject NavigationManager NavigationManager + +... + +NavigationManager.GetUriWithQueryParameters({PARAMETERS}) ``` The `{PARAMETERS}` placeholder is an `IReadOnlyDictionary`. -Pass a URI string to `GetUriWithQueryParameters` to generate a new URI from a provided URI with multiple parameters added, updated, or removed. For each value, the framework uses `value?.GetType()` to determine the runtime type for each query parameter and selects the correct culture-invariant formatting. The framework throws for unsupported types. +Pass a URI string to `GetUriWithQueryParameters` to generate a new URI from a provided URI with multiple parameters added, updated, or removed. For each value, the framework uses `value?.GetType()` to determine the runtime type for each query parameter and selects the correct culture-invariant formatting. The framework throws an error for unsupported types. Supported types are listed later in this section. -```csharp -Nav.GetUriWithQueryParameters("{URI}", {PARAMETERS}) +```razor +@inject NavigationManager NavigationManager + +... + +NavigationManager.GetUriWithQueryParameters("{URI}", {PARAMETERS}) ``` * The `{URI}` placeholder is the URI with or without a query string. @@ -313,43 +372,48 @@ Supported types are identical to supported types for route constraints: * `long` * `string` -### Replace the query parameter value when the parameter exists +Supported types include: + +* Nullable variants of the preceding types (except `string`, which doesn't have a nullable variant). +* Arrays of the preceding types, whether they're nullable or not nullable. + +### Replace a query parameter value when the parameter exists ```csharp -Nav.GetUriWithQueryParameter("full name", "John Doe") +NavigationManager.GetUriWithQueryParameter("full name", "Morena Baccarin") ``` | Current URL | Generated URL | | --- | --- | -| `scheme://host/?full%20name=Bob%20Joe&age=42` | `scheme://host/?full%20name=John%20Doe&age=42` | -| `scheme://host/?fUlL%20nAmE=Bob%20Joe&AgE=42` | `scheme://host/?full%20name=John%20Doe&AgE=42` | -| `scheme://host/?full%20name=Sally%20Smith&age=42&full%20name=Emily` | `scheme://host/?full%20name=John%20Doe&age=42&full%20name=John%20Doe` | -| `scheme://host/?full%20name=&age=42` | `scheme://host/?full%20name=John%20Doe&age=42` | -| `scheme://host/?full%20name=` | `scheme://host/?full%20name=John%20Doe` | +| `scheme://host/?full%20name=Alan%20Tudyk&age=42` | `scheme://host/?full%20name=Morena%20Baccarin&age=42` | +| `scheme://host/?fUlL%20nAmE=Alan%20Tudyk&AgE=42` | `scheme://host/?full%20name=Morena%20Baccarin&AgE=42` | +| `scheme://host/?full%20name=Jewel%20Staite&age=42&full%20name=Summer` | `scheme://host/?full%20name=Morena%20Baccarin&age=42&full%20name=Morena%20Baccarin` | +| `scheme://host/?full%20name=&age=42` | `scheme://host/?full%20name=Morena%20Baccarin&age=42` | +| `scheme://host/?full%20name=` | `scheme://host/?full%20name=Morena%20Baccarin` | -### Append the query parameter and value when the parameter doesn't exist +### Append a query parameter and value when the parameter doesn't exist ```csharp -Nav.GetUriWithQueryParameter("name", "John Doe") +NavigationManager.GetUriWithQueryParameter("name", "Morena Baccarin") ``` | Current URL | Generated URL | | --- | --- | -| `scheme://host/?age=42` | `scheme://host/?age=42&name=John%20Doe` | -| `scheme://host/` | `scheme://host/?name=John%20Doe` | -| `scheme://host/?` | `scheme://host/?name=John%20Doe` | +| `scheme://host/?age=42` | `scheme://host/?age=42&name=Morena%20Baccarin` | +| `scheme://host/` | `scheme://host/?name=Morena%20Baccarin` | +| `scheme://host/?` | `scheme://host/?name=Morena%20Baccarin` | -### Removes a query parameter when the parameter value is `null` +### Remove a query parameter when the parameter value is `null` ```csharp -Nav.GetUriWithQueryParameter("full name", (string)null) +NavigationManager.GetUriWithQueryParameter("full name", (string)null) ``` | Current URL | Generated URL | | --- | --- | -| `scheme://host/?full%20name=Bob%20Joe&age=42` | `scheme://host/?age=42` | -| `scheme://host/?full%20name=Sally%Smith&age=42&full%20name=Emily%20Karlsen` | `scheme://host/?age=42` | -| `scheme://host/?full%20name=Sally%Smith&age=42&FuLl%20NaMe=Emily%20Karlsen` | `scheme://host/?age=42` | +| `scheme://host/?full%20name=Alan%20Tudyk&age=42` | `scheme://host/?age=42` | +| `scheme://host/?full%20name=Sally%20Smith&age=42&full%20name=Summer%20Glau` | `scheme://host/?age=42` | +| `scheme://host/?full%20name=Sally%20Smith&age=42&FuLl%20NaMe=Summer%20Glau` | `scheme://host/?age=42` | | `scheme://host/?full%20name=&age=42` | `scheme://host/?age=42` | | `scheme://host/?full%20name=` | `scheme://host/` | @@ -362,7 +426,7 @@ In the following example: * `eye color` is added or updated to a value of `green`. ```csharp -Nav.GetUriWithQueryParameters( +NavigationManager.GetUriWithQueryParameters( new Dictionary { ["name"] = null, @@ -373,35 +437,34 @@ Nav.GetUriWithQueryParameters( | Current URL | Generated URL | | --- | --- | -| `scheme://host/?name=Bob%20Joe&age=42` | `scheme://host/?age=25&eye%20color=green` | -| `scheme://host/?NaMe=Bob%20Joe&AgE=42` | `scheme://host/?age=25&eye%20color=green` | -| `scheme://host/?name=Bob%20Joe&age=42&keepme=true` | `scheme://host/?age=25&keepme=true&eye%20color=green` | +| `scheme://host/?name=Alan%20Tudyk&age=42` | `scheme://host/?age=25&eye%20color=green` | +| `scheme://host/?NaMe=Alan%20Tudyk&AgE=42` | `scheme://host/?age=25&eye%20color=green` | +| `scheme://host/?name=Alan%20Tudyk&age=42&keepme=true` | `scheme://host/?age=25&keepme=true&eye%20color=green` | | `scheme://host/?age=42&eye%20color=87` | `scheme://host/?age=25&eye%20color=green` | | `scheme://host/?` | `scheme://host/?age=25&eye%20color=green` | | `scheme://host/` | `scheme://host/?age=25&eye%20color=green` | - ### Support for enumerable values In the following example: -* `full name` is added or updated to `John Doe`, a single value. -* `ping` ...... XXXXXXXXXXXXXXX +* `full name` is added or updated to `Morena Baccarin`, a single value. +* `ping` parameters are added or replaced with `35`, `16`, `87` and `240`. ```csharp -Nav.GetUriWithQueryParameters( +NavigationManager.GetUriWithQueryParameters( new Dictionary { - ["full name"] = "John Doe", + ["full name"] = "Morena Baccarin", ["ping"] = new int?[] { 35, 16, null, 87, 240 } }) ``` | Current URL | Generated URL | | --- | --- | -| `scheme://host/?full%20name=Bob%20Joe&ping=8&ping=300` | `scheme://host/?full%20name=John%20Doe&ping=35&ping=16&ping=87&ping=240` | -| `scheme://host/?ping=8&full%20name=Bob%20Joe&ping=300` | `scheme://host/?ping=35&full%20name=John%20Doe&ping=16&ping=87&ping=240` | -| `scheme://host/?ping=8&ping=300&ping=50&ping=68&ping=42` | `scheme://host/?ping=35&ping=16&ping=87&ping=240&full%20name=John%20Doe` | +| `scheme://host/?full%20name=Alan%20Tudyk&ping=8&ping=300` | `scheme://host/?full%20name=Morena%20Baccarin&ping=35&ping=16&ping=87&ping=240` | +| `scheme://host/?ping=8&full%20name=Alan%20Tudyk&ping=300` | `scheme://host/?ping=35&full%20name=Morena%20Baccarin&ping=16&ping=87&ping=240` | +| `scheme://host/?ping=8&ping=300&ping=50&ping=68&ping=42` | `scheme://host/?ping=35&ping=16&ping=87&ping=240&full%20name=Morena%20Baccarin` | ### Navigate with an added or modified query string @@ -409,27 +472,14 @@ To navigate with an added or modified query string, pass a generated URL to to trigger navigation to the new URL. ```csharp -Nav.NavigateTo(Nav.GetUriWithQueryParameter("name", "John Doe")); +NavigationManager.NavigateTo( + NavigationManager.GetUriWithQueryParameter("name", "Morena Baccarin")); ``` - - - - - - - - - - - - - - ## User interaction with `` content The component can indicate to the user that a page transition is occurring. From 5b169c8911ade754d6f789afeb34203192d20c04 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 12 Aug 2021 07:31:09 -0500 Subject: [PATCH 5/8] Updates --- aspnetcore/blazor/fundamentals/routing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/aspnetcore/blazor/fundamentals/routing.md b/aspnetcore/blazor/fundamentals/routing.md index c5fb231ad545..a29d92c9ecef 100644 --- a/aspnetcore/blazor/fundamentals/routing.md +++ b/aspnetcore/blazor/fundamentals/routing.md @@ -387,7 +387,7 @@ NavigationManager.GetUriWithQueryParameter("full name", "Morena Baccarin") | --- | --- | | `scheme://host/?full%20name=Alan%20Tudyk&age=42` | `scheme://host/?full%20name=Morena%20Baccarin&age=42` | | `scheme://host/?fUlL%20nAmE=Alan%20Tudyk&AgE=42` | `scheme://host/?full%20name=Morena%20Baccarin&AgE=42` | -| `scheme://host/?full%20name=Jewel%20Staite&age=42&full%20name=Summer` | `scheme://host/?full%20name=Morena%20Baccarin&age=42&full%20name=Morena%20Baccarin` | +| `scheme://host/?full%20name=Jewel%20Staite&age=42&full%20name=Summer%20Glau` | `scheme://host/?full%20name=Morena%20Baccarin&age=42&full%20name=Morena%20Baccarin` | | `scheme://host/?full%20name=&age=42` | `scheme://host/?full%20name=Morena%20Baccarin&age=42` | | `scheme://host/?full%20name=` | `scheme://host/?full%20name=Morena%20Baccarin` | From c90fddb9dafb522de72b1a5cfae5006fc7228f6a Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 12 Aug 2021 10:01:17 -0500 Subject: [PATCH 6/8] Updates --- aspnetcore/blazor/fundamentals/routing.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/routing.md b/aspnetcore/blazor/fundamentals/routing.md index a29d92c9ecef..d5dcc3e5095d 100644 --- a/aspnetcore/blazor/fundamentals/routing.md +++ b/aspnetcore/blazor/fundamentals/routing.md @@ -385,8 +385,8 @@ NavigationManager.GetUriWithQueryParameter("full name", "Morena Baccarin") | Current URL | Generated URL | | --- | --- | -| `scheme://host/?full%20name=Alan%20Tudyk&age=42` | `scheme://host/?full%20name=Morena%20Baccarin&age=42` | -| `scheme://host/?fUlL%20nAmE=Alan%20Tudyk&AgE=42` | `scheme://host/?full%20name=Morena%20Baccarin&AgE=42` | +| `scheme://host/?full%20name=David%20Krumholtze&age=42` | `scheme://host/?full%20name=Morena%20Baccarin&age=42` | +| `scheme://host/?fUlL%20nAmE=David%20Krumholtze&AgE=42` | `scheme://host/?full%20name=Morena%20Baccarin&AgE=42` | | `scheme://host/?full%20name=Jewel%20Staite&age=42&full%20name=Summer%20Glau` | `scheme://host/?full%20name=Morena%20Baccarin&age=42&full%20name=Morena%20Baccarin` | | `scheme://host/?full%20name=&age=42` | `scheme://host/?full%20name=Morena%20Baccarin&age=42` | | `scheme://host/?full%20name=` | `scheme://host/?full%20name=Morena%20Baccarin` | @@ -411,7 +411,7 @@ NavigationManager.GetUriWithQueryParameter("full name", (string)null) | Current URL | Generated URL | | --- | --- | -| `scheme://host/?full%20name=Alan%20Tudyk&age=42` | `scheme://host/?age=42` | +| `scheme://host/?full%20name=David%20Krumholtze&age=42` | `scheme://host/?age=42` | | `scheme://host/?full%20name=Sally%20Smith&age=42&full%20name=Summer%20Glau` | `scheme://host/?age=42` | | `scheme://host/?full%20name=Sally%20Smith&age=42&FuLl%20NaMe=Summer%20Glau` | `scheme://host/?age=42` | | `scheme://host/?full%20name=&age=42` | `scheme://host/?age=42` | @@ -437,9 +437,9 @@ NavigationManager.GetUriWithQueryParameters( | Current URL | Generated URL | | --- | --- | -| `scheme://host/?name=Alan%20Tudyk&age=42` | `scheme://host/?age=25&eye%20color=green` | -| `scheme://host/?NaMe=Alan%20Tudyk&AgE=42` | `scheme://host/?age=25&eye%20color=green` | -| `scheme://host/?name=Alan%20Tudyk&age=42&keepme=true` | `scheme://host/?age=25&keepme=true&eye%20color=green` | +| `scheme://host/?name=David%20Krumholtze&age=42` | `scheme://host/?age=25&eye%20color=green` | +| `scheme://host/?NaMe=David%20Krumholtze&AgE=42` | `scheme://host/?age=25&eye%20color=green` | +| `scheme://host/?name=David%20Krumholtze&age=42&keepme=true` | `scheme://host/?age=25&keepme=true&eye%20color=green` | | `scheme://host/?age=42&eye%20color=87` | `scheme://host/?age=25&eye%20color=green` | | `scheme://host/?` | `scheme://host/?age=25&eye%20color=green` | | `scheme://host/` | `scheme://host/?age=25&eye%20color=green` | @@ -462,8 +462,8 @@ NavigationManager.GetUriWithQueryParameters( | Current URL | Generated URL | | --- | --- | -| `scheme://host/?full%20name=Alan%20Tudyk&ping=8&ping=300` | `scheme://host/?full%20name=Morena%20Baccarin&ping=35&ping=16&ping=87&ping=240` | -| `scheme://host/?ping=8&full%20name=Alan%20Tudyk&ping=300` | `scheme://host/?ping=35&full%20name=Morena%20Baccarin&ping=16&ping=87&ping=240` | +| `scheme://host/?full%20name=David%20Krumholtze&ping=8&ping=300` | `scheme://host/?full%20name=Morena%20Baccarin&ping=35&ping=16&ping=87&ping=240` | +| `scheme://host/?ping=8&full%20name=David%20Krumholtze&ping=300` | `scheme://host/?ping=35&full%20name=Morena%20Baccarin&ping=16&ping=87&ping=240` | | `scheme://host/?ping=8&ping=300&ping=50&ping=68&ping=42` | `scheme://host/?ping=35&ping=16&ping=87&ping=240&full%20name=Morena%20Baccarin` | ### Navigate with an added or modified query string From 0e0c4c67f09b1ef85af4592b69a23cf546c6ee49 Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 12 Aug 2021 10:02:08 -0500 Subject: [PATCH 7/8] Updates --- aspnetcore/blazor/fundamentals/routing.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/aspnetcore/blazor/fundamentals/routing.md b/aspnetcore/blazor/fundamentals/routing.md index d5dcc3e5095d..c60c397b6be4 100644 --- a/aspnetcore/blazor/fundamentals/routing.md +++ b/aspnetcore/blazor/fundamentals/routing.md @@ -385,8 +385,8 @@ NavigationManager.GetUriWithQueryParameter("full name", "Morena Baccarin") | Current URL | Generated URL | | --- | --- | -| `scheme://host/?full%20name=David%20Krumholtze&age=42` | `scheme://host/?full%20name=Morena%20Baccarin&age=42` | -| `scheme://host/?fUlL%20nAmE=David%20Krumholtze&AgE=42` | `scheme://host/?full%20name=Morena%20Baccarin&AgE=42` | +| `scheme://host/?full%20name=David%20Krumholtz&age=42` | `scheme://host/?full%20name=Morena%20Baccarin&age=42` | +| `scheme://host/?fUlL%20nAmE=David%20Krumholtz&AgE=42` | `scheme://host/?full%20name=Morena%20Baccarin&AgE=42` | | `scheme://host/?full%20name=Jewel%20Staite&age=42&full%20name=Summer%20Glau` | `scheme://host/?full%20name=Morena%20Baccarin&age=42&full%20name=Morena%20Baccarin` | | `scheme://host/?full%20name=&age=42` | `scheme://host/?full%20name=Morena%20Baccarin&age=42` | | `scheme://host/?full%20name=` | `scheme://host/?full%20name=Morena%20Baccarin` | @@ -411,7 +411,7 @@ NavigationManager.GetUriWithQueryParameter("full name", (string)null) | Current URL | Generated URL | | --- | --- | -| `scheme://host/?full%20name=David%20Krumholtze&age=42` | `scheme://host/?age=42` | +| `scheme://host/?full%20name=David%20Krumholtz&age=42` | `scheme://host/?age=42` | | `scheme://host/?full%20name=Sally%20Smith&age=42&full%20name=Summer%20Glau` | `scheme://host/?age=42` | | `scheme://host/?full%20name=Sally%20Smith&age=42&FuLl%20NaMe=Summer%20Glau` | `scheme://host/?age=42` | | `scheme://host/?full%20name=&age=42` | `scheme://host/?age=42` | @@ -437,9 +437,9 @@ NavigationManager.GetUriWithQueryParameters( | Current URL | Generated URL | | --- | --- | -| `scheme://host/?name=David%20Krumholtze&age=42` | `scheme://host/?age=25&eye%20color=green` | -| `scheme://host/?NaMe=David%20Krumholtze&AgE=42` | `scheme://host/?age=25&eye%20color=green` | -| `scheme://host/?name=David%20Krumholtze&age=42&keepme=true` | `scheme://host/?age=25&keepme=true&eye%20color=green` | +| `scheme://host/?name=David%20Krumholtz&age=42` | `scheme://host/?age=25&eye%20color=green` | +| `scheme://host/?NaMe=David%20Krumholtz&AgE=42` | `scheme://host/?age=25&eye%20color=green` | +| `scheme://host/?name=David%20Krumholtz&age=42&keepme=true` | `scheme://host/?age=25&keepme=true&eye%20color=green` | | `scheme://host/?age=42&eye%20color=87` | `scheme://host/?age=25&eye%20color=green` | | `scheme://host/?` | `scheme://host/?age=25&eye%20color=green` | | `scheme://host/` | `scheme://host/?age=25&eye%20color=green` | @@ -462,8 +462,8 @@ NavigationManager.GetUriWithQueryParameters( | Current URL | Generated URL | | --- | --- | -| `scheme://host/?full%20name=David%20Krumholtze&ping=8&ping=300` | `scheme://host/?full%20name=Morena%20Baccarin&ping=35&ping=16&ping=87&ping=240` | -| `scheme://host/?ping=8&full%20name=David%20Krumholtze&ping=300` | `scheme://host/?ping=35&full%20name=Morena%20Baccarin&ping=16&ping=87&ping=240` | +| `scheme://host/?full%20name=David%20Krumholtz&ping=8&ping=300` | `scheme://host/?full%20name=Morena%20Baccarin&ping=35&ping=16&ping=87&ping=240` | +| `scheme://host/?ping=8&full%20name=David%20Krumholtz&ping=300` | `scheme://host/?ping=35&full%20name=Morena%20Baccarin&ping=16&ping=87&ping=240` | | `scheme://host/?ping=8&ping=300&ping=50&ping=68&ping=42` | `scheme://host/?ping=35&ping=16&ping=87&ping=240&full%20name=Morena%20Baccarin` | ### Navigate with an added or modified query string From d67a744025be921b629f5ddb7f4e172ba9659c9b Mon Sep 17 00:00:00 2001 From: guardrex <1622880+guardrex@users.noreply.github.com> Date: Thu, 12 Aug 2021 13:52:08 -0500 Subject: [PATCH 8/8] React to feedback --- aspnetcore/blazor/fundamentals/routing.md | 1 - 1 file changed, 1 deletion(-) diff --git a/aspnetcore/blazor/fundamentals/routing.md b/aspnetcore/blazor/fundamentals/routing.md index c60c397b6be4..1f617b2953a3 100644 --- a/aspnetcore/blazor/fundamentals/routing.md +++ b/aspnetcore/blazor/fundamentals/routing.md @@ -333,7 +333,6 @@ For the preceding example: * The correct culture-invariant formatting is applied for the given type (). * The query parameter name and value are URL-encoded. * All of the values with the matching query parameter name are replaced if there are multiple instances of the type. -* If the value is an `IEnumerable` for one of the supported types, then multiple name/value pairs are emitted. Supported types are listed later in this section. Call `NavigationManager.GetUriWithQueryParameters` to create a URI constructed from with multiple parameters added, updated, or removed. For each value, the framework uses `value?.GetType()` to determine the runtime type for each query parameter and selects the correct culture-invariant formatting. The framework throws an error for unsupported types.