Blazor WASM中如何通过ElementReference获取关联HTML元素

核心思路 #

利用JSInterop遍历DOM树，从拖放事件返回的ElementReference向上查找带有自定义标识的父容器（即SfListBox的根DOM元素），以此区分左右两个ListBox。

具体实现步骤 #

1. 给ListBox添加自定义标识属性
   通过SfListBox的HtmlAttributes参数，为每个ListBox的根DOM元素添加唯一标识的自定义属性：

<SfListBox TValue="string" 
           DataSource="@LeftDataSource" 
           AllowDragAndDrop="true"
           HtmlAttributes="@(new Dictionary<string, object> { { "data-listbox-key", "left-list" } })">
    <!-- 你的ListBox配置项 -->
</SfListBox>

<SfListBox TValue="string" 
           DataSource="@RightDataSource" 
           AllowDragAndDrop="true"
           HtmlAttributes="@(new Dictionary<string, object> { { "data-listbox-key", "right-list" } })">
    <!-- 你的ListBox配置项 -->
</SfListBox>

2. 编写JSInterop方法
   在wwwroot的JS文件（比如site.js）中添加以下方法，用于从目标元素向上查找带自定义标识的ListBox根元素：

window.getListBoxIdentifier = (element) => {
    let current = element;
    // 向上遍历DOM，直到找到带有data-listbox-key属性的元素
    while (current && !current.dataset.listboxKey) {
        current = current.parentElement;
    }
    // 返回标识值，找不到则返回null
    return current ? current.dataset.listboxKey : null;
};

3. 在Blazor中调用JS方法识别目标ListBox
   注入IJSRuntime，在拖放事件处理方法中调用上述JS方法：

@inject IJSRuntime JSRuntime

// 拖放事件处理逻辑
private async Task HandleDrop(DropEventArgs args)
{
    var listBoxKey = await JSRuntime.InvokeAsync<string>("getListBoxIdentifier", args.Target);
    
    switch(listBoxKey)
    {
        case "left-list":
            // 处理拖入左侧ListBox的逻辑
            break;
        case "right-list":
            // 处理拖入右侧ListBox的逻辑
            break;
        default:
            // 异常处理
            break;
    }
}

补充说明 #

• 直接给组件标签加属性无效，是因为Blazor组件的自定义属性不会直接渲染到DOM根元素，必须通过组件提供的HtmlAttributes参数传递，SyncFusion组件均支持该参数。
• JS方法中也可以通过SyncFusion ListBox的默认类名e-listbox辅助定位，比如在循环中增加current.classList.contains('e-listbox')判断，加速查找进程。

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