Blazor：仅在可见时呈现内容

Question

我有一个 blazor 页面，其中包含来自 Syncfusion 的以下（简化）组件，单击按钮时显示模态表单：

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

}

此表单包含复杂的内容，需要一些时间才能呈现。大多数时候不需要此表单，因此不需要呈现其内容。

如何只在打开表单时渲染表单内容？

我读过有关虚拟化的内容，但它似乎只与大型集合（lists/grids 有数百个项目）有关，与部分代码无关。

我正在寻找未绑定到 Syncfusion 组件的通用 blazor 模式，但如果不存在，一个 Syncfusion 对话框特定解决方案就足够了。

谢谢！

Answer 1

这是如何工作的？

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

Answer 2

我们已经验证了您报告的查询，我们可以在需要时使用条件呈现来呈现对话框内容。

我们创建了一个示例供您参考。在此示例中，我们使用条件渲染来渲染内容并检查 Visible 属性值以检查对话框是否打开。

因此对话框内容仅在对话框打开时呈现。

代码片段：

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

样本：https://www.syncfusion.com/downloads/support/directtrac/338757/ze/Dialog_App-1140947262

Blazor：仅在可见时呈现内容

Blazor: render content only when visible

syncfusion

blazor

blazor-webassembly