c# - How to get local data source in server side applications?

Question

I am using blazor server side application. In that I need to refer local dataSource.

I have used the Http as like default client side sample.

@code{

    ChartData[] dataSource;
    protected override async Task OnInitAsync()
    {
        dataSource = await Http.GetJsonAsync<ChartData[]>("scripts/aapl.json");
    }
}

But I have been facing the issue like below,

Can anyone guide me to fix this?

Answer 1

Hosted mode

In hosted mode do you need a rest end point (or other kind of transport mode) to access data and to invoke backend operations:

    USER                     BACKEND 
    SIDE

          HTTP
          or other network
          transport.
             |
             |

client ---- dto ---> rest api ----> server functions
(wasm)
             |
             |

Server side mode

In server side mode you don't need to access server data via rest api, your app is executing on the server, just inject service and call server functions directly, not through a network transport.

    USER                     BACKEND 
    SIDE


                   SignalR
                  (websocket)
                      |
                      |

client <--- virtual dom changes ---> .razor pages ----> server functions
(html                 
 +css                 |
 +js)                 |
                      |
                      |

Bonus

To easily switch from hosted model to server side you can create an IServiceInterface for both (server functions and rest client transport class) and use Dependency Injection to use one or other implementation on each scenario. Simplified:

                   hosted model 

                                   |
         - rest client trans class----> web api ----
        |  (IServiceInterface)     |                |
Client -                           |                |--> server functions
        |                          |                |  (IServiceInterface)
         ------------------------------------------
                                   |

                   server side model

Answer 2

Unlike client-side Blazor, server-side Blazor requires you to add HttpClient to the DI Container, and inject it into your components.

You can do this:

• Add this code to your Startup.ConfigureServices method:

    // Server Side Blazor doesn't register HttpClient by default
    if (!services.Any(x => x.ServiceType == typeof(HttpClient)))
    {
        // Setup HttpClient for server side in a client side compatible fashion
        services.AddScoped<HttpClient>(s =>
        {
            var uriHelper = s.GetRequiredService<IUriHelper>();
            return new HttpClient
            {
                BaseAddress = new Uri(uriHelper.GetBaseUri())
            };
        });
    }

• You can also use IHttpClientFactory to configure and create HttpClient instances (preferably)

Answering your question

How to get local data source in server side applications:

Defining a local service that can access the database directly can do the trick. See the default server-side templates how to do that. You may use Entity Framework Core in the service to access the database objects.

Note that using a local service that access your database directly may have unfavorable effects if you decide to switch to Blazor client-side, as communication between your data access service executing on client-side Blazor and your server is not possible. This is an example of the importance of planning how to implement your Blazor app. Personally, I'd stick to HttpClient, and avoid services, but this is my personal view. Others may think otherwise.

Hope this helps...

Answer 3

This will be helpful while reading json files from from server side application,

@using Newtonsoft.Json

....
@code{
protected override async Task OnInitAsync()
    {

        {
            dataSource = JsonConvert.DeserializeObject<ChartData[]>(System.IO.File.ReadAllText("./wwwroot/chartdata.json"));
        }

    }
}