Blazor技术问题：如何在MarkupString中启用点击事件

问题原因 #

MarkupString仅负责直接渲染原始HTML内容，Blazor的编译系统不会解析其中的@onclick这类Blazor专属指令——这些指令是在组件编译阶段就完成绑定的，动态拼接的字符串里的@onclick只会被当成普通HTML属性，自然触发不了你的C#方法。

推荐解决方案：用Blazor原生循环渲染（不拼接HTML） #

这是最符合Blazor组件模型的做法，直接在Razor代码里用foreach循环渲染元素，Blazor会自动处理事件绑定：

@foreach (var term in 你的数据集合)
{
    // 替换成你生成date的实际逻辑
    var date = DateTime.Now.ToString("yyyy-MM-dd");
    <div style='padding: 5px;' @onclick="() => TerminClick(term.Sinr)">@date</div>
}

@code {
    // 替换成你的实际数据类型和集合
    private List<你的数据类> 你的数据集合 { get; set; } = new();

    public void TerminClick(int id)
    {
        logger.LogWarning($"Termin: {id}");
    }
}

特殊场景：必须动态拼接HTML时的处理 #

如果因为业务需求（比如从后端获取带复杂格式的HTML字符串）必须用MarkupString，可以通过JavaScript互操作实现点击事件：

1. 修改HTML拼接逻辑：给元素加唯一标识的自定义属性，把参数存在这个属性里：

html += $"<div style='padding: 5px;' data-termin-id='{term.Sinr}'>{date}</div>";
_terminContent = new MarkupString(html);

2. Razor组件代码：注入IJSRuntime，在渲染完成后用JS绑定点击事件，并通过DotNet对象引用调用C#方法：

@inject IJSRuntime JSRuntime

<div @ref="TerminContainer">@_terminContent</div>

@code {
    private MarkupString _terminContent;
    private ElementReference TerminContainer;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            await JSRuntime.InvokeVoidAsync("bindTerminClicks", TerminContainer, DotNetObjectReference.Create(this));
        }
    }

    [JSInvokable]
    public void TerminClick(int id)
    {
        logger.LogWarning($"Termin: {id}");
    }
}

3. 添加JavaScript脚本：在wwwroot/js目录下创建脚本文件（比如termin.js），然后在_Host.cshtml或index.html中引入：

function bindTerminClicks(container, dotNetRef) {
    const elements = container.querySelectorAll('[data-termin-id]');
    elements.forEach(el => {
        el.addEventListener('click', () => {
            const id = parseInt(el.getAttribute('data-termin-id'));
            dotNetRef.invokeMethodAsync('TerminClick', id);
        });
    });
}

内容的提问来源于stack exchange，提问作者Frank Mehlhop