1. Home
  2. Forum
  3. Blazor
  4. Generic resusable dialog definition

Generic resusable dialog definition

(Sorry in advance for not formatting source code, my browser locks up when I try to add styling to any text block.)

Hello,

I would like to add a generic dialog box (As a component, probably) to my application where I can call it and specify only the header text and  the body text. All other aspects/styling/logic will be defined in the component itself.

So what I want is something similar to a MessageBox on Winforms. What I want to avoid is to need to have an <SfDialog> component on every one of my pages/components that need it.

I've created such a component (By default Visible="false"), and I pass it the title and body text in a ShowDialog() method I created:


public async Task ShowDialog(string title, string message) {
    this._title = title;
    this._message = message;
    await this._dlgMessage.Show();
}

My dialog is defined like this:

<SfDialog @ref="@_dlgMessage" Width="50%" AllowDragging="true" IsModal="true" ShowCloseIcon="true" Visible="false">
    <DialogTemplates>
        <Header>@_title</Header>
        <Content>
            @_message
        </Content>
    </DialogTemplates>
    <DialogButtons>
        <DialogButton Content="Ok" IsPrimary="true" OnClick="OnDlgMessageOkClick"></DialogButton>
    </DialogButtons>
</SfDialog>

So far, so good... But when I call my ShowDialog() method, the _message and _title contents are blank/null/empty. so I get an empty dialog box with a button.

Then I click the button to dismiss the dialog box (which calls "this._dlgMessage.CloseDialog(null);"), then the real contents flash on the screen right as the dialog is closed.

If I call the dialog show method again with different values, the _previous_ values are shown and process repeats itself.

It's like the system is not binding the values as the dialog is shown, only when it's being closed.

Also, all the SfDialog examples show using a @bind-Visible="@Visible" mechanism for hiding and showing the dialog, but that does not work for me at all, only calling the Show()/ShowDialog() and CloseDialog() work for showing and hiding the dialog box.

Is there a better way to go about this?


6 Replies
VJ Vinitha Jeyakumar Syncfusion Team August 10, 2021 02:29 PM UTC

Hi Gabriel, 
 
 
Greetings from Syncfusion support 
 
 
We have validated your query “Generic resusable dialog definition” 
 
We have achieved your requirement of reusing the dialog component which can be called using a showDialog method and you can also pass the header and content of the dialog as parameters. We prepared a sample for your reference using the code you have shared. Please check the below code for your reference, 
 
Code snippet:  
<button class="e-btn" @onclick="@OnBtnClick1">Dialog 1</button> 
<button class="e-btn" @onclick="@OnBtnClick2">Dialog 2</button> 
<SfDialog  @ref ="dlg" Width="50%" AllowDragging="true" IsModal="true" ShowCloseIcon="true" Visible="false"> 
    <DialogTemplates> 
        <Header>@title</Header> 
        <Content> 
            @message 
        </Content> 
    </DialogTemplates> 
    <DialogButtons> 
        <DialogButton Content="Ok" IsPrimary="true" OnClick="@close"></DialogButton> 
    </DialogButtons> 
</SfDialog> 
@code { 
    SfDialog dlg; 
    private string title { get; set; } 
    private string message { get; set; } 
    public async Task ShowDialog(string title, string message) 
    { 
        this.title = title; 
        this.message = message; 
        await this.dlg.ShowAsync(); 
    } 
    public async Task OnBtnClick1() 
    { 
        await this.ShowDialog("Dialog Header1", "Content1"); 
    } 
    public async Task OnBtnClick2() 
    { 
        await this.ShowDialog("Dialog Header2", "Content2"); 
    } 
    public async Task close() 
    { 
        await this.dlg.HideAsync(); 
    } 
} 
} 
 
 
 
If still, you are facing issues with your requirement, can you please share us with the following details? 
 
  • The package version you have used.
  • The exact use case scenario to reproduce the issue.
  • If possible, please share us with the issue reproducing runnable sample or modify the shared sample with the issue reproducing code.
 
The above details will be helpful for us to validate the issue from our end and assist you at earliest. 
 
Regards, 
Vinitha. 


GA Gabriel replied to Vinitha Jeyakumar August 10, 2021 07:07 PM UTC

Hi Vinitha, thank you for the answer. This is not the use case I have: I have the defined in a separate component, and it is that component that I'm trying to use in a generic way from many pages in my project.

So in the case that you mention, where the is defined on the same page I'm using it, that works for me as it does for you.

Let me ask the question of the fundamental problem I'm trying to solve: Is there a way to define a dialog only once in my application (layout, css, buttons, etc) and then reuse that as needed from all other pages/components? All I'm trying to do is have a consistent pop up dialog for displaying messages to the user from any page/component in my application. It does not need to be implemented the way I'm trying to, I just need it to work.


VJ Vinitha Jeyakumar Syncfusion Team August 11, 2021 03:16 PM UTC

Hi Gabriel, 
 
 
Currently, we are validating your reported query. We will update you the further details on 12th August. 
 
We appreciate your patience until then 
 
Regards, 
Vinitha. 


VJ Vinitha Jeyakumar Syncfusion Team August 12, 2021 12:05 PM UTC

Hi Gabriel, 
 
 
We have further validated your query “Is there a way to define a dialog only once in my application (layout, css, buttons, etc) and then reuse that as needed from all other pages/components?” 
 
Your requirement can be achieved by defining the Dialog component inside a “CascadingValue” tag in the MainLayout file to access the Dialog anywhere in the pages or application. And you can reuse the dialog anywhere in the pages using the MainLayout object and CascadingParameter. Please check the below code for your reference, 
 
Code snippet: 
MainLayout.razor 
@using Syncfusion.Blazor.Popups 
<CascadingValue Value="@this"> 
    . . . 
      . . . 
        <SfDialog @ref="dlg" Width="50%" AllowDragging="true" IsModal="true" ShowCloseIcon="true" Visible="false"> 
            <DialogTemplates> 
                <Header>@title</Header> 
                <Content> 
                    @message 
                </Content> 
            </DialogTemplates> 
            <DialogButtons> 
                <DialogButton Content="Ok" IsPrimary="true" OnClick="@close"></DialogButton> 
            </DialogButtons> 
        </SfDialog> 
    </div> 
</CascadingValue> 
@code { 
    SfDialog dlg; 
    private string title { get; set; } 
    private string message { get; set; } 
    public async Task ShowDialog(string title, string message) 
    { 
        this.title = title; 
        this.message = message; 
        StateHasChanged(); 
        await this.dlg.ShowAsync(); 
    } 
    public async Task close() 
    { 
        await this.dlg.HideAsync(); 
    } 
} 
Index.razor: 
<div> 
    <p>Click the button to show the dialog</p> 
    <button class="e-btn" @onclick="@ClickHandler">Index Button</button> 
</div> 
 
@code{ 
    [CascadingParameter] 
    public MainLayout mainLayoutObj { get; set; } 
    private async Task ClickHandler() 
    { 
        await mainLayoutObj.ShowDialog("DialogHeader1", "Dialogcontent1"); 
    } 
} 
 
 
 
 
Please check the above code snippets, sample, and video for your reference and let us know if satisfies your requirement. 
 
Regards, 
Vinitha. 
 
 


GA Gabriel August 12, 2021 08:07 PM UTC

Hi Vinitha,

Thank you so much, that worked perfectly and elegantly!

I was missing the call to StateHasChanged() and also you showed me how to share components on all pages, thank you!


VJ Vinitha Jeyakumar Syncfusion Team August 13, 2021 05:01 AM UTC

Hi Gabriel, 
 
 
You are welcome. Please get back to us if you need any further assistance. 
 
Regards, 
Vinitha 


Loader.
Up arrow icon