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 👇 ​A Simple Example: Console Logging in BlazorImagine 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
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 BlazorTo use JavaScript, you can inject the
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 FilesBut what if you want to use your own JavaScript functions? Just create a new JavaScript file in your project’s
Now, reference this file in your Finally, call this custom function from Blazor:
When you click the button, you’ll see your custom log message in the console. Logging Complex ObjectsWant 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
You can log this object directly:
JavaScript will display the object in the console, showing all its properties. Calling Blazor from JavaScriptSometimes, 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
In your JavaScript, call this method:
When this JavaScript function runs, it calls the Blazor method and increments the counter. Wrapping UpCombining 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:
PPS: Would you like to sponsor this newsletter? Click here. đź’Ś |
Become a .NET & Blazor expert with weekly tutorials featuring best practices and the latest improvements, right in your inbox.
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...
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...
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...