Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Ctor service injection #31927

Merged
merged 4 commits into from
Feb 29, 2024
Merged

Ctor service injection #31927

Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
51b385d
Ctor service injection
guardrex Feb 28, 2024
ea828a0
Updates
guardrex Feb 28, 2024
d9d416b
Update aspnetcore/blazor/fundamentals/dependency-injection.md
guardrex Feb 28, 2024
2d08550
Updates
guardrex Feb 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
66 changes: 39 additions & 27 deletions aspnetcore/blazor/fundamentals/dependency-injection.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -213,56 +213,70 @@ The DI system is based on the DI system in ASP.NET Core. For more information, s

## Request a service in a component

After services are added to the service collection, inject the services into the components using the [`@inject`](xref:mvc/views/razor#inject) Razor directive, which has two parameters:
:::moniker range=">= aspnetcore-9.0"

* Type: The type of the service to inject.
* Property: The name of the property receiving the injected app service. The property doesn't require manual creation. The compiler creates the property.
For injecting services into components, Blazor supports [constructor injection](#constructor-injection) and [property injection](#property-injection).

For more information, see <xref:mvc/views/dependency-injection>.
### Constructor injection

Use multiple [`@inject`](xref:mvc/views/razor#inject) statements to inject different services.
After services are added to the service collection, inject one or more services into components with constructor injection. The following example injects the `NavigationManager` service.

The following example shows how to use [`@inject`](xref:mvc/views/razor#inject). The service implementing `Services.IDataAccess` is injected into the component's property `DataRepository`. Note how the code is only using the `IDataAccess` abstraction:
`ConstructorInjection.razor`:

:::moniker range=">= aspnetcore-8.0"
```razor
@page "/constructor-injection"

:::code language="razor" source="~/../blazor-samples/8.0/BlazorSample_BlazorWebApp/Components/Pages/TheSunmakers.razor":::
<button @onclick="@(() => Navigation.NavigateTo("/counter"))">
Take me to the Counter component
</button>
```

:::moniker-end
`ConstructorInjection.razor.cs`:

:::moniker range=">= aspnetcore-7.0 < aspnetcore-8.0"
```csharp
using Microsoft.AspNetCore.Components;

:::code language="razor" source="~/../blazor-samples/7.0/BlazorSample_Server/Pages/dependency-injection/CustomerList.razor" highlight="2,19":::
public partial class ConstructorInjection(NavigationManager navigation)
{
protected NavigationManager Navigation { get; } = navigation;
}
```

:::moniker-end
### Property injection

:::moniker range=">= aspnetcore-6.0 < aspnetcore-7.0"
:::moniker-end

:::code language="razor" source="~/../blazor-samples/6.0/BlazorSample_Server/Pages/dependency-injection/CustomerList.razor" highlight="2,19":::
After services are added to the service collection, inject one or more services into components with the [`@inject`](xref:mvc/views/razor#inject) Razor directive, which has two parameters:

:::moniker-end
* Type: The type of the service to inject.
* Property: The name of the property receiving the injected app service. The property doesn't require manual creation. The compiler creates the property.

:::moniker range=">= aspnetcore-5.0 < aspnetcore-6.0"
For more information, see <xref:mvc/views/dependency-injection>.

:::code language="razor" source="~/../blazor-samples/5.0/BlazorSample_Server/Pages/dependency-injection/CustomerList.razor" highlight="2,19":::
Use multiple [`@inject`](xref:mvc/views/razor#inject) statements to inject different services.

:::moniker-end
The following example demonstrates shows how to use the [`@inject`](xref:mvc/views/razor#inject) directive. The service implementing `Services.NavigationManager` is injected into the component's property `Navigation`. Note how the code is only using the `NavigationManager` abstraction.

:::moniker range="< aspnetcore-5.0"
`PropertyInjection.razor`:

:::code language="razor" source="~/../blazor-samples/3.1/BlazorSample_Server/Pages/dependency-injection/CustomerList.razor" highlight="2,19":::
```razor
@page "/property-injection"
@inject NavigationManager Navigation

:::moniker-end
<button @onclick="@(() => Navigation.NavigateTo("/counter"))">
Take me to the Counter component
</button>
```

Internally, the generated property (`DataRepository`) uses the [`[Inject]` attribute](xref:Microsoft.AspNetCore.Components.InjectAttribute). Typically, this attribute isn't used directly. If a base class is required for components and injected properties are also required for the base class, manually add the [`[Inject]` attribute](xref:Microsoft.AspNetCore.Components.InjectAttribute):
Internally, the generated property (`Navigation`) uses the [`[Inject]` attribute](xref:Microsoft.AspNetCore.Components.InjectAttribute). Typically, this attribute isn't used directly. If a base class is required for components and injected properties are also required for the base class, manually add the [`[Inject]` attribute](xref:Microsoft.AspNetCore.Components.InjectAttribute):

```csharp
using Microsoft.AspNetCore.Components;

public class ComponentBase : IComponent
{
[Inject]
protected IDataAccess DataRepository { get; set; } = default!;
protected NavigationManager Navigation { get; set; } = default!;

...
}
Expand All @@ -271,13 +285,11 @@ public class ComponentBase : IComponent
> [!NOTE]
> Since injected services are expected to be available, the default literal with the null-forgiving operator (`default!`) is assigned in .NET 6 or later. For more information, see [Nullable reference types (NRTs) and .NET compiler null-state static analysis](xref:migration/50-to-60#nullable-reference-types-nrts-and-net-compiler-null-state-static-analysis).

In components derived from the base class, the [`@inject`](xref:mvc/views/razor#inject) directive isn't required. The <xref:Microsoft.AspNetCore.Components.InjectAttribute> of the base class is sufficient, and all the component requires is the [`@inherits`](xref:mvc/views/razor#inherits) directive:
In components derived from a base class, the [`@inject`](xref:mvc/views/razor#inject) directive isn't required. The <xref:Microsoft.AspNetCore.Components.InjectAttribute> of the base class is sufficient. The component only requires the [`@inherits`](xref:mvc/views/razor#inherits) directive. In the following example, any injected services of `CustomComponentBase` are available to the `Demo` component:

```razor
@page "/demo"
@inherits ComponentBase

<h1>Demo Component</h1>
@inherits CustomComponentBase
```

## Use DI in services
Expand Down
Loading