Description

Proposal and offer to produce a PR to include additional examples of using JSImport/JSExport.

1. Optionally, I would propose creating a new article focused on .NET/JS Interop.

   • Move the type mapping matrix to this new article
   • The idea being to factor out any information common between JavaScript JSImport/JSExport interop with ASP.NET Core Blazor and Run .NET from JavaScript
   • As this new article potentially grows, it will serve to document JS interop based on System.Runtime.InteropServices.JavaScript that is agnostic of whether it is Blazor or non-Blazor. Currently the Blazor specific pages are the only thing I get when googling "JS interop JSImport". This can be improved by providing a generic document for JS interop.
   • The two technology specific articles would still cover setup, and keep some of their specialized minimal examples because they do a good job of tieing it all together and showing how the interop code fits into the application, such as the Blazor specific article's examples showing JSImport used inside a *.razor.cs page.

2. Regardless of the above decision point, my primary ask is to add additional concrete usage examples of JSImport:

• Use of JSObject
  • Demonstrate calling a JS method to retrieve a JSObject reference, then calling another JSImport'd method and passing it.
  • Demonstrate calling a JS instance method by passing the JSObject to a static method that in turn calls the instance method on the object.
  • Accessing properties via the JSObject.GetPropertyAs* methods
• Returning a Promise mapped to a Task, and awaiting it from C#
• Subscribing to a click event to demonstrate passing a .NET Action<> listener to a JSImport'd method doing .bind/.addEventListener, and handling callbacks from JS to .NET.
  • Unsubscribing to an event, which highlights an important note about how passing the same .NET action produces different wrappers which will cause problems with methods like unsubscribe that depend on reference equality(the subscribe method needs to return a ref to the JSObject wrapping the Action for the later unsubscribe call to see it as the same event handler)

I would consider proposing some more advanced scenarios and possible troubleshooting section to address pitfalls for those new to JS interop, but there'd probably be some debate about some of those items so I'd defer to a future PR for the sake of getting agreement on the core ask here. Also I didn't cover anything JSExport related. Point being, I think there's room for it to grow.

Let me know a decision point on 1) and thoughts on 2), and I'd be happy to draft a PR.

Page URL

https://learn.microsoft.com/en-us/aspnet/core/client-side/dotnet-interop?view=aspnetcore-8.0

Content source URL

https://github.com/dotnet/AspNetCore.Docs/blob/main/aspnetcore/client-side/dotnet-interop.md

Document ID

efff6954-a035-d1da-5975-af04ff7c05ed

Article author

@pavelsavara