MessageService

The MessageService is a service that can be used to show MessageBars and Notifications (in a Notification Center as shown here in the demo site). It needs to be injected into a page or component before any of its methods can be called.

The MessageService is automatically registered in the DI provider with the .AddFluentUIComponents() method call.

MessageBar provider

Messages are rendered by the <FluentMessageBarProvider />. This component needs to be added to the layout of your application/site. For a message bar that needs to be shown at the top of the screen, you typically do this in the MainLayout.razor file at the location in the HTML structure where you want the message bars to appear of the <main> section like this:

<main>
    <nav>
        <!-- -->
    </nav>
    <div class="content">
        <article id="article">
            <FluentMessageBarProvider Section="MESSAGES_TOP"/>
            @Body
        </article>
    </div>
</main>

IMPORTANT!!

For the <FluentMessageBarProvider/> to work porperly, it needs interactivity! If you are using "per page" interactivity or ASP.NET Core 8 or above with Server Side Rendering , make sure to add a @rendermode to either the provider itself or the component the provider is placed in.

It is also possible to have message bars appear in a dialog or card. In that case you need to add the <FluentMessageBarProvider /> component to the specification the dialog or card using the Section parameter as an identification.
You can then target a specific message bar by specifying the Section parameter in the MessageService.ShowMessageBar()/ MessageService.ShowMessageBarAsync() methods.

See the MessageBar page for examples on how to use the messages and FluentMessageBar component.