1. Home
  2. Forum
  3. Blazor
  4. Load dialog from a partial view

Load dialog from a partial view

Dear support team,

I am starting in Blazor Server and I have a complex view with lots of dialogs to input data, these dialogs are loaded within the page and obviously affects performance, so I wonder if it is possible to manage dialogs' content as razor does with partial views.

is it possible?

Thanks in advance.


3 Replies 1 reply marked as answer
VJ Vinitha Jeyakumar Syncfusion Team July 29, 2022 07:54 AM UTC

Hi George,


We suspect that you are expecting for a reusable dialog component within an application. So, we have created a sample for your reference by using a Dialog service,

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,
If we misunderstood your requirement, can you please provide us with your exact requirement to further validate on our end.


Regards,
Vinitha

Marked as answer
GW George Waters July 29, 2022 05:53 PM UTC

What a complete guide!

Thank you so much, Vinitha :)


VJ Vinitha Jeyakumar Syncfusion Team August 1, 2022 05:20 AM UTC

Hi George,


We are glad to assist you.

Regards,
Vinitha

Loader.
Up arrow icon