Skip to content

Commit bc63502

Browse files
guardrexguardrex
authored
Blazor Pre2 release note additions (#34966)
* Updates
1 parent 003ba57 commit bc63502

3 files changed

Lines changed: 112 additions & 2 deletions

File tree

‎aspnetcore/blazor/components/quickgrid.md‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -219,6 +219,40 @@ In the following example:
219219

220220
:::moniker-end
221221

222+
223+
:::moniker range=">= aspnetcore-10.0"
224+
225+
<!-- UPDATE 10.0 - API cross-link -->
226+
227+
:::moniker-end
228+
229+
### Close `QuickGrid` column options
230+
231+
Close the `QuickGrid` column options UI with the `CloseColumnOptionsAsync` method.
232+
233+
The following example closes the column options UI as soon as the title filter is applied:
234+
235+
```razor
236+
<QuickGrid @ref="movieGrid" Items="movies">
237+
<PropertyColumn Property="@(m => m.Title)" Title="Title">
238+
<ColumnOptions>
239+
<input type="search" @bind="titleFilter" placeholder="Filter by title"
240+
@bind:after="@(() => movieGrid.CloseColumnOptionsAsync())" />
241+
</ColumnOptions>
242+
</PropertyColumn>
243+
<PropertyColumn Property="@(m => m.Genre)" Title="Genre" />
244+
<PropertyColumn Property="@(m => m.ReleaseYear)" Title="Release Year" />
245+
</QuickGrid>
246+
247+
@code {
248+
private QuickGrid<Movie>? movieGrid;
249+
private string titleFilter = string.Empty;
250+
private IQueryable<Movie> movies = new List<Movie> { ... }.AsQueryable();
251+
private IQueryable<Movie> filteredMovies =>
252+
movies.Where(m => m.Title!.Contains(titleFilter));
253+
}
254+
```
255+
222256
## Entity Framework Core (EF Core) data source
223257

224258
Use the factory pattern to resolve an EF Core database context that provides data to a `QuickGrid` component. For more information on why the factory pattern is recommended, see <xref:blazor/blazor-ef-core>.

‎aspnetcore/blazor/fundamentals/routing.md‎

Lines changed: 32 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1620,13 +1620,44 @@ For additional example code, see the [`ConfigurableNavigationLock` component in
16201620

16211621
Use a <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component in place of HTML hyperlink elements (`<a>`) when creating navigation links. A <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component behaves like an `<a>` element, except it toggles an `active` CSS class based on whether its `href` matches the current URL. The `active` class helps a user understand which page is the active page among the navigation links displayed. Optionally, assign a CSS class name to <xref:Microsoft.AspNetCore.Components.Routing.NavLink.ActiveClass?displayProperty=nameWithType> to apply a custom CSS class to the rendered link when the current route matches the `href`.
16221622

1623+
:::moniker range=">= aspnetcore-10.0"
1624+
16231625
There are two <xref:Microsoft.AspNetCore.Components.Routing.NavLinkMatch> options that you can assign to the `Match` attribute of the `<NavLink>` element:
16241626

1625-
* <xref:Microsoft.AspNetCore.Components.Routing.NavLinkMatch.All?displayProperty=nameWithType>: The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> is active when it matches the entire current URL.
1627+
* <xref:Microsoft.AspNetCore.Components.Routing.NavLinkMatch.All?displayProperty=nameWithType>: The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> is active when it matches the current URL, ignoring the query string and fragment. To include matching on the query string/fragment, use the `Microsoft.AspNetCore.Components.Routing.NavLink.DisableMatchAllIgnoresLeftUriPart` [`AppContext` switch](/dotnet/fundamentals/runtime-libraries/system-appcontext).
16261628
* <xref:Microsoft.AspNetCore.Components.Routing.NavLinkMatch.Prefix?displayProperty=nameWithType> (*default*): The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> is active when it matches any prefix of the current URL.
16271629

1630+
:::moniker-end
1631+
1632+
:::moniker range="< aspnetcore-10.0"
1633+
1634+
There are two <xref:Microsoft.AspNetCore.Components.Routing.NavLinkMatch> options that you can assign to the `Match` attribute of the `<NavLink>` element:
1635+
1636+
* <xref:Microsoft.AspNetCore.Components.Routing.NavLinkMatch.All?displayProperty=nameWithType>: The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> is active when it matches the entire current URL, including the query string and fragment.
1637+
* <xref:Microsoft.AspNetCore.Components.Routing.NavLinkMatch.Prefix?displayProperty=nameWithType> (*default*): The <xref:Microsoft.AspNetCore.Components.Routing.NavLink> is active when it matches any prefix of the current URL.
1638+
1639+
:::moniker-end
1640+
16281641
In the preceding example, the Home <xref:Microsoft.AspNetCore.Components.Routing.NavLink> `href=""` matches the home URL and only receives the `active` CSS class at the app's default base path (`/`). The second <xref:Microsoft.AspNetCore.Components.Routing.NavLink> receives the `active` class when the user visits any URL with a `component` prefix (for example, `/component` and `/component/another-segment`).
16291642

1643+
:::moniker range=">= aspnetcore-10.0"
1644+
1645+
<!-- UPDATE 10.0 - API cross-link -->
1646+
1647+
To adopt custom matching logic, subclass <xref:Microsoft.AspNetCore.Components.Routing.NavLink> and override its `ShouldMatch` method. Return `true` from the method when you want to apply the `active` CSS class:
1648+
1649+
```csharp
1650+
public class CustomNavLink : NavLink
1651+
{
1652+
protected override bool ShouldMatch(string currentUriAbsolute)
1653+
{
1654+
// Custom matching logic
1655+
}
1656+
}
1657+
```
1658+
1659+
:::moniker-end
1660+
16301661
Additional <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component attributes are passed through to the rendered anchor tag. In the following example, the <xref:Microsoft.AspNetCore.Components.Routing.NavLink> component includes the `target` attribute:
16311662

16321663
```razor

‎aspnetcore/release-notes/aspnetcore-10/includes/blazor.md‎

Lines changed: 46 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,7 @@ Previously, <xref:Microsoft.AspNetCore.Components.NavigationManager.NavigateTo%2
3838
3939
### Reconnection UI component added to the Blazor Web App project template
4040
41-
The Blazor Web App project template now includes a `ReconnectModal` component, including collocated stylesheet and JavaScript files, for improved developer control over the reconnection UI when the client loses the WebSocket connection to the server. The component doesn't insert styles programmatically, so it doesn't violate stricter Content Security Policy (CSP) settings for the `style-src` policy. In prior releases, the default reconnection UI was created by the framework in a way that could cause CSP violations. Note that the default reconnection UI is still used as fallback when the app doesn't define the reconnection UI, such as by using the project template's `ReconnectModal` component or a similar custom component.
41+
The Blazor Web App project template now includes a `ReconnectModal` component, including collocated stylesheet and JavaScript files, for improved developer control over the reconnection UI when the client loses the WebSocket connection to the server. The component doesn't insert styles programmatically, ensuring compliance with stricter Content Security Policy (CSP) settings for the `style-src` policy. In prior releases, the default reconnection UI was created by the framework in a way that could cause CSP violations. Note that the default reconnection UI is still used as fallback when the app doesn't define the reconnection UI, such as by using the project template's `ReconnectModal` component or a similar custom component.
4242
4343
New reconnection UI features:
4444
@@ -47,4 +47,49 @@ New reconnection UI features:
4747
4848
For more information, see <xref:blazor/fundamentals/signalr?view=aspnetcore-10.0#reflect-the-server-side-connection-state-in-the-ui>.
4949
50+
### Ignore the query string and fragment when using `NavLinkMatch.All`
51+
52+
The `NavLink` component now ignores the query string and fragment when using the `NavLinkMatch.All` value for the `Match` parameter. This means that the link retains the `active` class if the URL path matches but the query string or fragment change. To revert to the original behavior, use the `Microsoft.AspNetCore.Components.Routing.NavLink.DisableMatchAllIgnoresLeftUriPart` [`AppContext` switch](/dotnet/fundamentals/runtime-libraries/system-appcontext).
53+
54+
You can also override the `ShouldMatch` method on `NavLink` to customize the matching behavior:
55+
56+
```csharp
57+
public class CustomNavLink : NavLink
58+
{
59+
protected override bool ShouldMatch(string currentUriAbsolute)
60+
{
61+
// Custom matching logic
62+
}
63+
}
64+
```
65+
66+
For more information, see <xref:blazor/fundamentals/routing#navlink-component>.
67+
68+
### Close `QuickGrid` column options
69+
70+
You can now close the `QuickGrid` column options UI using the new `CloseColumnOptionsAsync` method.
71+
72+
The following example uses the `CloseColumnOptionsAsync` method to close the column options UI as soon as the title filter is applied:
73+
74+
```razor
75+
<QuickGrid @ref="movieGrid" Items="movies">
76+
<PropertyColumn Property="@(m => m.Title)" Title="Title">
77+
<ColumnOptions>
78+
<input type="search" @bind="titleFilter" placeholder="Filter by title"
79+
@bind:after="@(() => movieGrid.CloseColumnOptionsAsync())" />
80+
</ColumnOptions>
81+
</PropertyColumn>
82+
<PropertyColumn Property="@(m => m.Genre)" Title="Genre" />
83+
<PropertyColumn Property="@(m => m.ReleaseYear)" Title="Release Year" />
84+
</QuickGrid>
85+
86+
@code {
87+
private QuickGrid<Movie>? movieGrid;
88+
private string titleFilter = string.Empty;
89+
private IQueryable<Movie> movies = new List<Movie> { ... }.AsQueryable();
90+
private IQueryable<Movie> filteredMovies =>
91+
movies.Where(m => m.Title!.Contains(titleFilter));
92+
}
93+
```
94+
5095
-->

0 commit comments

Comments
 (0)