JavaScript Interop in Blazor Applications

By Thomas Claudius Huber
The JavaScript ecosystem is huge. This course teaches you how to use existing JavaScript libraries and JavaScript components in your Blazor applications.
Play course overview
Course info
Rating
(34)
Level
Intermediate
Updated
May 4, 2020
Duration
3h 8m
Table of contents
Course Overview
Course Overview 2m
Understanding the Need to Use JavaScript in Blazor
Introduction 1m Why Use JavaScript in Your Blazor App? 4m Know the Supported JavaScript Interop Scenarios 1m Look at the Blazor App Used in This Course 4m Course Outline 2m
Invoking JavaScript Functions from .NET
Introduction 1m Add a JavaScript File to Your Blazor App 2m Create a JavaScript Function in the Global Scope 3m Call a JavaScript Function That Returns Void 5m Pass a .NET Object to a JavaScript Function 3m Call a JavaScript Function That Returns a Value 4m Get an Object as a Return Value 3m Pass an HTML Element Reference to a JavaScript Function 4m Understand JavaScript Interop in the Component Lifecycle 4m See Server Prerendering in Action 4m Use JavaScript Interop in the Component Lifecycle 6m Focus a Blazor Component via JavaScript 3m Handle JavaScript Errors in .NET 4m Invoke JavaScript Functions Synchronously 2m Summary 1m
Invoking .NET Methods from JavaScript
Introduction 1m Call a Static .NET Method from JavaScript 6m Use a Custom Method Identifier 4m Call a .NET Instance Method from JavaScript 8m Call a Component Method from a JavaScript Event Handler 4m Summary 0m
Integrating Browser APIs in Your Blazor App
Introduction 1m Know the Plan for Local Storage 3m Look at the Prepared C# Code 4m Store Data in the Browser’s Local Storage 6m Check if the Browser Is Online 5m Summary 1m
Using JavaScript Interop in Razor Class Libraries
Introduction 1m Move a Blazor Component with JavaScript to a Library 7m Use the Blazor Component in Your Blazor App 5m Look at the Map Component and Its Library 6m Summary 1m
Wrapping JavaScript Components in .NET
Introduction 1m Understand the Scenario to Use a Data Grid 1m Look at a JavaScript Sample That Uses the Ag-Grid 5m Create a BlazorAgGrid Component 2m Initialize the Wrapped JavaScript Component 3m Use the BlazorAgGrid in the Blazor App 3m Add a RowData Component Parameter 4m Support Multiple BlazorAgGrids on a Single Page 6m Implement IDisposable to Clean Up 4m Understand Server Prerendering and Disposing 4m Add an OnSelectionChanged Event 4m Use the OnSelectionChanged Event 3m Override the ShouldRender Method 4m Pass Column Definitions from .NET to JavaScript 5m Add an AutoGenerateColumns Component Parameter 3m Create a BlazorAgGridColumn Component 7m Summary 2m
Description
Course info
Rating
(34)
Level
Intermediate
Updated
May 4, 2020
Duration
3h 8m
Description

At the core of using JavaScript libraries and JavaScript components in your Blazor application is a thorough knowledge of JavaScript Interop. In this course, JavaScript Interop in Blazor Applications, you will learn the skills you need to work with JavaScript in your Blazor apps. First, you will learn how to invoke JavaScript functions from .NET and how to invoke .NET methods from JavaScript. Next, you will discover how to use JavaScript Interop to access browser APIs like the local storage. Finally, you will see how to wrap JavaScript components in .NET. You will also learn how to wrap the popular JavaScript data grid called ag-grid in a Blazor component. When you’re finished with this course, you’ll have a foundational knowledge of JavaScript Interop in Blazor that will help you as you move forward to use JavaScript libraries and components in your Blazor applications.

About the author
Thomas Claudius Huber
About the author

Thomas is a well-known author, software developer, and speaker from Germany. He specializes in .NET, C#, TypeScript, XAML, and Azure.

More from the author
Microsoft Azure Developer: Develop Solutions with Blob Storage
Intermediate
1h 17m
Nov 30, 2020
Working with Styles in Xamarin.Forms Applications
Intermediate
1h 47m
Jul 15, 2020
More courses by Thomas Claudius Huber
Section Introduction Transcripts
Section Introduction Transcripts

Course Overview
Hi, everyone. My name is Thomas Claudius Huber, and welcome to my course, JavaScript Interop in Blazor Applications. I am a professional software developer, and I build applications with .NET and JavaScript. The JavaScript ecosystem is huge, and with JavaScript interop, your Blazor application gets access to this ecosystem. In this course, you will learn how to use JavaScript libraries and JavaScript components in your Blazor application. Some of the major topics that we will cover in this course include invoking JavaScript functions from .NET, invoking .NET methods from JavaScript, integrating browser APIs like _____ , wire JavaScript interop, and wrapping JavaScript components in .NET so that you can use them in your Blazor application. By the end of this course, you will know how to use JavaScript libraries and JavaScript components in your Blazor applications, and you will know how to use any browser API in place of wire JavaScript interop. Before beginning the course, you should be familiar with the basics of C# and Blazor. You should also be familiar with the basics of JavaScript. I hope you will join me on this journey to learn how to use JavaScript in your Blazor apps with the JavaScript Interop in Blazor Applications course, at Pluralsight.

You're the smartest person in the room

PROVE IT

Your team won't just close the skills gap

THEY'LL HURDLE IT