1. Home
  2. Forum
  3. Blazor
  4. Custom Dialog component with dynamic content

Custom Dialog component with dynamic content

Hi,

Is it possible to design a custom dialog component that contains the pages I have designed in the past? In other words, a custom dialog component whose input parameter is the page name and displays the contents of the page in the dialog?

Thank you


8 Replies
VJ Vinitha Jeyakumar Syncfusion Team December 27, 2021 03:05 PM UTC

Hi Sarah, 
 
 
Currently, we are validating your reported query. We will update you the further details in two business days on or before 29th December 2021. 
 
Regards, 
Vinitha 


VJ Vinitha Jeyakumar Syncfusion Team December 30, 2021 03:01 PM UTC

Hi Sarah,  
 
 
We cannot pass page name as a parameter to the dialog to show the contents of the page. But, you can create a reusable dialog component and change its properties while rendering it in parent component through property binding as follows, 
 
Dialog.razor 
<SfDialog @ref="DialogObj" @bind-Visible="@Visible" Width="250px"> 
    <DialogTemplates> 
        <Header> @Header </Header> 
        <Content> @Content </Content> 
        <FooterTemplate> 
            <button class="e-btn e-primary" @onclick="OnOkClick">Ok</button> 
            <button class="e-btn" @onclick="OnCancelClick">Cancel</button> 
        </FooterTemplate> 
    </DialogTemplates> 
</SfDialog> 
 
@code { 
    SfDialog DialogObj; 
 
    [Parameter] 
    public string Header { get; set; } = ""; 
    [Parameter] 
    public string Content { get; set; } = ""; 
    [Parameter] 
    public bool Visible { get; set; } = false; 
 
    public void Show() 
    { 
        this.DialogObj.Show(); 
    } 
 
    private void OnOkClick() 
    { 
        this.DialogObj.Hide(); 
    } 
 
    private void OnCancelClick() 
    { 
        this.DialogObj.Hide(); 
    } 
} 
 
Index.razor 
<Dialog @ref="ConfirmDialog" Visible=@Visibility Header="@DlgHeader" Content="@DlgContent"></Dialog> 
 
@code { 
    Dialog ConfirmDialog; 
    public bool Visibility { get; set; } = false; 
    public string DlgHeader { get; set; } = ""; 
    public string DlgContent { get; set; } = ""; 
 
    private void ShowDialog() 
    { 
        this.DlgHeader = "Index page"; 
        this.DlgContent = "Are you want to close this confirm Dialog in index page ?"; 
        this.ConfirmDialog.Show(); 
    } 
} 
 
 
Regards, 
Vinitha 


SA Sarah January 1, 2022 05:29 AM UTC

Hi Vinitha Jeyakumar,

I reviewed examples of your site. Is it possible to implement the following example with the reusable dialog component that you designed?




Thank you



VJ Vinitha Jeyakumar Syncfusion Team January 3, 2022 12:37 PM UTC

Hi Sarah,  
 
 
Yes we can achieve your requirement using the reusable dialog, 
 
Follow below steps to configure the reusable dialog, 
  1. Create folder Components in the root folder
  2. Add DialogOptions.cs class file and add below codes (If require more SfDialog properties, add and configure in DialogComponent)
  
  
using Microsoft.AspNetCore.Components;  
  
namespace Dialog.Components  
{  
    public class DialogOptions  
    {  
        public string Header { get; set; }  
        public RenderFragment Content { get; set; }  
        public RenderFragment FooterTemplate { get; set; }  
        public bool IsModal { get; set; }  
        public bool ShowCloseIcon { get; set; }  
    }  
}  
  
  
  1. Add DialogService.cs class file and add below codes
  
  
using System;  
using Microsoft.AspNetCore.Components;  
  
namespace Dialog.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);  
        }  
    }  
}  
  
  
  1. Add DialogComponent.razor file and add below codes
  
  
@using Syncfusion.Blazor.Popups;  
  
@if (RenderDialog)  
{  
    <SfDialog IsModal="@Options.IsModal" ShowCloseIcon="@Options.ShowCloseIcon" @bind-Visible="@Visibility">  
        <DialogTemplates>  
            <Header> @Options.Header </Header>  
            <Content> @Options.Content </Content>  
            <FooterTemplate>@Options.FooterTemplate</FooterTemplate>  
        </DialogTemplates>  
    </SfDialog>  
}  
  
@code {  
    [Inject]  
    public DialogService DialogService { get; set; }  
  
    private bool RenderDialog { get; set; } = false;  
    private bool Visibility { get; set; } = false;  
  
    // 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();  
            });  
        };  
    }  
}  
  
  
  1. Register the DialogService in the Program.cs file as like below
  
  
using Dialog.Components;  
  
namespace Dialog  
{  
    public class Program  
    {  
        public static async Task Main(string[] args)  
        {  
            ...      
            builder.Services.AddScoped<DialogService>();  
            ...  
        }  
    }  
}  
  
  
                           
  
  1. Initialize the DialogComponent, end of the MainLayout.razor file for update the instance in DialogService
  
  
@using Dialog.Components   
  
…  
…  
<DialogComponent />  
  
  
  1. Create SignIn and SignUp razor file which will load a content to SfDialog
  2. Add below code in Index.razor file and run the application
  
                                       
@page "/"  
  
@using Dialog.Components  
  
@inject DialogService DialogServices  
  
<button class="e-btn" @onclick="@SignInDialog"> Sign In Dialog </button>  
<button class="e-btn" @onclick="@SignUpDialog"> Sign Up Dialog </button>  
  
@code {  
    private void SignInDialog()  
    {  
        this.DialogServices.Open(new DialogOptions()  
        {  
            Header = "Sign In",  
            Content = @<SignIn />, // Fragment loaded from external component  
            IsModal = true,  
            ShowCloseIcon = true,  
            FooterTemplate = @<button> OK </button> // Fragments  
         });  
    }  
  
    private void SignUpDialog()  
    {  
        this.DialogServices.Open(new DialogOptions()  
        {  
            Header = "Sign Up",  
            Content = @<SignUp />, // Fragment loaded from external component  
            IsModal = true,  
            ShowCloseIcon = true,  
            FooterTemplate = @<button> OK </button> // Fragments  
        });  
    }  
}   
  
  
We have prepared sample for your reference, get it from below link, 
 
 
Regards, 
Vinitha 


DE Dennis July 5, 2022 02:03 PM UTC

The last post seems to work perfectly, i am just confused about one thing.


could someone explain to me, by taking that approach how i can close the dialog by a button present in the dialog

so for instance by taking the example above, from a button within the signup or signin dialogs


BS Buvana Sathasivam Syncfusion Team July 6, 2022 04:44 PM UTC

Hi Dennis,


You can achieve your requirement by adding dialog buttons inside the SfDialog component and binding the click event to close the dialog. In the below sample, we have hidden the dialog when you click the dialog OK button. Please find the below code and sample for your reference.

Components/DialogComponent.razor

<SfDialog @ref="DialogObj">……

         <DialogButtons>

            <DialogButton @ref="DialogButton" Content="OK" OnClick="@CloseDialog"/>

        </DialogButtons>

    </SfDialog>

 

 

@code {

    SfDialog DialogObj;

      public async Task CloseDialog() // Trigger when you click the dialog button

    {

        await this.DialogObj.HideAsync();

    }

}


Sample : https://www.syncfusion.com/downloads/support/directtrac/general/ze/Dialog-sample-1312696114-482426912


Regards,

Buvana S


GP Greg Paff April 20, 2025 01:56 AM UTC

With this example, how would you go about returning data from the dialog to the calling component, when the dialog is closed?


PK Priyanka Karthikeyan Syncfusion Team April 30, 2025 10:31 AM UTC

Hi Greg Paff , 


Thank you for your patience. To achieve a reusable dialog that can be invoked from anywhere and also return data back to the calling component (like an input value), you can use TaskCompletionSource to await the dialog's result. This allows the calling component to await the dialog result and continue execution once the dialog is closed—making it ideal for scenarios like retrieving form input values.

We have attached a sample for your reference. Please review the sample if you have any concerns or queries ,please get back to us. 



Regards, 
Priyanka K


Attachment: Blazor_Dialog_Services_a8b3275e.zip

Loader.
Up arrow icon