--- title: Blazor JavaScript interop author: guardrex description: Learn how to invoke JavaScript functions from .NET and .NET methods from JavaScript in Blazor apps. monikerRange: '>= aspnetcore-3.0' ms.author: riande ms.custom: mvc ms.date: 04/25/2019 uid: blazor/javascript-interop --- # Blazor JavaScript interop By [Javier Calvarro Nelson](https://github.com/javiercn), [Daniel Roth](https://github.com/danroth27), and [Luke Latham](https://github.com/guardrex) A Blazor app can invoke JavaScript functions from .NET and .NET methods from JavaScript code. ## Invoke JavaScript functions from .NET methods There are times when .NET code is required to call a JavaScript function. For example, a JavaScript call can expose browser capabilities or functionality from a JavaScript library to the app. To call into JavaScript from .NET, use the `IJSRuntime` abstraction. The `InvokeAsync` method takes an identifier for the JavaScript function that you wish to invoke along with any number of JSON-serializable arguments. The function identifier is relative to the global scope (`window`). If you wish to call `window.someScope.someFunction`, the identifier is `someScope.someFunction`. There's no need to register the function before it's called. The return type `T` must also be JSON serializable. For server-side apps: * Multiple user requests are processed by the server-side app. Don't call `JSRuntime.Current` in a component to invoke JavaScript functions. * Inject the `IJSRuntime` abstraction and use the injected object to issue JavaScript interop calls. * While a Blazor app is prerendering, calling into JavaScript isn't possible because a connection with the browser hasn't been established. For more information, see the [Detect when a Blazor app is prerendering](#detect-when-a-blazor-app-is-prerendering) section. The following example is based on [TextDecoder](https://developer.mozilla.org/docs/Web/API/TextDecoder), an experimental JavaScript-based decoder. The example demonstrates how to invoke a JavaScript function from a C# method. The JavaScript function accepts a byte array from a C# method, decodes the array, and returns the text to the component for display. Inside the `` element of *wwwroot/index.html*, provide a function that uses `TextDecoder` to decode a passed array: [!code-html[](javascript-interop/samples_snapshot/index-script.html)] JavaScript code, such as the code shown in the preceding example, can also be loaded from a JavaScript file (*.js*) with a reference to the script file in the *wwwroot/index.html* file: ```html ``` The following component: * Invokes the `ConvertArray` JavaScript function using `JsRuntime` when a component button (**Convert Array**) is selected. * After the JavaScript function is called, the passed array is converted into a string. The string is returned to the component for display. [!code-cshtml[](javascript-interop/samples_snapshot/call-js-example.razor?highlight=2,34-35)] To use the `IJSRuntime` abstraction, adopt any of the following approaches: * Inject the `IJSRuntime` abstraction into the Razor component (*.razor*): [!code-cshtml[](javascript-interop/samples_snapshot/inject-abstraction.razor?highlight=1)] * Inject the `IJSRuntime` abstraction into a class (*.cs*): [!code-csharp[](javascript-interop/samples_snapshot/inject-abstraction-class.cs?highlight=5)] * For dynamic content generation with [BuildRenderTree](xref:blazor/components#manual-rendertreebuilder-logic), use the `[Inject]` attribute: ```csharp [Inject] IJSRuntime JSRuntime { get; set; } ``` In the client-side sample app that accompanies this topic, two JavaScript functions are available to the client-side app that interact with the DOM to receive user input and display a welcome message: * `showPrompt` – Produces a prompt to accept user input (the user's name) and returns the name to the caller. * `displayWelcome` – Assigns a welcome message from the caller to a DOM object with an `id` of `welcome`. *wwwroot/exampleJsInterop.js*: [!code-javascript[](./common/samples/3.x/BlazorSample/wwwroot/exampleJsInterop.js?highlight=2-7)] Place the `