Net MAUI Blazor RenderFragment渲染DOM异常问题求助

问题分析 #

你的代码核心问题是在RenderFragment的委托方法里错误混用了Razor模板语法（比如@if、直接写<div>标签）和字符串拼接。Blazor的RenderFragment需要通过__builder对象的API（如OpenElement、CloseElement等）构建DOM，直接在委托内写Razor语法会被编译器当成纯文本处理；同时字符串拼接生成的MarkupString会丢失Blazor的组件事件绑定能力。

正确实现方式 #

不需要用字符串拼接，直接通过RenderFragment的构建逻辑，先将_UserPrograms按每2个元素分组，再遍历每组渲染对应的row和col-6元素，既能保留事件绑定，又能生成预期的DOM结构：

方式一：使用__builder API构建 #

private RenderFragment userProgram => (__builder) =>
{
    // 将数据按每2个一组拆分
    var groupedPrograms = _UserPrograms.Chunk(2);
    
    foreach (var group in groupedPrograms)
    {
        // 打开row标签
        __builder.OpenElement(0, "div");
        __builder.AddAttribute(1, "class", "row mt-3");
        __builder.AddContent(2, () =>
        {
            foreach (var value in group)
            {
                // 打开col-6标签
                __builder.OpenElement(3, "div");
                __builder.AddAttribute(4, "class", "col-6");
                __builder.AddAttribute(5, "onclick", EventCallback.Factory.Create(this, () => runUserProgram("test")));
                // 添加内容，可替换为实际需要展示的value属性
                __builder.AddContent(6, "Test");
                // 关闭col-6标签
                __builder.CloseElement();
            }
        });
        // 关闭row标签
        __builder.CloseElement();
    }
};

方式二：简洁的Razor模板写法 #

如果是在组件内定义RenderFragment，可以直接用Razor模板语法，更易读：

@code {
    private RenderFragment userProgram => @<text>
        @foreach (var group in _UserPrograms.Chunk(2))
        {
            <div class="row mt-3">
                @foreach (var value in group)
                {
                    <div @onclick="() => runUserProgram("test")" class="col-6">Test</div>
                }
            </div>
        }
    </text>;
}

原代码失效原因 #

1. RenderFragment委托语法错误：RenderFragment的(__builder) => { ... }是C#委托，内部不能直接写@if、<div>这类Razor语法，编译器无法识别，会将这些内容当作纯文本输出。
2. MarkupString丢失事件绑定：用字符串拼接生成的HTML通过MarkupString渲染时，Blazor不会处理其中的事件绑定（如@onclick），因为这类字符串不会经过Blazor的组件渲染管道，仅作为纯HTML文本输出。

内容的提问来源于stack exchange，提问作者Александр Мун