|
1 | | -*Release notes appear in this section as preview features become available.* |
| 1 | +### New `DisplayName` component and support for `[Display]` and `[DisplayName]` attributes |
| 2 | + |
| 3 | +<!-- UPDATE 11.0 - API cross-link |
| 4 | +
|
| 5 | +<xref:Microsoft.AspNetCore.Components.Forms.DisplayName%601> |
| 6 | +--> |
| 7 | +The `DisplayName` component can be used to display property names from metadata attributes: |
| 8 | + |
| 9 | +```csharp |
| 10 | +[Required, DisplayName("Production Date")] |
| 11 | +public DateTime ProductionDate { get; set; } |
| 12 | +``` |
| 13 | + |
| 14 | +The [`[Display]` attribute](xref:System.ComponentModel.DataAnnotations.DisplayAttribute) on the model class property is supported: |
| 15 | + |
| 16 | +```csharp |
| 17 | +[Required, Display(Name = "Production Date")] |
| 18 | +public DateTime ProductionDate { get; set; } |
| 19 | +``` |
| 20 | + |
| 21 | +Of the two approaches, the `[Display]` attribute is recommended, which makes additional properties available. The `[Display]` attribute also enables assigning a resource type for localization. When both attributes are present, `[Display]` takes precedence over `[DisplayName]`. If neither attribute is present, the component falls back to the property name. |
| 22 | + |
| 23 | +Use the `DisplayName` component in labels or table headers: |
| 24 | + |
| 25 | +```razor |
| 26 | +<label> |
| 27 | + <DisplayName For="@(() => Model!.ProductionDate)" /> |
| 28 | + <InputDate @bind-Value="Model!.ProductionDate" /> |
| 29 | +</label> |
| 30 | +``` |
| 31 | + |
| 32 | +### Blazor Web script startup options format now supported for Blazor Server and Blazor WebAssembly scripts |
| 33 | + |
| 34 | +The Blazor Web App script (`blazor.web.js`) options object passed to `Blazor.start()` uses the following format since the release of .NET 8: |
| 35 | + |
| 36 | +```javascript |
| 37 | +Blazor.start({ |
| 38 | + ssr: { ... }, |
| 39 | + circuit: { ... }, |
| 40 | + webAssembly: { ... }, |
| 41 | +}); |
| 42 | +``` |
| 43 | + |
| 44 | +Now, Blazor Server (`blazor.server.js`) and Blazor WebAssembly (`blazor.webassembly.js`) scripts can use the same options format. |
| 45 | + |
| 46 | +The following example shows the prior options format, which remains supported: |
| 47 | + |
| 48 | +```javascript |
| 49 | +Blazor.start({ |
| 50 | + loadBootResource: function (...) { |
| 51 | + ... |
| 52 | + }, |
| 53 | + }); |
| 54 | +``` |
| 55 | + |
| 56 | +The newly supported options format for the preceding example: |
| 57 | + |
| 58 | +```javascript |
| 59 | +Blazor.start({ |
| 60 | + webAssembly: { |
| 61 | + loadBootResource: function (...) { |
| 62 | + ... |
| 63 | + }, |
| 64 | + }, |
| 65 | +}); |
| 66 | +``` |
| 67 | + |
| 68 | +For more information, see <xref:blazor/fundamentals/startup?view=aspnetcore-11.0#startup-process-and-configuration>. |
| 69 | + |
| 70 | +### New `BasePath` component |
| 71 | + |
| 72 | +Blazor Web Apps can use the new `BasePath` component (`<BasePath />`) to render the app's app base path (`<base href>`) HTML tag automatically. For more information, see <xref:blazor/host-and-deploy/app-base-path?view=aspnetcore-11.0>. |
| 73 | + |
| 74 | +### Inline JS event handler removed from the `NavMenu` component |
| 75 | + |
| 76 | +The inline JS event handler that toggles the display of navigation links is no longer present in the `NavMenu` component of the Blazor Web App project template. Apps generated from the project template now use a [collocated JS module](xref:blazor/js-interop/javascript-location?view=aspnetcore-11.0#load-a-script-from-an-external-javascript-file-js-collocated-with-a-component) approach to show or hide the navigation bar on the rendered page. The new approach improves [Content Security Policy (CSP) compliance](xref:blazor/security/content-security-policy?view=aspnetcore-11.0) because it doesn't require the CSP to include an unsafe hash for the inline JS. |
| 77 | + |
| 78 | +To migrate an existing app to .NET 11, including adopting the new JS module approach for the navigation bar toggler, see <xref:migration/100-to-110>. |
| 79 | + |
| 80 | +### `NavigateTo` and `NavLink` support for relative navigation |
| 81 | + |
| 82 | +The new `RelativeToCurrentUri` parameter (default: `false`) for <xref:Microsoft.AspNetCore.Components.NavigationManager.NavigateTo%2A?displayProperty=nameWithType> and the [`NavLink` component](xref:blazor/fundamentals/routing?view=aspnetcore-11.0#navlink-component) allows you to navigate to URIs relative to the current page path rather than the app's base URI. |
| 83 | + |
| 84 | +Consider the following nested endpoints: |
| 85 | + |
| 86 | +* `/docs` |
| 87 | + * `/getting-started` |
| 88 | + * `/installation` |
| 89 | + * `/configuration` |
| 90 | + |
| 91 | +When the browser's URI is `/docs/getting-started/installation` and you want to navigate the user to `/docs/getting-started/configuration`, `NavigateTo("/configuration")` redirects to `/configuration` at the app's root instead of the relative path at `/docs/getting-started/configuration`. Set the `RelativeToCurrentUri` with <xref:Microsoft.AspNetCore.Components.NavigationManager.NavigateTo%2A> or the [`NavLink` component](xref:blazor/fundamentals/routing?view=aspnetcore-11.0#navlink-component) for the desired navigation: |
| 92 | + |
| 93 | +```csharp |
| 94 | +Navigation.NavigateTo("/configuration", new NavigationOptions |
| 95 | +{ |
| 96 | + RelativeToCurrentUri = true |
| 97 | +}); |
| 98 | +``` |
| 99 | + |
| 100 | +```razor |
| 101 | +<NavLink href="configuration" RelativeToCurrentUri="true">Configuration</NavLink> |
| 102 | +``` |
0 commit comments