好吧，我肯定我疯了，错过了一些简单的东西…
如果我有一个ElementReference对象在c#在Blazor WASM应用程序，我怎么能得到任何细节的html元素，它是相关联的?
我正在开发一个Blazor WASM应用程序，使用。net 6.0。
我正在使用一个组件库(SyncFusion)和一个组件，我需要确定哪个ListBox我放东西进去。
我所有的是一个Blazor ElementReference。
我如何从这个对象得到一个HTML元素?我非常乐意为此使用JSInterop，但由于ElementReference似乎没有任何与生成的HTML匹配的内容，因此它并不真正有用。
该组件渲染得很好，并渲染了一些东西，如:
<div id="listbox-a13426bc-6182-4b64-9c27-2fa57e97bcd2".....> </div>
在我从所讨论的组件中获得的事件中，我可以获得Target属性，这是BlazorElementReference。这有一个Id，它似乎是一些自动生成的int值，并且对于每个"列表框"都是唯一的。生成，但我不知道如何将其与引用的特定组件相匹配。
我必须能够计算出这是指两个listbox的右侧还是左侧。
我可以添加额外的属性或CSS类的问题，但这并不能帮助我，因为我不能弄清楚如何匹配ElementReference或其Id属性的任何东西，当这是所有我必须开始。我也可以将组件匹配到@ref="xxx"的属性引用，但我在那里有同样的问题。
组件是一个SfListBox，这个类似乎没有暴露任何方法来检索相关HTML的ElementReference，所以我也不能把它捡起来存储起来供以后比较。
ElementReference似乎没有一个明显的方法或属性来获得它生成的唯一GUID。
我已经搜索了几个小时，试图找到我想要的简单方法，但我找不到任何明显的方法来解决这个问题....
对，正如@fuzzybear所暗示的那样，显而易见的解决方案是直接通过JSInterop将ElementReference传递给JS函数，该函数将高兴地接受它作为HTMLElement
首先，定义一个JS函数，在index.html中有一个独特的命名空间。
这个函数可以检查Id或其他属性，当然，它只是JS的东西。在我的例子中，因为我可以快速地将CSS类添加到列表中(参见下一步)，所以我选择编写一个函数来检查元素
的CSS类中是否有特定的类。<script>
var MyUtils = MyUtils || {};
MyUtils.hasClass = function (element, className) {
return element.classList.contains(className);
};
</script>
- 注入IJSRuntime实例
- 在任何代码中，你有一个
ElementReference，然后你需要把它传递给你的JS函数(在我的情况下，它是一个DropEventHandler从我的SyncFusion组件)
我的示例代码现在看起来像这样:
@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}");
}
}