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
(19)
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
Course Outline 2m Introduction 1m Why Use JavaScript in Your Blazor App? 4m Look at the Blazor App Used in This Course 4m Know the Supported JavaScript Interop Scenarios 1m
Invoking JavaScript Functions from .NET
Understand JavaScript Interop in the Component Lifecycle 4m Handle JavaScript Errors in .NET 4m Pass an HTML Element Reference to a JavaScript Function 4m Introduction 1m Create a JavaScript Function in the Global Scope 3m Pass a .NET Object to a JavaScript Function 3m Call a JavaScript Function That Returns Void 5m Summary 1m Add a JavaScript File to Your Blazor App 2m See Server Prerendering in Action 4m Invoke JavaScript Functions Synchronously 2m Focus a Blazor Component via JavaScript 3m Call a JavaScript Function That Returns a Value 4m Get an Object as a Return Value 3m Use JavaScript Interop in the Component Lifecycle 6m
Invoking .NET Methods from JavaScript
Summary 0m Call a .NET Instance Method from JavaScript 8m Call a Component Method from a JavaScript Event Handler 4m Introduction 1m Call a Static .NET Method from JavaScript 6m Use a Custom Method Identifier 4m
Integrating Browser APIs in Your Blazor App
Look at the Prepared C# Code 4m Store Data in the Browser’s Local Storage 6m Know the Plan for Local Storage 3m Summary 1m Introduction 1m Check if the Browser Is Online 5m
Using JavaScript Interop in Razor Class Libraries
Use the Blazor Component in Your Blazor App 5m Look at the Map Component and Its Library 6m Introduction 1m Move a Blazor Component with JavaScript to a Library 7m Summary 1m
Wrapping JavaScript Components in .NET
Summary 2m Create a BlazorAgGrid Component 2m Use the BlazorAgGrid in the Blazor App 3m Create a BlazorAgGridColumn Component 7m Understand the Scenario to Use a Data Grid 1m Support Multiple BlazorAgGrids on a Single Page 6m Introduction 1m Pass Column Definitions from .NET to JavaScript 5m Initialize the Wrapped JavaScript Component 3m Add an OnSelectionChanged Event 4m Understand Server Prerendering and Disposing 4m Implement IDisposable to Clean Up 4m Add a RowData Component Parameter 4m Override the ShouldRender Method 4m Look at a JavaScript Sample That Uses the Ag-Grid 5m Use the OnSelectionChanged Event 3m Add an AutoGenerateColumns Component Parameter 3m
Description
Course info
Rating
(19)
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
Test Driven Development in C#
Beginner
2h 26m
Jan 29, 2020
Migrating WPF and Windows Forms Apps to .NET Core
Intermediate
2h 36m
Sep 24, 2019
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