Blazor Client Side calling code that is not a UI component - components

Question

I have seen in Blazor client side, we can call a UI component to render additional elements from a shared page, also this can be done using code behind and a razor.cs file.
But how does one call a code only file such as string MyFunc() that can be shared between several UI pages, such that the returned string can be processed differently by each page ?

Answer 1

You don't even have to use dependency injection if you don't want / need it.
You can just create a class and keep it in memory just like any other type of CSharp code.
Optional, but if you want to make your class available to other components, In my sample project BlazorImageGallery , I create an object called a GalleryManager, that I want to make available to other components as a Cascading Paramater:
public class GalleryManager
{
}
<CascadingValue Value="GalleryManager">
<ArtistListViewer></ArtistListViewer>
<ImageListViewer></ImageListViewer>
</CascadingValue>
Then on my Index page, I load the Gallery Manager:
protected override async Task OnInitializedAsync()
{
// Create the GalleryManager
this.GalleryManager = new GalleryManager(this);
// Load the Artists
this.GalleryManager.Artists = await ArtistService.GetArtistList();
}
My IndexPage can refer to this.GalleryManager throughout my application lifetime.
And the child components:
/// <summary>
/// This parameter is available to call parent objects
/// </summary>
[CascadingParameter]
GalleryManager GalleryManager { get; set; }
You don't have to make it a cascading parameter if you don't want to, or even put it on the page. I was just showing you an example of keeping a class loaded in memory.
Blazor is just C# code, and since I came from a Windows Form background, it feels like home since the item will live in memory until I exit the page or dispose of it.

Answer 2

One can create a service - basically a class and then use the inbuilt DI to inject it into any component.
For example -
public class SayHelloService()
{
public string SayHello()
{
return "Hello!";
}
}
Then prepare the DI like this -
public static async Task Main(string[] args)
{
var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddSingleton<SayHelloService>();
builder.RootComponents.Add<App>("app");
await builder.Build().RunAsync();
}
And then just inject into your component like this
#inject SayHelloService Service
You can then use Service in your code block or anywhere using standard Razor syntax. For example -
<p>#(Service.SayHello())</p>