Where should I add FluentDialogProvider when the project was created using the fluent blazor project templat? #2884

LITTOMA · 2024-10-30T06:06:14Z

LITTOMA
Oct 30, 2024

As per the document, I should add these:

 <FluentDialogProvider />

to the end of the <main/> element in MainLayout.razor.

However the MainLayout.razor created by the template looks like below:

@inherits LayoutComponentBase

<FluentLayout>
    <FluentHeader>
        WarrantyApp
    </FluentHeader>
    <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
        <NavMenu />
        <FluentBodyContent Class="body-content">
            <div class="content">
                @Body
            </div>
        </FluentBodyContent>
    </FluentStack>
    <FluentFooter>
        <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
        <FluentSpacer />
        <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
    </FluentFooter>
</FluentLayout>

<div id="blazor-error-ui">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

Where's <main/>???

Answered by NabaviFard-Mahdi

Nov 2, 2024

In blazor SSR - interactivity per page/component you can do this in MainLayout.razor

<FluentDialogProvider @rendermode="InteractiveServer"/>

Sample :

@using PishranWebApp.Shared.Resources
@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
@inject Direction DirectionDesignToken
@inherits LayoutComponentBase

<FluentToastProvider MaxToastCount="50" Timeout="5000" Position="ToastPosition.TopCenter" @rendermode="InteractiveServer"/>
<FluentDialogProvider @rendermode="InteractiveServer"/>
<FluentTooltipProvider @rendermode="InteractiveServer"/>
<FluentMessageBarProvider Section="Main" @rendermode="InteractiveServer"/>
<FluentMenuProvider/>


<FluentLayout>
    <FluentHeader>

        <…

View full answer

vnbaaij · 2024-10-30T06:11:53Z

vnbaaij
Oct 30, 2024
Maintainer

Best place to put this (and other providers) is probably at the end of the FluentBodyContent

2 replies

LITTOMA Oct 30, 2024
Author

Thanks for your quick answer! I have tried this but it still throwing exception:

System.ArgumentNullException: <FluentDialogProvider /> needs to be added to the main layout of your application/site. (Parameter 'OnShowAsync')
   at Microsoft.FluentUI.AspNetCore.Components.DialogService.ShowDialogAsync[TData](Type dialogComponent, TData data, DialogParameters parameters) in /_/src/Core/Components/Dialog/Services/DialogService-Dialog.cs:line 19
   at Microsoft.FluentUI.AspNetCore.Components.DialogService.ShowMessageBoxAsync(DialogParameters`1 parameters) in /_/src/Core/Components/Dialog/Services/DialogService-MessageBox.cs:line 306
   at Microsoft.FluentUI.AspNetCore.Components.DialogService.ShowSuccessAsync(String message, String title, String primaryAction) in /_/src/Core/Components/Dialog/Services/DialogService-MessageBox.cs:line 152

dvoituron Oct 30, 2024
Maintainer

You probably need to set the Blazor Render Mode to InteractiveServer,

Adding @rendermode InteractiveServer in the top of your MainLayout.razor file.

Or globally to you entire app adding this attribute in your app.razor file.

<body>
    <Routes @rendermode="RenderMode.InteractiveServer" />
    <script src="_framework/blazor.web.js"></script>
</body>

NabaviFard-Mahdi · 2024-11-02T08:04:11Z

NabaviFard-Mahdi
Nov 2, 2024

In blazor SSR - interactivity per page/component you can do this in MainLayout.razor

<FluentDialogProvider @rendermode="InteractiveServer"/>

Sample :

@using PishranWebApp.Shared.Resources
@using Microsoft.FluentUI.AspNetCore.Components.DesignTokens
@inject Direction DirectionDesignToken
@inherits LayoutComponentBase

<FluentToastProvider MaxToastCount="50" Timeout="5000" Position="ToastPosition.TopCenter" @rendermode="InteractiveServer"/>
<FluentDialogProvider @rendermode="InteractiveServer"/>
<FluentTooltipProvider @rendermode="InteractiveServer"/>
<FluentMessageBarProvider Section="Main" @rendermode="InteractiveServer"/>
<FluentMenuProvider/>


<FluentLayout>
    <FluentHeader>

        <FluentStack Orientation="Orientation.Horizontal" HorizontalAlignment="HorizontalAlignment.Center" VerticalAlignment="VerticalAlignment.Center">
            <FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.Start" VerticalAlignment="VerticalAlignment.Center">
                <AppTheme/>
            </FluentStack>

            <FluentStack Orientation="Orientation.Vertical" HorizontalAlignment="HorizontalAlignment.End" VerticalAlignment="VerticalAlignment.Center">
                <FluentProfileMenu 
                                   Status="@PresenceStatus.Available"
                                   HeaderLabel="@AppStringResource.AppCompanyName"
                                   Initials="YSB"
                                   FullName="Bill Gates"
                                   EMail="[email protected]"
                                   PopoverStyle="min-width: 330px;"
                                   ImageSize="32px"
                                   TopCorner="true"
                                   FooterLabel="@AppStringResource.Account"
                                   FooterLink="/Account/Profile"
                                   HeaderButton="@AppStringResource.SignOut"/>
            </FluentStack>

        </FluentStack>

    </FluentHeader>
    <FluentStack Class="main" Orientation="Orientation.Horizontal" Width="100%">
        <NavMenu/>
        <FluentBodyContent Class="body-content">
            <div class="content">
                @Body
            </div>
        </FluentBodyContent>
    </FluentStack>
    <FluentFooter>
        <a href="https://www.fluentui-blazor.net" target="_blank">Documentation and demos</a>
        <FluentSpacer/>
        <a href="https://learn.microsoft.com/en-us/aspnet/core/blazor" target="_blank">About Blazor</a>
    </FluentFooter>
</FluentLayout>

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Where should I add FluentDialogProvider when the project was created using the fluent blazor project templat? #2884

{{title}}

Replies: 2 comments 2 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

Select a reply

Where should I add FluentDialogProvider when the project was created using the fluent blazor project templat? #2884

LITTOMA Oct 30, 2024

Replies: 2 comments · 2 replies

vnbaaij Oct 30, 2024 Maintainer

LITTOMA Oct 30, 2024 Author

dvoituron Oct 30, 2024 Maintainer

NabaviFard-Mahdi Nov 2, 2024

LITTOMA
Oct 30, 2024

Replies: 2 comments 2 replies

vnbaaij
Oct 30, 2024
Maintainer

LITTOMA Oct 30, 2024
Author

dvoituron Oct 30, 2024
Maintainer

NabaviFard-Mahdi
Nov 2, 2024