--- title: Razor Components JavaScript interop author: guardrex description: Learn how to invoke JavaScript functions from .NET and .NET methods from JavaScript in Blazor and Razor Components apps. monikerRange: '>= aspnetcore-3.0' ms.author: riande ms.custom: mvc ms.date: 01/29/2019 uid: razor-components/javascript-interop --- # Razor Components JavaScript interop By [Javier Calvarro Nelson](https://github.com/javiercn), [Daniel Roth](https://github.com/danroth27), and [Luke Latham](https://github.com/guardrex) A Razor Components 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 on `IJSRuntime` takes an identifier for the JavaScript function 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 ASP.NET Core Razor Components 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. 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: ```html ``` JavaScript code, such as the code shown in the preceding example, can also be loaded by a JavaScript file with a reference to the script file in the *wwwroot/index.html* file. 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. ```cshtml @page "/" @using Microsoft.JSInterop; @inject IJSRuntime JsRuntime;

Call JavaScript Function Example

@ConvertedText

@functions { // Quote (c)2005 Universal Pictures: Serenity // https://www.uphe.com/movies/serenity // David Krumholtz on IMDB: https://www.imdb.com/name/nm0472710/ private MarkupString ConvertedText = new MarkupString("Select the Convert Array button."); private uint[] QuoteArray = new uint[] { 60, 101, 109, 62, 67, 97, 110, 39, 116, 32, 115, 116, 111, 112, 32, 116, 104, 101, 32, 115, 105, 103, 110, 97, 108, 44, 32, 77, 97, 108, 46, 60, 47, 101, 109, 62, 32, 45, 32, 77, 114, 46, 32, 85, 110, 105, 118, 101, 114, 115, 101, 10, 10, }; async void ConvertArray() { var text = await JsRuntime.InvokeAsync("ConvertArray", QuoteArray); ConvertedText = new MarkupString(text); StateHasChanged(); } } ``` For client-side Blazor apps, the `IJSRuntime` abstraction is accessible from `JSRuntime.Current`, which refers to the current user's request. Because there's only a single user of a client-side Blazor app, using `JSRuntime.Current` to invoke a JavaScript function works normally. Only use `JSRuntime.Current` in client-side Blazor apps. 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 `