Blazor: render content only when visible

Question

I have a blazor page with the folowing (simplified) component from Syncfusion that shows a modal form when a button is clicked:

<SfDialog IsModal="true" @bind-Visible="@IsFormVisible">
    <DialogTemplates>
        <Header>My Form</Header>
        <Content>
           <!-- complex and heavy content here -->
        </Content>
    </DialogTemplates>
</SfDialog>

<button @onclick="ShowDialog">Open Dialog</button>

@code {

    private void ShowDialog()
    {
         // How can I render form content here?
         @IsFormVisible = true;
    }

}

This form contains complex content that takes some time to render. Most of the time this form is not needed so rendering its content is not necessary.

How can I render form content only when the form is opened?

I've read about virtualization but it seems related only to large collections (lists/grids with hundreds of items), not to parts of code.

I'm looking for a generic blazor pattern not bound to Syncfusion components, but if this does not exist a Syncfusion dialog specific solution would be enough.

Thank you!

This is a fundamental Blazor question. You should use conditional logic to decide when to show a component or element. — Bennyboy1973, Aug 16 '21 at 13:30

score 3 · Accepted Answer · answered Aug 06 '21 at 09:48

3

How does this work?

<Content>
    @if(IsFormVisible)
    {        
       <!-- complex and heavy content here -->        
    }
</Content>

answered Aug 06 '21 at 09:48

H H

263,252
30
330
514

Henk, is that a pseudo-flag, or is a thing? – Bennyboy1973 Aug 06 '21 at 09:53
I think it's a real part of that DialogTemplates (plural?), I don't know syncfusion. But the @if should work either way. – H H Aug 06 '21 at 09:58
@HenkHolterman It works! I definitely have to come to a new way of thinking (I come from desktop development). Bennyboy1973: is the actual SfDialog component tag where form content must be placed. – Disti Aug 06 '21 at 16:15
@Disti - yes, it helps to have a mental picture of how Blazor works (shadow dom + diffing engine). – H H Aug 06 '21 at 19:17

score 1 · Answer 2 · edited Sep 29 '21 at 21:38

We have validated your reported query and we can render the dialog content when needed by using conditional rendering.

We have created a sample for your reference. In this sample, we have rendered content using conditional rendering and checked the Visible property value to check whether the dialog is opened or not.

So the dialog contents are only rendered when the dialog is opened.

Code snippets:

    <SfDialog @ref="@DialogObj" Width="50%" ShowCloseIcon="true" IsModal="true" @bind-Visible="@IsVisible">
    <DialogTemplates>
        <Content>
            @if (IsVisible)
            {
                <SfButton>Click</SfButton>
            }
        </Content>
    </DialogTemplates>
</SfDialog>
@code {

    SfDialog DialogObj;
    private bool IsVisible { get; set; } = false;

    private void OpenDialog()
    {
        this.IsVisible = true;
    }

    private void CloseDialog()
    {
        this.IsVisible = false;
    }
}

Sample: https://www.syncfusion.com/downloads/support/directtrac/338757/ze/Dialog_App-1140947262

Blazor: render content only when visible

2 Answers2