Blazor 'Global' Parameter - passing between MainLayout.razor , NavMenu.razor, Counter.razor - back and forth

Question

Given a \'default\' Blazor app - created using the Visual Studio 2019 Blazor server template. How do you create a GLOBAL object that is acc

Answer 1

Communication between components can be implemented in three ways, depending on your requirements and needs.

1. A parent component can communicate with its child component by passing component parameters and raising events to let the parent that something has happened, and vice versa.

2. You can enable the CascadingValue feature to pass a value to all children down the stream, who define a property of CascadingParameter. The cascading value may be a simple string, but it can also be a complete component. This is achieved by setting the Value attribute of CascadingValue with the key word this from within the component you want to pass reference, like this:

SomeComponent.razor

<CascadingValue Value="this">
   @ChildContent
</CascadingValue>

I don't like using this feature. Actually, I never use it. It is claimed it's use can be problematic, etc. However, it is a legitimate part of Blazor, and there is no reason not to use it if you like...

3. A service that implement the State pattern and Notification pattern. You ordinarily create such a service to manage your app's data state, this include storing data in collections, retrieving data from database, etc., enabling components to store data in the services' collections, notifying components by raising event handler, and passing them data just added by another component, etc.

Given a 'default' Blazor app - created using the Visual Studio 2019 Blazor server template. How do you create a GLOBAL object that is accessible from all the razor pages and components.

You should implement a service. See number 3.

Create a Static Class ?

No, no static classes. Create a service

What is the recommended approach in Blazor?

It all depends on your needs and requirements...

How would you make the 'Current Count ' value - visible and 'dynamically' updated on the MainLayout, NavMenu, Index pages?

Only by creating a service that allow you to pass the current count from a given location, and pass it to other components such as MainLayout, NavMenu, Index pages.

Note: I've answered such questions in details with working code. I've no idea of their location (400 answers so far), but you can go to my profile page and look for them.

Hope this helps...

Answer 2

One way to do this is to is to use a singleton service that is injected into the components that allows event subscriptions. I discussed this with someone else a few days ago actually.

Check out this post for a discussion on dynamically updating pages from events fired out from a singleton, that updates across connections.

Here is a working demo that I adapted from another project I'm working on, when you run this project it instructs you to open another browser, copy / paste the URL, and has a running counter that updates and a text box to use to pass messages between pages. Enter something in the box, click the button, the counter updates on all pages from all connected clients and the message passes to all pages as well and displays. Works cross-browser and across connections.

A similar concept could be used to build up things like background notifications of long running tasks, user logon notifications, etc. Pretty flexible for my needs.

Answer 3

There is two ways of doing this.

CascadingParameter and "State Container" that are very well explained in this article.

Between CascadingParameter and "State Container", you are the one that should know how your application works and decide what to do.

Probably state container would be better for something like GLOBAL object that is accessible from all the razor pages and components.

Use [Parameters]?

Instead of passing all parameters down to components, you should use CascadingParameter

Create a Static Class ?

Instead of creating a static class, you should use "State Container"