如何在Blazor的MarkupString中绑定事件？

直接在MarkupString中写@onclick是无效的，因为MarkupString仅负责输出静态HTML内容，Blazor的组件指令（如@onclick）是编译阶段处理的逻辑，运行时不会解析HTML字符串中的这类指令。以下是两种可行的解决思路：

方法一：使用RenderFragment动态渲染（推荐） #

放弃MarkupString，改用Blazor原生的RenderFragment动态生成元素，这样可以正常绑定组件事件，符合Blazor的组件模型：

@if (_items.Count > 0)
{
    <ul>
        @foreach (var item in _items)
        {
            <li class="li-a" @onclick="() => ClickText(item)">@item.Text</li>
        }
    </ul>
}

@code {
    private List<Item> _items = new()
    {
        new Item { Text = "A" },
        new Item { Text = "B" }
    };

    private void ClickText(Item clickedItem)
    {
        // 这里处理点击逻辑，比如获取点击的项内容
        Console.WriteLine($"点击了：{clickedItem.Text}");
    }

    public class Item
    {
        public string Text { get; set; }
    }
}

方法二：通过JavaScript绑定事件并调用Blazor方法 #

如果必须使用HTML字符串（比如内容来自外部动态数据源），可以通过JavaScript绑定点击事件，再通过JS互操作调用Blazor的.NET方法：

1. 组件代码 #

@inject IJSRuntime JSRuntime

@if (!string.IsNullOrEmpty(_markup))
{
    @((MarkupString)_markup)
}

@code {
    private string _markup = "<ul><li class='li-a clickable-item'>A</li><li class='li-a clickable-item'>B</li></ul>";

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            // 组件首次渲染后，调用JS绑定事件
            await JSRuntime.InvokeVoidAsync("bindItemClicks", DotNetObjectReference.Create(this));
        }
    }

    [JSInvokable] // 标记该方法可被JS调用
    public void ClickText(string itemText)
    {
        // 处理点击逻辑
        Console.WriteLine($"点击了：{itemText}");
    }
}

2. JavaScript代码（放在wwwroot下的site.js中） #

function bindItemClicks(componentRef) {
    // 获取所有需要绑定点击事件的元素
    const items = document.querySelectorAll('.clickable-item');
    items.forEach(item => {
        item.addEventListener('click', () => {
            // 调用Blazor组件的.NET方法，并传递点击元素的文本
            componentRef.invokeMethodAsync('ClickText', item.textContent.trim());
        });
    });
}

内容的提问来源于stack exchange，提问作者Park Jey