Predefined Dialogs in Blazor not poping up

[Ben Junior]

I copied and pasted the code from  "Example of Predefined Dialogs in Blazor Dialog Component" and only removed the line @inherits SampleBaseComponent;

I registered the service in the Program.cs as builder.Services.AddTransient<SfDialogService>();

It compiled and build without errors, but when any of the 3 buttons is clicked, it calls the related Task and executes it but nothing pops up :(

[Buvana Sathasivam]

Hi Ben,

Greetings from Syncfusion support.

Please follow the below steps to render a predefined dialog using the register dialog service.

Step #1: Register the Syncfusion Blazor SfDialogService in the Program.cs file.

using Syncfusion.Blazor;

using Syncfusion.Blazor.Popups;

 

builder.Services.AddScoped<SfDialogService>();

builder.Services.AddSyncfusionBlazor();

Step #2: Add the SfDialogProvider component in the MainLayout.razor file.

MainLayout.razor

<main>

        <article class="content px-4">

            @Body

             <Syncfusion.Blazor.Popups.SfDialogProvider />

        </article>

    </main>

Step #3: Use the following code to render the predefined Dialog as an application.

@using Syncfusion.Blazor.Popups

@inject SfDialogService DialogService

    <div>

        <button class="e-btn dlgbtn" @onclick="@AlertBtn">Alert</button>

        <button class="e-btn dlgbtn" @onclick="@ConfirmBtn">Confirm</button>

        <button class="e-btn dlgbtn" @onclick="@PromptBtn">Prompt</button>

    </div>

@code {

    private async Task AlertBtn()

    {

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

    }

    private async Task ConfirmBtn()

    {

        bool isConfirm = await DialogService.ConfirmAsync("Are you sure you want to permanently delete these items?", "Delete Multiple Items");

    }

    private async Task PromptBtn()

    {

        string promptText = await DialogService.PromptAsync(null, "Join Wi-Fi network", new DialogOptions()

        {

            ChildContent = @<table class="Table">

                    <tbody>

                        <tr>

                            <td>SSID:</td>

                        </tr>

                    </tbody>

                </table>

        });

    }

}

 

Please find the below sample for your reference.

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/NE077E~1-1362194614

Regards,

Buvana S