如何在MudBlazor模态框中渲染泛型RenderFragment

问题根源 #

你直接在模态框中使用@Content时，实际上是调用了RenderFragment<TItem>的ToString()方法，所以只会输出类名。RenderFragment<TItem>是一个需要接收TItem实例才能生成HTML的委托，必须通过Invoke方法传入实例才能正确渲染内容。

修正后的模态框组件（DetallesEventoModal.razor） #

把模态框改成泛型组件，确保能适配任意TItem类型，同时正确调用Content委托：

<MudDialog>
    <DialogContent>
        @* 传入CurrentItem实例触发RenderFragment渲染 *@
        @Content?.Invoke(CurrentItem)
    </DialogContent>
    <DialogActions>
        <MudButton OnClick="Cancel">Cancelar</MudButton>
        <MudButton OnClick="Confirm">Confirmar</MudButton>
    </DialogActions>
</MudDialog>

@code {
    [CascadingParameter] MudDialogInstance MudDialog { get; set; }
    [Parameter, Required] public RenderFragment<TItem> Content { get; set; }
    [Parameter, Required] public TItem CurrentItem { get; set; }

    void Cancel() => MudDialog.Cancel();
    void Confirm() => MudDialog.Close(DialogResult.Ok(true));
}

调用模态框的页面代码 #

在触发按钮中，传递对应的TItem实例和绑定了该实例的RenderFragment<TItem>：

<MudButton OnClick="OpenCustomModal">Abrir Modal Contenido Personalizado</MudButton>

@code {
    [Inject] IDialogService DialogService { get; set; }

    private async Task OpenCustomModal()
    {
        // 1. 创建要传递的自定义内容实例
        var customContent = new MyNewFragment 
        { 
            EventTitle = "Conferencia Blazor 2024",
            EventDate = DateTime.Now.AddDays(10),
            Location = "Ciudad de México"
        };

        // 2. 定义RenderFragment<MyNewFragment>，绑定实例的属性
        var contentFragment = (RenderFragment<MyNewFragment>)(item => __builder =>
        {
            <div class="mud-pa-4">
                <MudTypography Variant="h6">@item.EventTitle</MudTypography>
                <MudDivider Class="my-2" />
                <MudText>Fecha: @item.EventDate.ToString("dd/MM/yyyy")</MudText>
                <MudText>Ubicación: @item.Location</MudText>
                <MudTextField Label="Comentarios" @bind-Value="item.Comments" Multiline="true" Rows="3" Class="mt-3" />
            </div>
        });

        // 3. 组装模态框参数
        var parameters = new DialogParameters
        {
            { nameof(DetallesEventoModal<MyNewFragment>.Content), contentFragment },
            { nameof(DetallesEventoModal<MyNewFragment>.CurrentItem), customContent }
        };

        // 4. 打开模态框
        var dialog = DialogService.Show<DetallesEventoModal<MyNewFragment>>("Detalles del Evento", parameters);
        var result = await dialog.Result;

        if (!result.Cancelled)
        {
            // 处理确认后的逻辑，比如保存customContent的修改
            Console.WriteLine($"Comentarios guardados: {customContent.Comments}");
        }
    }

    // 自定义内容类示例
    public class MyNewFragment
    {
        public string EventTitle { get; set; }
        public DateTime EventDate { get; set; }
        public string Location { get; set; }
        public string Comments { get; set; }
    }
}

关键要点 #

• 模态框做成泛型组件DetallesEventoModal<TItem>，无需修改模态框核心代码即可适配任意内容类型
• 必须通过Content.Invoke(CurrentItem)触发HTML渲染，不能直接输出@Content
• 调用时要传递对应的TItem实例，确保RenderFragment能绑定到实例的属性

内容的提问来源于stack exchange，提问作者Mauro Alvarez