CODEWITHSUNDEEP
javascript.netjsoninteropblazor
Franco Tiveron
Franco Tiveron

Reputation: 2896

Blazor javascript interop - object conversion from js to .NET

I am using Blazor javascript interop (js call to .NET), as in

//js
dotNetObjRef.invokeMethodAsync("DotNetMethod", jsObject);
---------------------------------------------------------
//C#
[JSInvokable]
public void DotNetMethod(object jsObject)
{
    Console.WriteLine($"jsObject type is {jsObject.GetType()}");
}

in the browser console, I get:

'jsObject type is SimpleJson.JsonObject'

Now I would like to cast jsObject to a concrete SimpleJson.JsonObject, as in

[JSInvokable]
public void DotNetMethod(object jsObject)
{
    JsonObject jsObject = (JsonObject)jsObject; //error
}

but all my trials using C# community implementations of SimpleJson (like https://github.com/facebook-csharp-sdk/simple-json) fail complaining that the cast is not valid.

As a workaround I go through strings:

//js
dotNetObjRef.invokeMethodAsync("DotNetMethod", JSON.stringify(jsObject));
.
//C#
[JSInvokable]
public void DotNetMethod(string jsObjectJSON)
{
    JsonObject jsObject = SimpleJson.DeserializeObject<JsonObject>(jsObjectJSON);
}

Does anyone know whether it is possible (and how) to use the received jsObject directly, i.e. avoiding the serialization/deserialization (and without reflection)?

Upvotes: 6

Views: 4508

Answers (1)

Sandro Martinez
Sandro Martinez

Reputation: 86

Instead of directly receiving a JSON, why not receive a previously defined object?

let x = {
    "data": "test",
    "moreData": "another test"
}

dotnetHelper.invokeMethodAsync('selectionChanged', x);

And then

//C#
public class InteropHelper
{
    public event Action OnSelectionChanged;

    [JSInvokable]
    public void selectionChanged(TestItem data)
    {
        OnSelectionChanged?.Invoke();
    }

    class TestItem
    {
        public string data { get; set; }
        public string moreData { get; set; }
    }
}

Blazor would automatically know which fields from the JSON go with which fields from TestItem.

Upvotes: 7

Related Questions