Chapter: Starting point
So I am completly new to Blazor and/or Razor and the whole question might be completly obsolete as I might just miss a certain fact to fully understand the concept of the "new" Blazor Web App template in Visual Studio, supporting the interactive render mode "Auto".
So here is what I have done so far:I created the Blazor Web App with interactive rendering mode set to "auto", resulting in:
FancyExplorer project (<- I will name it "server project" from here on)
FancyExplorer.Client project (<- I will name it "client project" from here on)
Chapter: What I added
As my fancy explorer is supposed to show data from a database, I implemented an additional C# library project, exposing a service taking care of database access. Some of the data is cached in the service as I want to keep traffic to database on a minimal level.So we have additionally:
FancyExplorer.DataService project ( <- I will name it "service project" from here on)
Chapter: So the solutions looks like:
The service class is just a very simple dummy implemenation, just to showcase:
public class DatabaseService{ private Guid idCache; public Guid GetId { get { if (idCache == Guid.Empty) idCache = GetIdFromDatabase(); return idCache; } } private Guid GetIdFromDatabase() { // database magic happens here but result is return Guid.NewGuid(); }}Chapter: What I want to do
As said, my service contains some kind of caching mechanism to reduce load on the database.And I want to use the service on a razor page called "FancyExplorerStart.razor" which is located in the Client project as I want this to be available via WASM.
To make the service available to my razor pages in the client project, I registered it in the Program.cs:
builder.Services.AddScoped<DatabaseService>();The razor page, I am using the service in, looks like:
@page "/"@inject FancyExplorer.DataService.DatabaseService service<h3>FancyExplorerStart</h3><h1>Id: @ServiceId</h1>@code { public Guid ServiceId { get; set; } protected override async Task OnInitializedAsync() { await base.OnInitializedAsync(); ServiceId = service.GetId(); }}so far so good, let's start the application...
Chapter: Let the confusion begin
With said configuration, I get following exception:
InvalidOperationException: Cannot provide a value for property'service' on type 'FancyExplorer.Client.Pages.FancyExplorerStart'.There is no registered service of type'FancyExplorer.DataService.DatabaseService'.
which seems to be strange as I registered it in the Program.cs of the client project (see lines of code above). So I added the same line to the Program.cs of the server project and the magic happens:
Question 1: Why is it necessary to register the service in the server project when i explecitly want to load it via WASM in the client project?
Chapter: It's getting even worse
Having a closer look on what happens in the browser, I realized that the page is displayed with an Guid and immediately gets updated with another Guid. Which of course makes sense: As long as WASM is not available, server side rendering is being used (the first Guid). Once WASM is available, WASM is being used (second Guid). So it's not just the fact that I need to register the service in the server project, this also causes that my service is initiated twice, which means my caching mechanism is obsolete as it only works when I use the same object (kind as singleton, but only for a user session). Which leads me to:
Question 2: If service registration in server project is required, may I have a wrong concept/understanding? What am I mssing?