We are currently working on a new Blazor Web app, and I'm in charge of porting a few JavaScript libraries that we are going to require. I have a port of gridstack.js working, but I'm not really that familiar with Blazor, and I'm wondering if there is a better way of doing certaing things.
I will be posting code snippets, but if someone wants to look at the whole thing, it is here.
I'm using JsInterop to bring all methods and events of the JavaScript component to Blazor. But certain methods and events return a DOM element (HTMLElement or something of the sort), and sending this from the Js to the Blazor gives me the following error:
//JavaScript code
await interopReference.invokeMethodAsync("AddedFired", items.map(i => { i.el.gridstackNode = undefined; i.el.ddElement = undefined; return i.el; }));
//C# Code
[JSInvokable]
public void AddedFired(ElementReference[] widgets)
{
Console.Write(widgets);
}
Uncaught (in promise) Error: System.Text.Json.JsonException: __internalId is required.
at Microsoft.AspNetCore.Components.ElementReferenceJsonConverter.Read(:7283/Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options)
at System.Text.Json.Serialization.JsonConverter`1.TryRead(:7283/Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, T& value)
at System.Text.Json.Serialization.JsonCollectionConverter`2.OnTryRead(:7283/Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, TCollection& value)
at System.Text.Json.Serialization.JsonConverter`1.TryRead(:7283/Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, T& value)
at System.Text.Json.Serialization.JsonConverter`1.ReadCore(:7283/Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
at System.Text.Json.Serialization.JsonConverter`1.ReadCoreAsObject(:7283/Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
at System.Text.Json.JsonSerializer.ReadCore[TValue](:7283/JsonConverter jsonConverter, Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
at System.Text.Json.JsonSerializer.Read[TValue](:7283/Utf8JsonReader& reader, JsonTypeInfo jsonTypeInfo)
at System.Text.Json.JsonSerializer.Deserialize(:7283/Utf8JsonReader& reader, Type returnType, JsonSerializerOptions options)
at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.ParseArguments(:7283/JSRuntime jsRuntime, String methodIdentifier, String arguments, Type[] parameterTypes)
at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.InvokeSynchronously(:7283/JSRuntime jsRuntime, DotNetInvocationInfo& callInfo, IDotNetObjectReference objectReference, String argsJson)
at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.BeginInvokeDotNet(:7283/JSRuntime jsRuntime, DotNetInvocationInfo invocationInfo, String argsJson)
at kt.endInvokeDotNetFromJS (blazor.server.js:1:3700)
at blazor.server.js:1:72054
at Array.forEach (<anonymous>)
at kt._invokeClientMethod (blazor.server.js:1:72040)
at kt._processIncomingData (blazor.server.js:1:70082)
at connection.onreceive (blazor.server.js:1:64485)
at o.onmessage (blazor.server.js:1:48819)
I tried with an array of IJSObjectReference instead of ElementReference, and I get a similar error
Uncaught (in promise) Error: System.Text.Json.JsonException: Required property __jsObjectId not found.
at Microsoft.JSInterop.Implementation.JSObjectReferenceJsonWorker.ReadJSObjectReferenceIdentifier(:7283/Utf8JsonReader& reader)
at Microsoft.JSInterop.Infrastructure.JSObjectReferenceJsonConverter.Read(:7283/Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options)
at System.Text.Json.Serialization.JsonConverter`1.TryRead(:7283/Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, T& value)
at System.Text.Json.Serialization.JsonCollectionConverter`2.OnTryRead(:7283/Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, TCollection& value)
at System.Text.Json.Serialization.JsonConverter`1.TryRead(:7283/Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options, ReadStack& state, T& value)
at System.Text.Json.Serialization.JsonConverter`1.ReadCore(:7283/Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
at System.Text.Json.Serialization.JsonConverter`1.ReadCoreAsObject(:7283/Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
at System.Text.Json.JsonSerializer.ReadCore[TValue](:7283/JsonConverter jsonConverter, Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
at System.Text.Json.JsonSerializer.Read[TValue](:7283/Utf8JsonReader& reader, JsonTypeInfo jsonTypeInfo)
at System.Text.Json.JsonSerializer.Deserialize(:7283/Utf8JsonReader& reader, Type returnType, JsonSerializerOptions options)
at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.ParseArguments(:7283/JSRuntime jsRuntime, String methodIdentifier, String arguments, Type[] parameterTypes)
at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.InvokeSynchronously(:7283/JSRuntime jsRuntime, DotNetInvocationInfo& callInfo, IDotNetObjectReference objectReference, String argsJson)
at Microsoft.JSInterop.Infrastructure.DotNetDispatcher.BeginInvokeDotNet(:7283/JSRuntime jsRuntime, DotNetInvocationInfo invocationInfo, String argsJson)
at kt.endInvokeDotNetFromJS (blazor.server.js:1:3700)
at blazor.server.js:1:72054
at Array.forEach (<anonymous>)
at kt._invokeClientMethod (blazor.server.js:1:72040)
at kt._processIncomingData (blazor.server.js:1:70082)
at connection.onreceive (blazor.server.js:1:64485)
at o.onmessage (blazor.server.js:1:48819)
As of right now I am sending ids and element querys back and forth, but I was wondering if there is a better way of doing this in blazor.
Thanks in advance!