ContextQMD
Back to Aspnetcore

Blazor

aspnetcore/release-notes/aspnetcore-11/includes/blazor.md

latest5.3 KB
Original Source

New DisplayName component and support for [Display] and [DisplayName] attributes

<!-- UPDATE 11.0 - API cross-link <xref:Microsoft.AspNetCore.Components.Forms.DisplayName%601> -->

The DisplayName component can be used to display property names from metadata attributes:

csharp
[Required, DisplayName("Production Date")]
public DateTime ProductionDate { get; set; }

The [Display] attribute on the model class property is supported:

csharp
[Required, Display(Name = "Production Date")]
public DateTime ProductionDate { get; set; }

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.

Use the DisplayName component in labels or table headers:

razor
<label>
    <DisplayName For="@(() => Model!.ProductionDate)" />
    <InputDate @bind-Value="Model!.ProductionDate" />
</label>

Blazor Web script startup options format now supported for Blazor Server and Blazor WebAssembly scripts

The Blazor Web App script (blazor.web.js) options object passed to Blazor.start() uses the following format since the release of .NET 8:

javascript
Blazor.start({
  ssr: { ... },
  circuit: { ... },
  webAssembly: { ... },
});

Now, Blazor Server (blazor.server.js) and Blazor WebAssembly (blazor.webassembly.js) scripts can use the same options format.

The following example shows the prior options format, which remains supported:

javascript
Blazor.start({
  loadBootResource: function (...) {
      ...
    },
  });

The newly supported options format for the preceding example:

javascript
Blazor.start({
  webAssembly: {
    loadBootResource: function (...) {
      ...
    },
  },
});

For more information, see xref:blazor/fundamentals/startup?view=aspnetcore-11.0#startup-process-and-configuration.

New BasePath component

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.

Inline JS event handler removed from the NavMenu component

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 approach to show or hide the navigation bar on the rendered page. The new approach improves Content Security Policy (CSP) compliance because it doesn't require the CSP to include an unsafe hash for the inline JS.

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.

The new RelativeToCurrentUri parameter (default: false) for xref:Microsoft.AspNetCore.Components.NavigationManager.NavigateTo%2A?displayProperty=nameWithType and the NavLink component allows you to navigate to URIs relative to the current page path rather than the app's base URI.

Consider the following nested endpoints:

  • /docs
    • /getting-started
      • /installation
      • /configuration

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 for the desired navigation:

csharp
Navigation.NavigateTo("/configuration", new NavigationOptions
{
    RelativeToCurrentUri = true
});
razor
<NavLink href="configuration" RelativeToCurrentUri="true">Configuration</NavLink>

Persist temporary data between HTTP requests during static server-side rendering (static SSR)

To persist temporary data between HTTP requests during static server-side rendering (static SSR), Blazor supports TempData. TempData is ideal for scenarios such as flash messages after form submissions, passing data during redirects (POST-Redirect-GET pattern), and one-time notifications.

TempData is available when xref:Microsoft.Extensions.DependencyInjection.RazorComponentsServiceCollectionExtensions.AddRazorComponents%2A is called in the app's Program file and is provided as a cascading value with the [CascadingParameter] attribute.

csharp
[CascadingParameter]
public ITempData? TempData { get; set; }

For more information, see xref:blazor/state-management/server#server-side-storage.