How to Create reusable Dialogs in Blazor ?

2 mins read

You can initialize single blazor dialog instance and use it all over application by creating server. Refer below steps to create service to show dialog from any page.

Create a dialog service to inject in pages to show dialog from anywhere

 
using System;
using Microsoft.AspNetCore.Components;
 
namespace Blazor_Dialog_Service.Components
{
    public class DialogService
    {
        public event Action<DialogOptions> DialogInstance;
 
        public void Open(DialogOptions options)
        {
            // Invoke DialogComponent to update and show the dialog with options
            this.DialogInstance.Invoke(options);
        }
    }
}

Add the DialogService to services collection.

In ~/Program.cs for .NET 6 and later (Blazor Server)
In ~/Startup.cs for .NET 5 and .NET 3.X (Blazor Server)
In ~/Program.cs for .NET 6 and later (Blazor Server)

In ~/Program.cs for .NET 6 and later (Blazor WebAssembly)

 
using Syncfusion.Blazor;
using Blazor_Dialog_Service.Components;
...
 
public void ConfigureServices(IServiceCollection services)
        {
            services.AddRazorPages();
            services.AddServerSideBlazor();
            services.AddSingleton<WeatherForecastService>();
            services.AddSingleton<DialogService>();
            services.AddSyncfusionBlazor();
        }
 
...

Create DialogComponent which shows SfDialog based on DialogService notification.

 
@using Syncfusion.Blazor.Popups;
@if (RenderDialog)
{
  <SfDialog @ref="dialogObj" IsModal="@Options.IsModal" Width="200px" ShowCloseIcon="@Options.ShowCloseIcon" @bind-Visible="@Visibility">
        <DialogTemplates>
            <Content> @Options.Content </Content>
            <FooterTemplate><button class="e-btn" @onclick="alertDialog"> OK </button></FooterTemplate>
        </DialogTemplates>
        <DialogPositionData X="@Xvalue" Y="@Yvalue"></DialogPositionData>
   </SfDialog>
}
 
@code {
    [Inject]
    public DialogService DialogService { get; set; }
    SfDialog dialogObj;
    private bool RenderDialog { get; set; } = false;
    private bool Visibility { get; set; } = false;
    private string Xvalue = "center";
    private string Yvalue = "top";
 
    // Parameter
    private DialogOptions Options = new DialogOptions();
    protected override void OnInitialized()
    {
        // Update the parameter in local variable and render the dialog
        DialogService.DialogInstance += (DialogOptions options) =>
        {
            InvokeAsync(() =>
            {
                this.Options.Header = options.Header;
                this.Options.Content = options.Content;
                this.Options.IsModal = options.IsModal;
                this.Options.ShowCloseIcon = options.ShowCloseIcon;
                this.Options.FooterTemplate = options.FooterTemplate;
                this.RenderDialog = true;
                this.Visibility = true;
                this.StateHasChanged();
            });
        };
    }
    public async Task alertDialog()
    {
        await this.dialogObj.HideAsync();
    }
}

Add DialogComponent created in above step in MainLayout.razor.

 
@inherits LayoutComponentBase
 
<div class="page">
    <div class="sidebar">
        <NavMenu />
    </div>
    <div class="main">
        <div class="top-row px-4">
            <a href="https://docs.microsoft.com/aspnet/" target="_blank">About</a>
        </div>
    <div class="content px-4">
            @Body
       </div>
    </div>
</div>
<DialogComponent />

Now, you can inject DialogService in any page and call DialogService.ShowDialog() method to show Dialog.

 
@using Blazor_Dialog_Service.Components
@inject DialogService DialogServices
 
<button class="e-btn" @onclick="@showDialog"> Show Dialog </button>
 
@code {
    private void showDialog()
    {
      this.DialogServices.Open(new DialogOptions()
       {
         Content =@<b>Alert</b>, // Fragment loaded from external component
       });
    }
}

View Sample in GitHub

Conclusion

I hope you enjoyed learning about how to create reusable Dialogs in Blazor.

You can refer to our Blazor Dialog featuretour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Blazor Dialog demo to understand how to create and manipulate data.

For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!

Did you find this information helpful?

Yes

Comments

How to Create reusable Dialogs in Blazor ?

Access denied