Mdi Container Component

Description

This component represents an MDI (Multiple Document Interface) container in Blazor. It dynamically renders a collection of child forms (Gap.Blazor.Form) using Blazor’s DynamicComponent, allowing multiple forms to be displayed and managed within a single parent container.

Usage

@namespace Gap.Blazor.Components
@using Gap.Blazor

<div style="position: relative; width: 100%; height: 100%;" id="mdi-container">
    @if (MdiChildren != null)
    {
        foreach (var MdiChild in MdiChildren)
        {
            var formArgs = new Dictionary<string, object>();
            formArgs.Add("model", MdiChild);
            <DynamicComponent @key="MdiChild" Type="@MdiChild.View" Parameters="@formArgs"></DynamicComponent>
        }
    }
</div>

Properties

• MdiChildren: A list of Gap.Blazor.Form instances representing the child forms to be rendered within the MDI container.

Dynamic Rendering

• DynamicComponent: Used to render each child form dynamically based on its View type.

• @key Directive: Ensures proper rendering and diffing of each child form.

• Container Styling: The outer <div> uses position: relative and full width/height to serve as a layout surface for child forms.

Behavior

• Each child form is rendered with its own model passed via the Parameters dictionary.

• The component supports any number of child forms and updates automatically when MdiChildren changes.