Passing C# objects with Blazor JS interop

[pm100]

if I have

public class Foo{
public String Name
...
}

explain how to pass an instance of this to JS interop

• pure fields do not work (they need settgers and getters)
• the member names are changed to match JS naming conventions ie Name => name etc. (a big surprise)

---

Document Details

⚠ Do not edit this section. It is required for docs.microsoft.com ➟ GitHub issue linking.

• ID: 2b7ea38a-649b-303d-bebf-c701e216ba25
• Version Independent ID: 9e197a8b-2616-8363-0a15-38cac802e82e
• Content: Call JavaScript functions from .NET methods in ASP.NET Core Blazor
• Content Source: aspnetcore/blazor/javascript-interoperability/call-javascript-from-dotnet.md
• Product: aspnet-core
• Technology: aspnetcore-blazor
• GitHub Login: @guardrex
• Microsoft Alias: riande

[guardrex]

Hello @pm100 ... These are JSON-serializable Object[]s (.NET side) arguments. Therefore, I don't think it should be a surprise that serialization affects the name casing. Anyway ... on the broader point: They're being passed back and forth between what are essentially two runtimes. There will be limitations ... and probably some gotchas 😈, too 😄.

Yes! I think guidance should be added. I'll confer with the product unit on what to cover and where. I'll have to consider further 🤔 if an Overview topic section can cover both topics of the node or if each of the two topics should have a dedicated section. Thanks for the feedback.

I'll get to this as soon as I can, but there could be a delay of several weeks. We have some priority work going on in the near-term that takes precedence at the moment. Don't worry tho ... this won't get lost. It's on the tracking project for Blazor docs.

[pm100]

[EDIT by guardrex to remove the email content] Well it depends on whose serializer you are using. JSON.Net , the standard c# community serializer for the last 10 years, does not change names. So it surprised me. At least include an example

[guardrex]

Yeah ... we can do better than that. I think this needs proper guidance and at least one example both ways, especially including any PU feedback for devs getting tripped up in known 😈 that aren't supported.

I'll get on this as soon as I can. It just might take several weeks to reach it.

If you need product support in the meantime, you can hit up the community at the usual spots ...

• Stack Overflow (tag: blazor)
• ASP.NET Core Slack Team
• Blazor Gitter

If you hit what looks like a bonafide bug/strange behavior or wish to ask the product unit a direct question, open an issue on their repo at ...

https://github.com/dotnet/aspnetcore/issues

Before asking tho, search all of the Blazor issues (area-blazor label), both open and closed. You might not be the first one with questions/concerns about it. They may even have an issue about improving aspects of the serialization. If you find some issues there potentially relevant to doc updates, you can cross-link them in a comment here. However, I will perform such a search before I even speak with them about this. You don't really need to go to any trouble on it.

If you open an issue on their repo, please include a ...

cc: @guardrex https://github.com/dotnet/AspNetCore.Docs/issues/24646

... at the bottom of your opening comment so that I can follow along and have it cross-linked to this for reference material.

[guardrex]

I'll be collecting some research notes, including general points/discussion not directly related to this issue's ask ...

• It uses System.Text.Json, which I don't think we say/cross-link (yet).

• stay away from marshalling large and complex objects back and forth ... If you insist on going this route, you can serialize your payload as a byte array (UInt8Array) and use that when performing the interop call, we'll marshal it efficiently and you'll get full control over the serialization and deserialization process.

  SEE 👉 Blazor JS interop: Provide a way to better control the JSON.stringify() process  aspnetcore#37312

• DateOnly/TimeOnly require wrapping.

  SEE 👉

  • DateOnly passing to JSRuntime no longer supported in Blazor 6.0.0-rc.1 aspnetcore#36631
  • Support DateOnly and TimeOnly in JsonSerializer runtime#53539

• you can have an IJSObjectReference nested arbitrarily in your object graph, but you need your JS-side code to declare it

  SEE 👉 Deserializing an object with an IJSObjectReference property crash aspnetcore#29981

• @pm100 ... I think this point answers one of your questions ...

  The objects are being deserialized as JsonElement instances under the hood, so the behavior you see is by design. JsonElement is a C# representation of the json payload you sent and that has mixed casing.

  SEE 👉 Interop and object properties, initial letter casing, bug or by design? aspnetcore#18298

• When serializing, with JS Interop, an object of a type which contains a property of an interface type, the resulting JSON for that property will contain only the properties defined on the interface, and not the ones defined on the actual implementing type.

  Looks resolved as of 6.0.

  SEE 👉 Blazor - When serializing an interface member with JS Interop, actual derived type's members are not serialized aspnetcore#13474

• support for customing serialization options per JS invocation

  SEE 👉

  • Customize serialization for IJSRuntime.InvokeAsync aspnetcore#12685
  • Customize serialization for IJSRuntime.InvokeAsync aspnetcore#11954

• When you do JS interop and pass JSON-serializable data, we JSON-serialize the data before it goes to {THING X}. As such, {THING X} only sees a string, not your original .NET object.

  SEE 👉 Sending objects with only private setters should give a warning aspnetcore#15644