如何從 blazor ElementReference 獲取 HTML 元素

Question

好吧，我敢肯定我要瘋了，在這里遺漏了一些簡單的東西……

如果我在 Blazor WASM 應用程序中的 c# 中有一個ElementReference object，我如何才能獲得有關它關聯的 html 元素的任何詳細信息？

我正在使用 .Net 6.0 開發 Blazor WASM 應用程序。

我正在使用一個組件庫 (SyncFusion)，並且我需要使用其中一個組件來確定要將某些內容放入哪個 ListBox。

我只有一個 Blazor ElementReference。

我如何從這個 object 中得到一個 HTML 元素？ 我非常樂意為此使用 JSInterop，但由於 ElementReference 似乎沒有任何與生成的 HTML 匹配的內容，因此它並不是很有用。

該組件渲染良好，並渲染了一些內容，例如：

<div id="listbox-a13426bc-6182-4b64-9c27-2fa57e97bcd2".....> </div>

在我從有問題的組件獲得的事件中，我可以獲得一個Target屬性，它是一個 Blazor ElementReference 。 這有一個Id ，它似乎是一些自動生成的 int 值，並且對於生成的每個“列表框”都是唯一的，但我無法弄清楚如何將它與被引用的特定組件相匹配。

我必須能夠弄清楚這是指兩個列表框的右側還是左側。

我可以向有問題的控件添加其他屬性或 CSS 類，但這對我沒有幫助，因為我無法弄清楚如何將ElementReference或其Id屬性與任何東西匹配，而這就是我必須開始的。 我也可以將組件匹配到帶有@ref="xxx"的屬性引用，但我在那里遇到了同樣的問題。

該組件是一個SfListBox ，並且 class 似乎也沒有公開任何方法來檢索關聯的 HTML 的 ElementReference，因此我也無法將其提取並存儲以供以后比較。

ElementReference 似乎沒有明顯的方法或屬性來獲取它生成的唯一 GUID。

我已經搜索了幾個小時，試圖找到我想要的簡單方法，但我找不到任何明顯的方法來解決這個問題......

Answer 1

是的，正如@fuzzybear 所暗示的，顯而易見的解決方案就是通過 JSInterop 將ElementReference直接傳遞給 JS function，它會很樂意將其作為HTMLElement接受

首先，在 index.html 中一個漂亮的唯一命名空間中定義一個 JS function。

這個 function 當然可以查 Id 或其他屬性，它只是 JS 的東西。 在我的例子中，因為我可以快速將 CSS 類添加到列表中（請參閱下一步）我選擇編寫一個 function 來檢查特定的 class 是否在該元素的 css 類中

<script>
        var MyUtils = MyUtils || {};
        MyUtils.hasClass = function (element, className) {
            return element.classList.contains(className);
        };
</script>

接下來，在 blazor 組件中......

1. 注入一個 IJSRuntime 實例
2. 在您擁有ElementReference的任何代碼中，您只需將其傳遞給您的 JS function（在我的例子中，它是來自我的 SyncFusion 組件的 DropEventHandler）

所以我的示例代碼現在看起來像這樣：

@inject IJSRuntime JS;

...(snip a bunch of other stuff)

<SfListBox
    DataSource="@ItemList"
    CssClass="left-box"
    Scope="@Scope"
    ... (snip more properties etc)
>
    <ListBoxEvents
        TValue="TValue"
        TItem="TItem"
        OnDrop="SelectListDrop"
    ></ListBoxEvents>
</SfListBox>


@code{
    ...(snip other code)
    
    async Task SelectListDrop(DropEventArgs<TItem> args)
    {      
        //Here I can get an ElementReference from the passed-in args object
        //Via the 'Target' property, so I pass this to my JS
        //function via InvokeAsync.
        var isLeft = await JS.InvokeAsync<bool>(
            "MyUtils.hasClass", 
            new object[] { args.Target, "left-box" });
​
        var targetBoxDesc = isLeft ? "left-box" : "right-box";
        Console.WriteLine($"Target is {targetBoxDesc}");
    }
}