❤️ Blazor + JavaScript: A Perfect Pair For Web Development?


Hey Reader,

Today, I show you how combining Blazor and JavaScript can give you the best of both worlds. Let’s dive into how you can easily mix the power of these two technologies in your projects!

Watch on YouTube đź“ş

Check out the full tutorial on YouTube to see everything in action 👇

video preview​

A Simple Example: Console Logging in Blazor

Imagine you’re working on a Blazor Server application, and you want to log the current count (of the Counter page) to the console.

Your first thought might be to use Console.WriteLine, right? Here’s what that looks like:

Console.WriteLine("Current count is " + currentCount);

This works, but you’ll only see the output in the terminal, not the browser console. But what if you want to log it directly in the browser console? This is where JavaScript comes in handy.

Injecting JavaScript into Blazor

To use JavaScript, you can inject the IJSRuntime interface in your Blazor component and use the InvokeVoidAsync method to call JavaScript functions. Here’s how you do it:

@inject IJSRuntime JS

private async Task LogToConsole()
{
    await JS.InvokeVoidAsync("console.log", "Current count is " + currentCount);
}

When you run this, you’ll see the log directly in your browser’s console. This is a basic example, but you can use this approach to call any JavaScript function from Blazor.

Using Custom JavaScript Files

But what if you want to use your own JavaScript functions? Just create a new JavaScript file in your project’s wwwroot folder. Here’s how:

  1. Create a new folder named js.
  2. Inside it, create a file named myscripts.js.
  3. Add your JavaScript function:
async function log(text) {
    console.log(text);
}

Now, reference this file in your App.razor:

Finally, call this custom function from Blazor:

await JS.InvokeVoidAsync("log", "Using our script, count is " + currentCount);

When you click the button, you’ll see your custom log message in the console.

Logging Complex Objects

Want to log an entire object instead of just a text or value? You can easily do this with JavaScript too. For example, let’s say you have a Player class:

public class Player
{
    public string Name { get; set; } = "Goku";
    public int Level { get; set; } = 9001;
}

You can log this object directly:

var player = new Player();
await JS.InvokeVoidAsync("console.log", player);

JavaScript will display the object in the console, showing all its properties.

Calling Blazor from JavaScript

Sometimes, you might want to call a Blazor function from JavaScript. Although it’s less common, it’s possible! Here’s a quick example:

Create a static Blazor method and mark it with the [JSInvokable] attribute:

[JSInvokable]
public static void IncrementCounter()
{
    currentCount++;
}

In your JavaScript, call this method:

DotNet.invokeMethodAsync('YourAssemblyName', 'IncrementCounter');

When this JavaScript function runs, it calls the Blazor method and increments the counter.

Wrapping Up

Combining Blazor with JavaScript opens up a world of possibilities for your web development projects. Whether you’re logging data, handling complex objects, or calling Blazor methods from JavaScript, these techniques can make your applications more powerful and flexible.

What's your experience with Blazor and JavaScript? Any real-world examples where you need a specific JavaScript library?

Happy coding and have an awesome weekend!

Take care,

Patrick

PS: Need help understanding .NET & Blazor? There are two ways I can help you with:

  1. Check out the .NET Web Academy, which provides masterclasses and a supportive community of like-minded developers.
  2. I'm open to coaching. If you need specific help, reply to this email and we'll figure something out.

PPS: Would you like to sponsor this newsletter? Click here. đź’Ś

Patrick God

Become a .NET & Blazor expert with weekly tutorials featuring best practices and the latest improvements, right in your inbox.

Read more from Patrick God
video preview

Hey Reader, In today’s tutorial, I’ll walk you through how to use Dapper, a high-performance micro ORM (object-relational mapper) with a .NET 8 Web API and SQL Server. We’ll cover everything you need to know to build a simple CRUD (Create, Read, Update, Delete) application. Watch on YouTube 📺 Check out the full tutorial on YouTube to see everything in action 👇 What We’ll Be Doing We’re going to work with a simple video game database to start. You’ll learn how to: Read all games or a specific...

video preview

Today's Sponsor: HackerPulse — The Ultimate Dev Profile Don’t send 69 links to share your work - just share one! Bring together your GitHub, Stack Overflow, and LinkedIn profiles into a single HackerPulse dev profile. Perfect for job applications and networking, HackerPulse gives a complete picture of your skills and projects, all in one place. Create Your Profile Hey Reader, Today, I'm going to walk you through setting up a Blazor project using Clean Architecture. If you've ever wondered how...

video preview

Hey Reader, Today, I'd like to show you two powerful tools for managing data in .NET projects: Entity Framework and Dapper. I'm sure you already heard about them. First, let me explain what an ORM is and then walk you through examples of CRUD (Create, Read, Update, Delete) operations using both tools. Watch on YouTube 📺 Check out the full tutorial on YouTube to see everything in action 👇 What is an ORM? An ORM (Object-Relational Mapper) is a tool that helps your application communicate with a...