Message bar not displayed and no error messages seen

[satyajit-behera]

I am implementing the Fluent Message Bar using the documentation and sample provided here. Followed the code throughout as below. But when I click the notification button, does not show up the window as happening in the sample. Am I missing something? Thanks in advance.

<FluentHeader>
    <div class="notifications">
        <NotificationCenter />
    </div>
    <div class="settings">
        <SiteSettings />
    </div>
</FluentHeader>
<FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
    <NavMenu />
    <FluentBodyContent>
        <FluentMessageBarProvider Section="@App.MESSAGES_TOP" />
        <div class="content">
            @Body
        </div>

        <FluentToastProvider MaxToastCount="10" />
        <FluentDialogProvider />
        <FluentTooltipProvider />

    </FluentBodyContent>
</FluentStack>

For the NotificationCenter.razor (as available in the sample):

@implements IDisposable
@inject IDialogService DialogService
@inject IMessageService MessageService

<FluentButton BackgroundColor="var(--neutral-layer-4)" OnClick="OpenNotificationCenterAsync" Title="Notification center">
    @if (MessageService.Count(App.MESSAGES_NOTIFICATION_CENTER) > 0)
    {
        <FluentCounterBadge Count="@MessageService.Count(App.MESSAGES_NOTIFICATION_CENTER)"
                            Max="9"
                            ShowOverflow="true"
                            BackgroundColor="@Color.Error"
                            Color="Color.Fill"
                            Appearance="Appearance.Accent"
                            ShowZero=true>
            <ChildContent>
                @NotificationIcon()
            </ChildContent>
        </FluentCounterBadge>
    }
    else
    {
        @NotificationIcon()
    }
</FluentButton>

@code {
    private IDialogReference? _dialog;

    protected override void OnInitialized()
    {
        MessageService.OnMessageItemsUpdated += UpdateCount;
    }

    private void UpdateCount()
    {
        InvokeAsync(StateHasChanged);
    }

    private RenderFragment NotificationIcon() =>
        @<FluentIcon Value="@(new Icons.Regular.Size20.Alert())" Color="Color.Neutral" Title="Notification center" />;

    private async Task OpenNotificationCenterAsync()
    {
        DemoLogger.WriteLine($"Open notification center");

        _dialog = await DialogService.ShowPanelAsync<NotificationCenterPanel>(new DialogParameters<GlobalState>()
            {
                Alignment = HorizontalAlignment.Right,
                Title = $"Notifications",
                PrimaryAction = null,
                SecondaryAction = null,
                ShowDismiss = true
            });
        DialogResult result = await _dialog.Result;
        HandlePanel(result);
    }

    private static void HandlePanel(DialogResult result)
    {
        if (result.Cancelled)
        {
            DemoLogger.WriteLine($"Notification center dismissed");
            return;
        }

        if (result.Data is not null)
        {
            DemoLogger.WriteLine($"Notification center closed");
            return;
        }
    }

    public void Dispose()
    {
        MessageService.OnMessageItemsUpdated -= UpdateCount;
    }

}

And NotificationCenterPanel code:

@implements IDialogContentComponent<GlobalState>
@inject IMessageService MessageService

<div>

    <FluentStack>
        <FluentSpacer />

        <FluentAnchor Appearance="@Appearance.Hypertext" Href="" @onclick="@(e => MessageService.Clear(App.MESSAGES_NOTIFICATION_CENTER) )">
            Dismiss all
        </FluentAnchor>
    </FluentStack>

    <br />

    <FluentMessageBarProvider Section="@App.MESSAGES_NOTIFICATION_CENTER" MaxMessageCount="-1" Type="@MessageType.Notification" />
</div>

@code {
    [Parameter]
    public GlobalState Content { get; set; } = default!;
}

[vnbaaij]

Would be easier to help if you just provide a repo we can clone and run...
With the code you posted, I don't see any button which should be pressed nor any code that triggers a MessageBar.

[vnbaaij]

Then you are probably in SSR rendermode. What interactivity did you choose when creating the project?

An example of calling a message that displays in the notification center is here : https://github.com/microsoft/fluentui-blazor/blob/dev/examples/Demo/Shared/Pages/MessageBar/Examples/MessageBarDefault.razor#L8

[satyajit-behera]

I have chosen Auto (Server and Web Assembly) as interactive mode.

[satyajit-behera]

Also, I have updated the sample repo with adding message to notification center. Somehow not getting the result. Added the button in the Home page.

https://github.com/satyajit-behera/fluentUITestSample

[vnbaaij]

If running Auto, your components must be in the Client project

[satyajit-behera]

In an Auto environment, can you please help with some guidelines for which components to run in server and which ones in client. Do you know of any sample in the same. Thanks.

[vaidhykumar]

satyajit-behera Could you kindly update your project https://github.com/satyajit-behera/fluentUITestSample . I tried to run it and still see the original problem.

[satyajit-behera]

If running Auto, your components must be in the Client project

Thanks @vnbaaij It works.