Open Dialog from a button in different blazor component

[JLM srl]

I'm trying to open a Dialog using the click event of a button inside a different blazor component, to do so I created an AppState class with a boolean variable. At the onclick event the variable is updated, so the AppState class works correctly but the Dialog does not open. Could you someone tell me how to solve the problem?

This is my Dialog component

@inject AppState appState;

<div class="popup-container">
    <SfDialog Target=".popup-container" Width="680px" Height="480px" IsModal="true" ShowCloseIcon="true" @bind-Visible="@appState.PopupCampaignVisibility">
        <DialogTemplates>
            <Content> 
                <div class="popup-content">
                    <div class="svg-container">
                       
                    </div>
                    <div class="text-container">
                        
                    </div>
                    <div class="button-container">
                        <SfButton>In</SfButton>
                    </div>
                </div>
            </Content>
        </DialogTemplates>
    </SfDialog>
</div>
​

This is in my AppState class

public bool PopupCampaignVisibility { get; set; } = false;
​

This is in my MainLayout Component

<PopupCampagna Name="Mauro"></PopupCampagna>

That's the component where i would like to open the Dialog

@inject AppState appState;

<div class="container-fluid p-0 navbarinf">
    <div class="row h-100 m-0">
        <div class="col-12 h-100 main-container">
            <div class="text-container">
                
            </div>
            <div class="button-container">
                <button @onclick="@(() => ShowPopupCampaign(true))">text</button>
            </div>
        </div>
    </div>
</div>

@code {
    void ShowPopupCampaign(bool b)
    {
        appState.PopupCampaignVisibility = b;
    }
}

[Vinothkumar Yuvaraj]

Hi JLM srl,

Greetings from Syncfusion support.

We have analyzed your reported query. We recommend following the below steps to meet your requirements.

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 Blazor_Dialog_Service.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; } 

    } 

} 

3. Add DialogService.cs class file and add below codes

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); 

        } 

    } 

} 

4. Add DialogComponent.razor file and add below codes

@using Syncfusion.Blazor.Popups;

@if (RenderDialog)

{

    <SfDialog @ref="dialogObj" IsModal="@Options.IsModal" Width="250px" ShowCloseIcon="@Options.ShowCloseIcon" @bind-Visible="@Visibility">

        <DialogTemplates>

            <Header>@Options.Header</Header>

            <Content> @Options.Content </Content>

        </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();

    }

}

5. Register the DialogService in the StartUp.cs file as below

using Blazor_Dialog_Service.Components; 

namespace Blazor_Dialog_Service 

{ 

    public class Startup 

    { 

        . . . 

        public void ConfigureServices(IServiceCollection services) 

        { 

            services.AddRazorPages(); 

            services.AddServerSideBlazor(); 

            services.AddSingleton<WeatherForecastService>(); 

            services.AddSingleton<DialogService>(); 

            services.AddSyncfusionBlazor(); 

        } 

        . . . 

     } 

} 

6. Initialize the DialogComponent, end of the MainLayout.razor file for update the instance in DialogService

@using Blazor_Dialog_Service.Components 

. . . 

. . . 

<DialogComponent /> 

7. The inject DialogService and using the dialog component by calling the ‘DialogService.Open’ with the parameters anywhere in the code.

@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()

        {

      Header = "ALERT",

            Content =@<b>Test</b>, // Fragment loaded from external component

        });

    }

}

We have also prepared a sample for your reference, 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Blazor_Dialog_Service1100038855 

Documentation: https://blazor.syncfusion.com/documentation/common/extend-and-customize-components

Please check the above code snippets and the sample and let us know if it satisfies your requirement.

Regards,

Vinothkumar