Crossing the Bridge

Even though Blazor lets you avoid Javascript, there are times you **must** use it—for charts, maps, or legacy libraries. This is JS Interop.

1. IJSRuntime (C# to JS)

Inject IJSRuntime into your component. You can then call any global Javascript function using InvokeVoidAsync or InvokeAsync<T>. await JS.InvokeVoidAsync("alert", "Hello from C#!");. Always use the Async versions to avoid blocking the SignalR thread.

2. [JSInvokable] (JS to C#)

You can also call C# from Javascript. Mark a public method as [JSInvokable]. You then pass a DotNetObjectReference to Javascript, allowing it to call back into your specific component instance. This is vital for wrapping complex JS libraries that have their own event systems (like Google Maps).

3. Architect Insight

Q: "How do I prevent JS Interop memory leaks?"

Architect Answer: "Always dispose of your DotNetObjectReference objects. If you pass a reference to JS and don't clean it up when the component is destroyed, the GC can never reclaim that component's memory. Use IDisposable and tell Javascript to drop the reference in the Dispose method."