{"id":8388,"date":"2020-07-11T16:13:45","date_gmt":"2020-07-11T16:13:45","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=8388"},"modified":"2020-07-11T16:13:45","modified_gmt":"2020-07-11T16:13:45","slug":"dependency-injection-and-blazor","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/dependency-injection-and-blazor\/","title":{"rendered":"Dependency Injection and Blazor"},"content":{"rendered":"

In a previous post Blazor routing and Navigation<\/a> we injected the NavigationManager into out page using the following<\/p>\n

\r\n@inject NavigationManager NavManager\r\n<\/pre>\n
So when we use @inject followed by the type we want injected, ASP.NET\/Blazor will automatically supply the NavigationManager (assuming one exists).<\/p>\n
Adding services<\/strong><\/p>\n
Ofcourse we can also add our own types\/services to the DI container. <\/p>\n
On a Blazor WebAssembly application, we can add types to the Program.cs, Main method, for example<\/p>\n
\r\npublic static async Task Main(string[] args)\r\n{\r\n   var builder = WebAssemblyHostBuilder.CreateDefault(args);\r\n   \/\/ template generated code here\r\n\r\n   \/\/ my custom DataService\r\n   builder.Services.AddSingleton<IDataService, DataService>();\r\n\r\n   await builder.Build().RunAsync();\r\n}\r\n<\/pre>\n
In Blazor Server, we add our types to the Startup.cs, ConfigureServices method, for example<\/p>\n
\r\npublic void ConfigureServices(IServiceCollection services)\r\n{\r\n   \/\/ template generated code here\r\n\r\n   \/\/ my custom DataService\r\n   services.AddSingleton<IDataService, DataService>();\r\n}\r\n<\/pre>\n
Service lifetime<\/strong><\/p>\n
In the examples in the previous section we added the service as a singleton.<\/p>\n
    \n
  • Scoped – this is means the service is scoped to the connection. This is the preferred way to handle per user services – there is no concept of scope services in WebAssembly as obviously it’s a client technology at this point and already per user scoped<\/ul>\n
  • Singleton – As you’d expect, this is a single instance for the lifetime of the application<\/li>\n
  • Transient – each request for a transient service will receive a new instance of the service<\/li>\n<\/ul>\n
    If you need access to service is a Component class, i.e. you’re creating your own IComponent you have mark a property with the InjectAttribute<\/p>\n
    \r\npublic class MyService\r\n{\r\n   [Inject]\r\n   IDataService DataService { get; set; }\r\n}\r\n<\/pre>\n
    Ofcourse constructor injection (my preferred way to do things) is also available, so we just write code such as this, assuming that MyService is created using the service container<\/p>\n
    public class MyService
    \n{
    \n   public MyService(IDataService dataService)
    \n   {
    \n      \/\/ do something with dataService
    \n   }
    \n}<\/p>\n","protected":false},"excerpt":{"rendered":"
    In a previous post Blazor routing and Navigation we injected the NavigationManager into out page using the following @inject NavigationManager NavManager So when we use @inject followed by the type we want injected, ASP.NET\/Blazor will automatically supply the NavigationManager (assuming one exists). Adding services Ofcourse we can also add our own types\/services to the DI […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[305],"tags":[],"class_list":["post-8388","post","type-post","status-publish","format-standard","hentry","category-blazor"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8388","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=8388"}],"version-history":[{"count":4,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8388\/revisions"}],"predecessor-version":[{"id":8422,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/8388\/revisions\/8422"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=8388"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=8388"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=8388"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}