Introduction to JavaScript Interoperability

Overview

The Blazor WebAssembly framework makes it possible for us to run C# code on the browser. However, there are some scenarios that it cannot handle, and in those cases, we need to use JavaScript functions to fill in the gaps.

In this chapter, we will learn how to use JavaScript with Blazor WebAssembly. We will learn how to invoke a JavaScript function from Blazor with and without a return value. Conversely, we will learn how to invoke .NET methods from JavaScript. We will accomplish both of these scenarios by using JavaScript interop (JS interop). Finally, we will learn how to store data on the browser by using localStorage.

The project that we will create in this chapter will be a Local Storage Service that will read and write to the browser’s localStorage. In order to access the browser’s localStorage, we will need to use JavaScript. JS interop is used to invoke JavaScript from .NET.

In this chapter, we will cover the following topics:

• Why use JavaScript?
• Exploring JS interop
• Understanding local storage
• Invoking a JavaScript function from Blazor
• Invoking a .NET method from JavaScript
• Creating the local storage service