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