How to receive data into a Blazor component

Question

I start a new project with Blazor (.Net Core 3) and fight for the best approach to receive data in my Blazor components.

As far as I know, there are two possibilities: I can instantiate a service class, e.g. CustomerService as a singleton one or scoped instance, and insert that service into my Blazor component using the [inject] attribute. Or I can insert an http client into my Blazor component and make direct http calls to my Web API.

While the second approach is not ideal for my scenario (I want to map my Json data to a model class), I'm not quite sure if the first approach is the right one?

To be more precise: I have a CustomerService that has a Get() method. In this Get() method, I call my Web API to receive all customers as Json data and return my own model class. This CustomerService is fed into my component via the [inject] attribute where I then call CustomerService.Get() to get my customer model.

In the end I will have different services which I inject into the components where I need them. Is this a valid approach or is there a better way?

Answer 1

Your question is most relevant in the context of modes of execution.

If you use Blazor client-side, your app may contain a client project that is executed on the browser, and a server project where your Web Api Controllers reside. The main vehicle of communication between the client and server projects is Http. Blazor client-side is configured by the framework to add the HttpClient service to the DI container, and all you have to do is to inject it into your components or services, and use it to call endpoint actions in your controllers. Note that you can also use SignalR...

If you use Blazor server-side mode of execution, however, you can use either HttpClient or services to enable communication.

First off, you should remember that server-side Blazor is executed on the server, and only Html diffs are send to the user's browser. Thus, you can create a service which may access your data store directly (preferably through a second layer; repository), and you may inject this service to your components to perform the required calls.

But you may use Http and create a Web Api project instead. This is legitimate, and developers chose to use this method over services. But in this case, you should add the HttpClient service to the DI container yourself. It is recommended to use IHttpClientFactory.

Update:

I'd suggest you to use services instead of controllers (Web Api end points). These services are to be as lean as controller's methods are, and they should be called mostly to retrieve data, not directly, but via repositories you may define for that purpose. You may inject those services into your components, and use them in your code.

In the default project templates for Blazor Server App is code sample demonstrating how to create a service, inject it into components and consumes its methods. See here the project template and sample within it...

Note: In this sample, the service access the data directly, but as you surely know this should be done in another layer, other services, repositories, etc...

This link is to a Blazor client-side sample named FlightFinder created by the Blazor team, demonstrating how to use the App State Pattern which manages the state of the components. It's important that you acquaint yourself with this pattern in the context of Blazor.

Note also that you can employ the MVVM pattern in Blazor.

It is all up to you what path you take...

Would you mind marking it as the answer if it solved your problem, so others know it was useful.

Hope this helps...