Predefined dialogs in the Blazor Dialog component

7 Aug 202224 minutes to read

The dialog component is used to render the Alert, Confirm, and Prompt dialogs with minimal code. The alert, confirm, and prompt dialogs are shown using DialogServices.

Configuration

Blazor Server App

  • For .NET 6 app, open the ~/Program.cs file and import Syncfusion.Blazor.Popups.

  • For .NET 5 and .NET 3.X app, open the ~/Startup.cs file and import Syncfusion.Blazor.Popups.

@using Syncfusion.Blazor.Popups

// Add services to the container.
builder.Services.AddRazorPages();
builder.Services.AddServerSideBlazor();
builder.Services.AddScoped<SfDialogService>();
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });

var app = builder.Build();
....
@using Syncfusion.Blazor.Popups

namespace BlazorApplication
{
    public class Startup
    {
        ...
        public void ConfigureServices(IServiceCollection services)
        {
         	services.AddRazorPages();
    		services.AddServerSideBlazor();
    		services.AddScoped<SfDialogService>();
            services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
    		services.AddServerSideBlazor().AddCircuitOptions(options => { options.DetailedErrors = true; });
    		services.AddServerSideBlazor().AddHubOptions(o =>
        }
        ...
    }
}

Blazor WebAssembly App

Open ~/Program.cs file and register the Syncfusion Blazor Service in the client web app.

@using Syncfusion.Blazor.Popups

// Add services to the container.

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
builder.Services.AddScoped<SfDialogService>();
builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
await builder.Build().RunAsync();
....
@using Syncfusion.Blazor.Popups

namespace WebApplication1
{
    public class Program
    {
        public static async Task Main(string[] args)
        {
            ....
            builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });
            builder.Services.AddScoped<SfDialogService>();
            await builder.Build().RunAsync();
        }
    }
}

open ~/_MainLayout.razor file and add SfDialogProvider

<Syncfusion.Blazor.Popups.SfDialogProvider/>

Available Predefined dialogs

There are three available predefined dialogs:

    * Alert
    * Confirm
    * Prompt

Alert

An Alert dialog box is used to display errors, warnings, and information that needs user awareness.

Use the following code to render a simple alert dialog in an application:

@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@AlertBtn">Alert</button>
    </div>
@code {
    private async Task AlertBtn()
    {
        await DialogService.AlertAsync("10% of battery remaining", "Low Battery");
    }
}

Alert Dialog

Confirm

A Confirm dialog displays a specified message along with ‘OK’ and ‘Cancel’ button. It is used to get approval from a user and it appears before any critical action.

Use the following code to render a simple confirm dialog in an application:

@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@ConfirmBtn">Confirm</button>
    </div>
@code {
    private async Task ConfirmBtn()
    {
        bool isConfirm = await DialogService.ConfirmAsync("Are you sure you want to permanently delete these items?", "Delete Multiple Items");
    }
}

Confirm Dialog

Prompt

A Prompt dialog is used to get input from a user. When the user enters “OK”, the input value is returned. When they click “Cancel”, the null value is returned.

Use the following code to render a simple prompt dialog in an application:

@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@PromptBtn">Prompt</button>
    </div>
@code {
    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>
                        <tr>
                            <td><b>AndroidAP</b></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="e-input-group">
                                    <input type="password" id="password" name="Required" class="e-input">
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
        });
    }
}

Prompt Dialog

Dragging

The Dialog supports dragging within its target container by grabbing the Dialog header, which allows the user to reposition the Dialog dynamically by using the DialogOptions.AllowDragging property.

@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@AlertBtn">Alert</button>
    </div>
@code {
    private async Task AlertBtn()
    {
        await DialogService.AlertAsync("10% of battery remaining", "Low Battery", new DialogOptions()
            {
                AllowDragging = true,
            });
        }    
}
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@ConfirmBtn">Confirm</button>
    </div>
@code {
        private async Task ConfirmBtn()
        {
            bool isConfirm = await DialogService.ConfirmAsync("Are you sure you want to permanently delete these items?", "Delete Multiple Items", new DialogOptions()
            {
                 AllowDragging = true,
            });
    }
}
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@PromptBtn">Prompt</button>
    </div>
@code {
    private async Task PromptBtn()
    {
        string promptText = await DialogService.PromptAsync(null, "Join Wi-Fi network", new DialogOptions()
        {
            AllowDragging = true,
            ChildContent = @<table class="Table">
                    <tbody>
                        <tr>
                            <td>SSID:</td>
                        </tr>
                        <tr>
                            <td><b>AndroidAP</b></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="e-input-group">
                                    <input type="password" id="password" name="Required" class="e-input">
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
        });
    }
}

Animations

The predefined dialog can be animated during the open and close actions. Also, users can customize animation’s DialogAnimationSettings.Delay, DialogAnimationSettings.Duration and DialogAnimationSettings.Effect by using the DialogAnimationSettings property.

In the following sample, the Zoom effect is enabled. So, the Dialog will open with ZoomIn and close with ZoomOut effects.

@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@AlertBtn">Alert</button>
    </div>
@code {
    private async Task AlertBtn()
    {
        await DialogService.AlertAsync("10% of battery remaining", "Low Battery", new DialogOptions()
            {
                AnimationSettings = new DialogAnimationSettings() { Effect = DialogEffect.Zoom},
            });
        }    
}
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@ConfirmBtn">Confirm</button>
    </div>
@code {
        private async Task ConfirmBtn()
        {
            bool isConfirm = await DialogService.ConfirmAsync("Are you sure you want to permanently delete these items?", "Delete Multiple Items", new DialogOptions()
            {
                 AnimationSettings = new DialogAnimationSettings() { Effect = DialogEffect.Zoom},
            });
    }
}
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@PromptBtn">Prompt</button>
    </div>
@code {
    private async Task PromptBtn()
    {
        string promptText = await DialogService.PromptAsync(null, "Join Wi-Fi network", new DialogOptions()
        {
            AnimationSettings = new DialogAnimationSettings() { Effect = DialogEffect.Zoom},
            ChildContent = @<table class="Table">
                    <tbody>
                        <tr>
                            <td>SSID:</td>
                        </tr>
                        <tr>
                            <td><b>AndroidAP</b></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="e-input-group">
                                    <input type="password" id="password" name="Required" class="e-input">
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
        });
    }
}

Position

You can customize the dialog position by using the Position property. Use the following code to customize the dialog position:

@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@AlertBtn">Alert</button>
    </div>
@code {

    private async Task AlertBtn()
    {
        await DialogService.AlertAsync("10% of battery remaining", "Low Battery", new DialogOptions()
        {
            Position = new PositionDataModel() { X = "top", Y = "center" },
        });
    }
}
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@ConfirmBtn">Confirm</button>
    </div>
@code {
        private async Task ConfirmBtn()
        {
            bool isConfirm = await DialogService.ConfirmAsync("Are you sure you want to permanently delete these items?", "Delete Multiple Items", new DialogOptions()
            {
                  Position = new PositionDataModel() { X = "center", Y = "top" },
            });
    }
}
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@PromptBtn">Prompt</button>
    </div>
@code {
    private async Task PromptBtn()
    {
        string promptText = await DialogService.PromptAsync(null, "Join Wi-Fi network", new DialogOptions()
        {
            Position = new PositionDataModel() { X = "center", Y = "top" },
            ChildContent = @<table class="Table">
                    <tbody>
                        <tr>
                            <td>SSID:</td>
                        </tr>
                        <tr>
                            <td><b>AndroidAP</b></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="e-input-group">
                                    <input type="password" id="password" name="Required" class="e-input">
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
        });
    }
}

Alert position Dialog

Confirm position Dialog

Dimension

You can customize the dialog dimensions using DialogDimension.Height and DialogDimension.Width properties. Use the following code to customize the dialog dimensions:

@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@AlertBtn">Alert</button>
    </div>
@code {
    private async Task AlertBtn()
    {
        await DialogService.AlertAsync("10% of battery remaining", "Low Battery", new DialogOptions()
            {
                ShowCloseIcon = true,
                Width = "400px",
                Height = "200px",

            });
        }    
}
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@ConfirmBtn">Confirm</button>
    </div>
@code {
        private async Task ConfirmBtn()
        {
            bool isConfirm = await DialogService.ConfirmAsync("Are you sure you want to permanently delete these items?", "Delete Multiple Items", new DialogOptions()
            {
                Width = "400px",
                Height = "200px",
            });
    }
}
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@PromptBtn">Prompt</button>
    </div>
@code {
    private async Task PromptBtn()
    {
        string promptText = await DialogService.PromptAsync(null, "Join Wi-Fi network", new DialogOptions()
        {
            Width = "500px",
            Height = "250px",
            ChildContent = @<table class="Table">
                    <tbody>
                        <tr>
                            <td>SSID:</td>
                        </tr>
                        <tr>
                            <td><b>AndroidAP</b></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="e-input-group">
                                    <input type="password" id="password" name="Required" class="e-input">
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
        });
    }
}

Alert dimension Dialog

confirm dimension Dialog

prompt dimension Dialog

Close Button Dialog

You can customize the close icon using ShowCloseIcon property. If the ShowCloseIcon property is set to true then the close icon will appear. Use the following code to enable the ShowCloseIcon:

@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@AlertBtn">Alert</button>
    </div>
@code {
        private async Task AlertBtn()
        {
            await DialogService.AlertAsync("10% of battery remaining", "Low Battery", new DialogOptions()
            {
                ShowCloseIcon =true,

            });
        }    
}
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@ConfirmBtn">Confirm</button>
    </div>
@code {
        private async Task ConfirmBtn()
        {
            bool isConfirm = await DialogService.ConfirmAsync("Are you sure you want to permanently delete these items?", "Delete Multiple Items", new DialogOptions()
            {
                ShowCloseIcon =true,
            });
    }
}
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@PromptBtn">Prompt</button>
    </div>
@code {
    private async Task PromptBtn()
    {
        string promptText = await DialogService.PromptAsync(null, "Join Wi-Fi network", new DialogOptions()
        {
            ShowCloseIcon =true,
            ChildContent = @<table class="Table">
                    <tbody>
                        <tr>
                            <td>SSID:</td>
                        </tr>
                        <tr>
                            <td><b>AndroidAP</b></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="e-input-group">
                                    <input type="password" id="password" name="Required" class="e-input">
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
        });
    }
}

Alert close icon Dialog

Confirm close icon Dialog

Prompt close icon Dialog

Customization of Action Buttons

You can customize the predefined dialog buttons by using the PrimaryButtonOptions property. Use the following code to customize the predefined dialog buttons:

@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@AlertBtn">Alert</button>
    </div>
@code {

    private async Task AlertBtn()
    {
        await DialogService.AlertAsync("10% of battery remaining", "Low Battery", new DialogOptions()
        {
            PrimaryButtonOptions = new DialogButtonOptions() { Content = "close"}
        });
    }
}
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@ConfirmBtn">Confirm</button>
    </div>
@code {
        private async Task ConfirmBtn()
        {
            bool isConfirm = await DialogService.ConfirmAsync("Are you sure you want to permanently delete these items?", "Delete Multiple Items", new DialogOptions()
            {
                PrimaryButtonOptions = new DialogButtonOptions() { Content = "Yes"},
                CancelButtonOptions = new DialogButtonOptions() { Content = "No"},
            });
    }
}
@using Syncfusion.Blazor.Popups
@inject SfDialogService DialogService
    <div>
        <button @onclick="@PromptBtn">Prompt</button>
    </div>
@code {
    private async Task PromptBtn()
    {
        string promptText = await DialogService.PromptAsync(null, "Join Wi-Fi network", new DialogOptions()
        {
            PrimaryButtonOptions = new DialogButtonOptions() { Content = "Connect"},
            CancelButtonOptions = new DialogButtonOptions() { Content = "Close"},
            ChildContent = @<table class="Table">
                    <tbody>
                        <tr>
                            <td>SSID:</td>
                        </tr>
                        <tr>
                            <td><b>AndroidAP</b></td>
                        </tr>
                        <tr>
                            <td>Password:</td>
                        </tr>
                        <tr>
                            <td>
                                <span class="e-input-group">
                                    <input type="password" id="password" name="Required" class="e-input">
                                </span>
                            </td>
                        </tr>
                    </tbody>
                </table>
        });
    }
}

Alert action buttons Dialog

Confirm action buttons Dialog

Prompt action buttons Dialog

Customization of Dialog Content

You can customize the predefined dialogs using the DialogTemplates.childContent property. Use the following code to render the textbox component inside Prompt dialog:

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

@inject SfDialogService DialogService
    <div>
        <button @onclick="@PromptBtn">Prompt</button>
    </div>
@code {
    private async Task PromptBtn()
    {
        string promptText = await DialogService.PromptAsync(null, "Template", new DialogOptions()
            {
              
        ChildContent = @<table class="Table">
                        <tbody>
                            <tr>
                                <td>SSID:</td>
                            </tr>
                            <tr>
                                <td><b>AndroidAP</b></td>
                            </tr>
                            <tr>
                                <td>
                                    <label class="control-label" style="text-align: left;font-size: 14px;font-weight: 400">Password</label>
                                </td>
                                <td>
                                <SfTextBox Placeholder="Password" Value="Password" Type="InputType.Password"></SfTextBox>
                                </td>
                            </tr>
                            
                        </tbody>
                    </table>
        });
    }
}

Customize Prompt Dialog