JavaScript interop done right – Blazor in depth (W8, lesson 6)

What you learn in this lesson

load a TypeScript module through IJSObjectReference, bundle it and release it after use

explain why interop runs only in OnAfterRenderAsync and what happens during prerendering and after a lost connection

handle errors, timeouts and the cancellation of a call

call back from JavaScript into .NET with DotNetObjectReference and [JSInvokable] and release the reference

place the .NET 10 calls InvokeConstructorAsync, GetValueAsync and SetValueAsync

know when [JSImport] and [JSExport] come into question instead of IJSRuntime

Blazor can do everything that works in .NET, but the browser can do some things that .NET cannot: the clipboard, the focus, opening a <dialog>. JavaScript interop exists for that, and there is a series of mistakes you make only if you do not know them: a call during prerendering, a module that is never released, a reference to .NET that lives forever. This lesson builds the clipboard and the focus of the customer file as a TypeScript module and looks at lifetime and errors along the way.

Where the Kladde stands

From K2 0611 you know a module with focusEntry, the reference IJSObjectReference, OnAfterRenderAsync and DisposeAsync with JSDisconnectedException. Here the point is what that looks like at scale: a module Scripts/kladde-interop.ts in Kladde.Web with three tasks (copy, focus, listen for paste) and a class KladdeInterop that encapsulates it. The interactive customer file from W8.2.2 uses it: after "Add address" the new row gets the focus, "Copy email address" writes to the clipboard, and a pasted address line ("Hauptstraße 1, 53111 Bonn") is distributed over the three fields. Keep your own names and carry the steps over.

What you learn in this lesson

Where the Kladde stands

This lesson belongs to course W8