SfDialogProvider popup not working with .NET 8.0 in Blazor Web App - Server render mode with Per Page/ Component interactivity

Question

I am adding this because I found a problem, but also the solution.

I am creating a Blazor Web App in .NET 8 using Visual Studio 2022. During the creation of the Web App I selected:

Interactive Render Mode: Server
Interactivity Location: Per Page/Component

I went through the installation of the Blazor Predefined Dialogs as per the documentation, (as at 3^rd July 2025: https://blazor.syncfusion.com/documentation/predefined-dialogs/getting-started-webapp), described below.

When I tested the application it ran, but Syncfusion predefined dialog popups did not work.

SOLUTION

The solution to the problem turned out to be the location of the ‘Dialog Provider’ (

<Syncfusion.Blazor.Popups.SfDialogProvider />). The documentation states that it can either be placed in MainLayout.razor, or in individual pages, but rather ambiguously states that “But it should be added only once in the app.”. I found that if placed in MainLayout.razor the popup did not work. However, if I placed in individual pages it did work, even if it was placed in multiple pages.

I did not test the other combinations of Interactivity render modes and/or Interactivity location.

Documented installation procedure

I installed the Blazor NuGet packages:

Syncfusion.Blazor.Popups (26.1.40)
Syncfusion.Blazor.Themes (26.1.40)

I added the following to _Imports:

@using Syncfusion.Blazor
@using Syncfusion.Blazor.Popups

I registered the service in Program.cs

....

using Syncfusion.Blazor;

using Syncfusion.Blazor.Popups;

....

builder.Services.AddSyncfusionBlazor();

builder.Services.AddScoped<SfDialogService>();

....

I added the stylesheet and script to App.razor

<head>

....

</head>

<body>

....

</body>

As per the documentation I added SfDialogProvider in MainLayout.razor

<Syncfusion.Blazor.Popups.SfDialogProvider/>

To test I amended Home.razor to add an Alert popup, as per the documentation:

@page "/"

@rendermode InteractiveServer

@using Syncfusion.Blazor.Popups

@using Syncfusion.Blazor.Buttons

@inject SfDialogService DialogService

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.

<div>

<SfButton @onclick="@AlertBtn">Alert</SfButton>

</div>

<div class="status" style ="padding-top:10px">@DialogStatus</div>

@code {

private string DialogStatus { get; set; }

private async Task AlertBtn()

{

await DialogService.AlertAsync("10% of battery remaining", "Low Battery");

this.DialogStatus = "The user closed the Alert dialog";

}

When I came to test it, the application ran, but the popup did not appear.

Deleting <Syncfusion.Blazor.Popups.SfDialogProvider/> from MainLayout and adding it into the above, after PageTitle solved the problem.

Hello, world!

Welcome to your new app.

Alert

@DialogStatus

@code { private string DialogStatus { get; set; } private async Task AlertBtn() { await DialogService.AlertAsync("10% of battery remaining", "Low Battery"); this.DialogStatus = "The user closed the Alert dialog"; }}When I came to test it, the application ran, but the popup did not appear. Deleting from MainLayout and adding it into the above, after PageTitle solved the problem.

Priyanka Karthikeyan · Answer

Hi Christopher Bell, After reviewing your concern, we've identified that the issue may stem from the usage of render modes on individual pages while also employing a globally declared service provider. This global declaration might render the service provider inaccessible to individual render modes, resulting in the observed behavior. To address this, it's essential to ensure that when using render modes on individual pages, you utilize the service provider specific to that particular razor page. Likewise, when employing render modes on common pages, make sure to use the service provider relevant to those common pages. Here's an example demonstrating how to incorporate render modes and a dialog on a razor page: [Home.Razor] @using Syncfusion.Blazor.Popups@inject SfDialogService DialogService@rendermode InteractiveServer Home

Dialog

@DialogStatus

@code { private string DialogStatus { get; set; } private async Task OnBtnClick() { await DialogService.AlertAsync("20% of battery remaining", "Low Battery"); this.DialogStatus = "The user closed the Alert dialog"; }} You can use this approach on multiple Razor pages to show the dialog. We will add this information to our documentation and refresh it in an upcoming release. Regards,Priyanka K Attachment: BlazorApp1_b8272be1.zip

Christopher Bell · Answer

Thank you Priyanka.  That's pretty much what I thought.Regards,Chris

Priyanka Karthikeyan · Answer

Hi Christopher Bell,Thank you for the update. Please get back to us if you need any further assistance.Regards,Priyanka K