如何将 DotNetObjectReference 传递给 JS DOM 事件

Question

我正在尝试在 Blazor 中使用 JS 拖放，这通常可以正常工作，但我想在 ondragstart 事件期间设置自定义拖动图像。一般来说，我的代码如下所示：

<div class="some-draggable-container"
     draggable="true"
     ondragstart="Element.dragStartHandler(event, '@(ImageSrcBase64)')" >
</div>

Element.dragStartHandler = function(event, imgSrcBase64) {
    var img = new Image();
    img.src = imgSrcBase64;
    event.dataTransfer.setDragImage(img, 0, 0);
}

我遇到的问题是我需要在设置拖动图像后调用 .Net 函数，但我找不到将所需的DotNetObjectReference 传递给 JS 部分的方法。

简单地将新创建的 objectRef 传递给 JS 事件调用会导致 Unexpected end of input 错误。

ondragstart="Element.dragStartHandler(event, '@(ImageSrcBase64)', @(DotNetObjectReference.Create(this)))"

同样使用JsonSerializer 并不能解决问题。它确实会序列化对象并且 JS 能够反序列化它，但正如预期的那样，DotNet.invokeMethod() 方法不存在。

ondragstart="Element.dragStartHandler(event, '@(ImageSrcBase64)', @(JsonSerializer.Serialize(DotNetObjectReference.Create(this))))"

使用 Blazor 事件并在 .Net 中完全处理它不提供设置拖动图像的能力，因为传递的 DragEventArgs 不完全符合 JS 的。

通过IJSRuntime将事件参数传递给JS函数会导致错误，因为它与原生JS事件不同，所以至少缺少setDragImage()方法。

有什么办法可以使这个工作吗？我不想玩弄 JS-to-static-.Net 调用和 guid 或那种解决方法。

---

编辑
正如@MisterMagoo 在现已删除的评论中提到的那样：在OnAfterRender 的第一个周期中将DotNetObjectReference 传递给JS 部分以及静态guid 并在需要时稍后引用它是一种足够的方式。

问题在于，在我的情况下，列表很容易达到约 50-100 个条目长，我不知道这会如何影响内存的性能。所以在小情况下这会很好，但在我的情况下可能不是。

---

编辑
所以首先要澄清我选择解决这个问题的方式的原因：我知道我可以通过简单地创建一个跟随光标的图像来纯粹在 Blazor 中解决这个问题。但是通过 JS 已经存在一种设置拖动图像的方法，该方法由浏览器本身在图像定位和移动方面进行处理。所以我想走性能效率最高的路线，而不是充分利用 Blazor，因为我们的应用程序的性能窗口很窄。

Answer 1

这只是我从内存中写在记事本中的错误伪代码，并且代码确实指向循环，但它应该让您了解如何调用 javascript，然后将数据发送回 c#

在 js 文件中：

window.myBlazor = {
    doSomething: function(cSharpObjectReference, val1, val2) {
    // some js stuff happens
    cSharpObjectReference.Notify(someData);
}

在cs文件中：

public static class MyInterops
{
private static readonly string _BaseObjectContainer = "myBlazor";
        public static async Task DoSomethingCs(IJSRuntime jsRuntime, ObjectJavaScriptShouldUse cSharp, MyModel model)
        {
            await jsRuntime.InvokeVoidAsync($"{_BaseObjectContainer}.doSomething", DotNetObjectReference.Create(cSharp), model.Val1, model.Val2);
        }
}


public class ObjectJavaScriptShouldUse 
{
    private readonly IJSRuntime _jsRuntime;
    [JSInvokable]
    public async ValueTask Notify(MouseEvent eventArgs)
    {
       await MyInterops.DoSomethingCs(_jsRuntime, this, eventArgs); //i accidentally pointed these calls in recursion, but you get the idea
    }
}