Is this you? As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.
Claim your profile
Articles by Claudio Bernasconi
Blazor Basics: Persisting Component State in Blazor with .NET 10
Learn how to reuse state between prerendering and establishing interactivity in Blazor components. In Blazor, prerendering lets pages render quickly on the server, giving users useful content while the application becomes interactive. It also makes the initial HTML available to search engines. However, prerendering comes with an important consequence: a component can be initialized twice.
Blazor Basics: Introduction to Logging with Serilog in Blazor Applications
In this article, we learn the fundamentals of integrating Serilog into a Blazor web application. Serilog is a popular and highly valued open-source logging framework for the .NET platform. You can access the Blazor Server code and the Blazor WebAssembly code on GitHub. Why Logging Is Important You might wonder why integrating logging into a web application is important. First of all, it doesn’t really matter what kind of application you build.
Blazor Basics: Common Blazor Mistakes Beginners Make (and How to Avoid Them)
One Blazor specialist shares common mistakes he sees beginner Blazor web developers make and tips for how to avoid them. I have been using Blazor daily for building web applications for more than six years. In this article, I want to share common mistakes I see beginner Blazor developers make and help you avoid them.
Blazor Basics: SEO Basics for Blazor Web Applications
Learn the fundamentals and best practices of SEO (search engine optimization) in Blazor. By the end of this post, you will understand why SEO works differently in Blazor than in traditional ASP.NET Core MVC or Razor Pages and why it might matter to your apps even if you do not know it yet. Why SEO Matters (Even for Internal Apps) We need to differentiate between public-facing and internal Blazor web applications.
Blazor Basics: Organizing Large Blazor Applications
Learn how to properly structure a large Blazor web application with real-world proven tips and tricks. Organizing large Blazor web applications is crucial. Everyone who has ever worked in a large code base knows how a properly structured application feels much simpler and more natural to navigate than a big chunk of code smashed together. In this article, I will share general tips and a few Blazor-specific ideas. All those ideas are tested in real-world Blazor web applications of different sizes.
Blazor Basics: Handling Loading, Empty and Error States in Blazor
Learn two ways to properly handle the four loading states: loading, error, success and empty in Blazor web applications. In modern web development, page rendering speed is crucial. We render pages as quickly as possible and asynchronously load data from the server. Once the data arrives on the client, we update the web application and integrate the data into the existing page. Therefore, modern data-driven applications are rarely in a stable state.
Learn how to properly implement a custom loading indicator and why professional UI libraries can provide the best user experience. In modern web development, we often asynchronously load data from the server. Blazor is no different. To let the user know that data is being loaded and the app is working, we should show a busy or loading indicator during such operations. In this article, we will implement a basic loading indicator in Blazor using CSS and also explore more advanced solutions.
Blazor Basics: Getting Started with Blazor Development in VS Code
Learn how to use Visual Studio Code for Blazor web development. VS Code is a free, lightweight code editor, and it is available for Mac and Linux users (unlike its more robust sibling Visual Studio, which is exclusive to Windows). While many developers using Windows love the fully integrated development experience Visual Studio provides, it’s not an option for some of us.
Blazor Basics: Building Responsive Blazor Apps with CSS Media Queries
Responsive design is the reason applications feel polished and user-friendly. Learn how to build responsive Blazor web applications using CSS media queries. Today, we will learn how to build responsive Blazor web applications. Responsive design is the reason applications feel polished and user-friendly. We will first learn the basics of responsive design and how to use CSS media queries to implement responsive layouts.
Blazor Basics: Implementing a Theme Switch in Blazor (Dark Mode)
Learn how to implement dark mode and a theme switch for Blazor web applications using standardized CSS features and no JavaScript code. In this article, we’ll learn how to properly implement dark mode and a theme switch for Blazor web applications. Introduction We want to implement a minimal yet complete example of dark mode and a theme switch for Blazor web applications. We will keep it simple and use pure CSS to style the application and Blazor to manage the state.
Blazor Basics: Should You Migrate to .NET 10?
Not only is .NET 10 the next long-term support version, it also delivers improved startup time, state management, JavaScript interop and NotFound handling. In short, YES! It’s worth updating your Blazor app to .NET 10! In this article, I want to share what’s new in .NET 10 for Blazor development. You will learn about new features and their impact on everyday web development with Blazor.
Blazor WebAssembly Using Local Storage in Offline Scenarios
We will learn how to leverage the Local Storage API to implement an offline mode for Blazor WebAssembly applications. Even though connectivity is almost always available in 2025, there are still use cases where offline support is crucial. For example, consider a factory worker ticking off a checklist two floors underground, a metro employee inspecting cars or a wildlife rescuer off-grid. Blazor WebAssembly is an ideal technology for solving such a scenario.
Building Drag-and-Drop Functionality
Learn how to implement drag-and-drop functionality in Blazor and how Telerik UI for Blazor makes it even simpler for developers. One of the most important things for modern web applications is user and developer experience. With Blazor, we have a simple yet powerful component model. For many applications, drag-and-drop functionality is key in providing a seamless user experience.
Is Blazor the Right Choice for You?
I share my advice on when to use Blazor and when to use one of the JavaScript web frameworks. I have been using Blazor from the very first moment. It’s been almost five years since I first tried it. Meanwhile, I’ve implemented small, larger, internal and customer-facing Blazor web applications for different use cases. In this article, I want to share my advice on when to use Blazor and when to use one of the JavaScript web frameworks to help you decide on your next web project.
Local Storage to Save and Restore Form Input
We will learn how to leverage the Local Storage API to store temporary application state in Blazor WebAssembly. In web applications, we have to play within the rules and boundaries that web browsers provide to our applications. For example, in contrast to desktop applications, where we have complete control over the state of our application, web application users can navigate back or even close the active tab or the entire browser at any time.
Why Build Desktop App with Blazor Components
Learn why integrating Blazor components into desktop applications is a valuable approach. Blazor was once a promising new web technology that quickly established itself, and today it is a viable choice for .NET developers to build modern, robust and blazingly fast web applications. Today, Blazor is primarily associated with web development. While at its core Blazor is a web technology, you can do so much more with it than only build web applications.
Blazor Basics: Exploring Blazor’s Enhanced Navigation
Enhanced navigation provides SPA-like functionality for Static Server-Side Rendered (SSR) Blazor web apps. Enhanced navigation is a complex feature introduced in .NET 8 that helps provide a single-page application (SPA)–like user experience when navigating from one page to another. In this article, we will learn how enhanced navigation helps with Blazor development and what pitfalls we need to know. Since .NET 8 and the new Blazor Web App project template, enhanced navigation is enabled by default.
Leveraging CircuitHandler in Blazor Server
We learn how to use the CircuitHandler to handle client/server connections in Blazor Server. Blazor Server applications leverage a persistent WebSocket connection between clients and servers. Whenever the user interacts with the application, the server internally updates the Document Object Model (DOM) and returns the required changes to the client’s user interface. This architecture requires a stable internet connection.
Third-Party APIs in Blazor WebAssembly
See how to integrate third-party APIs in Blazor WebAssembly applications, dealing with CORS issues and error handling. Blazor WebAssembly has been involved in a first-class web framework for building interactive web applications using C# and .NET.
Dependency Injection Best Practices, Use Cases
Learn best practices for using dependency injection in Blazor, and differences between Blazor Server and Blazor WebAssembly. Dependency injection is a fundamental design pattern in ASP.NET Core and Blazor web development. It helps developers implement modular and maintainable applications by decoupling implementations. For example, a Users page might reference a UserService by its interface.
Building Reusable Component Libraries
See how to (re)use Razor components in Blazor web applications from Razor class libraries. Blazor is a modern, component-oriented web development framework for the .NET platform. It provides C# and .NET developers access to modern web development with the option to write (most of) the interaction code in C# instead of JavaScript. One of the most significant advantages of using a component-oriented web framework is the simplicity of sharing components between web applications.
Progressive Web Apps with Blazor WebAssembly
Learn what Progressive Web Apps (PWAs) are and how to add PWA support to a Blazor WebAssembly application. Progressive web applications (PWA) are an alternative to native applications, with the main advantage of not requiring separate bundling or distribution for different platforms. Instead, they’re an extension of web applications providing offline capabilities and advanced caching, improving the startup performance of a web application.
WebAssembly Ahead-of-Time (AOT) Compilation
Learn how just-in-time (JIT) and ahead-of-time (AOT) compilation work in context of Blazor WebAssembly applications. Since the introduction of .NET Framework in 2002 to the early days of .NET (Core) in 2016, just-in-time (JIT) compilation is how the .NET platform worked. With JIT, we write our applications using one of the available .NET programming languages, mostly C#, F# or Visual Basic .NET. The compiler turns the source code into Intermediate Language (IL) code stored in .dll files.
Handling Errors and Exception Logging
Learn the fundamentals of error handling and exception logging in Blazor web applications. Like in other modern web development frameworks, error handling and exception logging are essential to provide high-quality software products. This article will discuss the options and challenges we face with implementing them with Blazor web app development. You can access the code used in this example on GitHub.
Lazy Load, Boost Blazor Wasm Performance
Learn how to implement lazy loading assemblies in Blazor WebAssembly to improve the app’s performance. The biggest challenge and criticism Blazor WebAssembly faces is its first load performance. There are several performance optimizations you can apply to improve the overall performance of a Blazor WebAssembly application. However, depending on the application’s size, the WebAssembly file downloaded to the client can cause a noticeable delay.
Optimizing Performance in Blazor WebAssembly
Learn different ways to improve the performance of a Blazor WebAssembly application. The biggest challenge and criticism Blazor WebAssembly faces is its performance. Before the application is rendered on the client, the WebAssembly bundle, including a .NET runtime, must be downloaded before the page rendering starts. In this article, I will discuss a few options for improving the performance of a Blazor WebAssembly application.
Calling .NET from JavaScript
We learn how to call .NET methods from JavaScript functions in Blazor Server and Blazor WebAssembly applications. JavaScript is very popular for web development. With Blazor, we have an alternative that allows us to use C# instead of JavaScript for building modern, interactive, single-page web applications. But sometimes, we want to take advantage of existing JavaScript code.
Blazor Basics: Blazor JavaScript Interop-Calling JavaScript from .NET
Learn how to integrate JavaScript code and JavaScript libraries into a Blazor web application. The most significant advantage of using Blazor for web development is using C# instead of JavaScript. Yes, JavaScript is popular and has its place in web development. Yet, many of us prefer C# and use Blazor instead of React, Angular or Vue to implement web applications. Nonetheless, JavaScript is very popular, and many libraries are available.
Accessing Browser Storage in Blazor Web Apps
Today we will learn how to write to and read from the local and session storage in a Blazor Server web application. In modern web development, storing transient user-specific data is a common task. When the whole web application runs in the browser, we can benefit from storing data inside the browser instead of going through a request/response cycle to store the data on the server.
Blazor Basics: Styling Blazor Components with CSS
Today we learn how CSS support in Blazor works and how CSS isolation solves one of the most frequent web development problems. As we learned in the Introduction to Blazor Development, Blazor utilizes standard web technologies. When it comes to styling the web application and its components, Cascading Stylesheets (CSS) is the web standard, which is also used in Blazor development. You can access the code used in this example on GitHub. How Does CSS Work in Blazor?
Blazor Basics: Child Routes & Optional Route Parameters
Learn how to implement child routes and use optional route parameters in Blazor for more advanced routing needs. In this article, we explore child routes and optional route parameters in Blazor. In a previous article of this Blazor Basics series, we learned the Blazor Routing and Navigation Fundamentals. That post would be a good place to start if you haven’t read it yet before we get into the more advanced routing options in this article.
9 Best Practices for Building Blazor Web Apps
In this article, we learn nine best practices for building Blazor web applications. Those best practices are built on real-world experience working with Blazor for a few years. 1. Understand the Component Lifecycle The first and, from my experience, the most important step when learning Blazor is properly understanding the component lifecycle. Blazor uses a component-oriented rendering system similar to other modern web application frameworks such as Angular or React.
Blazor Basics: Globalization in Blazor
In this article, we explore the globalization options for Blazor web application development. In a previous article of this series, we learned about localization for Blazor web application development. You can access the code used in this example on GitHub. Introduction Globalization describes a set of actions performed to make an application work in the context of a globalized world.
Blazor Basics: Handling Images Dynamically
We will learn how to render static and dynamically rendered images in Blazor applications. Handling images is one of the fundamental tasks of any web framework. Blazor offers us two different options on how to render images. We can use static image paths, meaning we always show the same image, no matter what. Or we can use dynamic image paths, meaning we use a C# variable and, depending on its content, a different image is rendered within the Blazor component.
Blazor Basics: Templating Components with RenderFragments
We will learn what templated components are and how they help us implement more reusable Blazor components. In this article, we learn what templated components are in Blazor web development. We also implement a Dialog component that can be templated and used throughout a Blazor web application. You can access the code used in this example on GitHub. Introduction Templated Components allow us to provide an HTML snipped from one Blazor component to another component.
Blazor Basics: Improved Performance with Component Virtualization
We will learn how component virtualization optimizes the rendering performance of Blazor applications. In this article of the Blazor Basics series, we will learn how to use component virtualization in Blazor to optimize the rendering performance of Blazor web applications. You can access the code used in this example on GitHub. Introduction When working with data-driven applications, we sooner or later have to render an uncomfortable number of items in a list.
Blazor Basics: Working with Blazor Layouts
Learn about layouts in Blazor—how they define a set of Blazor components that are rendered to display the structure of a web app—and how to create reusable layouts. In this article of the Blazor Basics series, we will learn about Blazor layouts and how to implement reusable layout components. You can access the code used in this example on GitHub. What Is a Blazor Layout? A layout defines a set of Blazor components that are rendered to display the structure of a web app.
Blazor Basics: Advanced Blazor Form Validation
Learn how to get more granular control over how Blazor Forms are generated by manually creating and using the EditContext. In a previous article in the Blazor Basics series, we learned how to create HTML forms and capture user data. We also learned how to implement basic form data validation with Blazor using .NET data annotations. In this article, we will explore more advanced form validation techniques.
Blazor Basics: HTML Forms and Capturing User Data
Blazor provides fantastic helper components to make creating HTML forms simple so your web app can accept user data. Modern web applications aren’t one-way streets. Users interact with our applications by navigating the website or web application or, most importantly, entering data. In this part of the Blazor Basics series, we will learn how to create HTML forms to capture user data. As a short teaser, Blazor offers a set of fantastic helper components to deal with form creation and form handling.
Blazor Basics: Component Parameters and State Management
Passing data from parent to child component is a basic mechanism in a component-oriented architecture. In Blazor, there are several ways parent and child components communicate with each other. Blazor uses a component-oriented architecture. A Blazor application comprises multiple small and large Blazor components forming a component tree. Rendering flows from top to bottom. Parent components render before child components. So far, so good.
Blazor Basics: Blazor Event Callbacks
Event callbacks complete the Blazor component communication circle by allowing a child component to send information to its parent component when the user triggers an action. Blazor uses a component-driven application model. We’re building a tree of components to form a Blazor application. It’s common for parent components to communicate with their child components. Using parameters, we can provide data from the parent to the child.
Blazor Basics: Blazor Component (Re-)Rendering
Component rendering is a core mechanic of Blazor applications turning C# components into HTML and CSS. Lifecycle methods allow us to execute custom code synchronously or asynchronously. Blazor applications consist of a tree of Blazor components that build an interactive user interface. Rendering starts atop the tree and flows down to each component’s children. The reason for rendering the component hierarchy top-down is that the parent component decides what child components are created.
Blazor Basics: Blazor Routing and Navigation Fundamentals
Routing is a key feature of any single-page application. It allows the developer to arrange the website and the user to navigate different pages. Turning Blazor Components into Routeable Pages Whenever we use the @page directive on a Blazor component, the compiler will add the RouteAttribute during compilation, making it available as a route. It’s what differentiates regular components that are referenced within other Blazor components from routable components, usually referenced as Blazor pages.
Blazor Basics: Data Binding in Blazor
Data binding is a foundational feature of Blazor development used to bind data from the C# code to the user interface. Let’s take a look at one-way, two-way and event binding. Data binding is a key feature of Blazor and allows developers to synchronize data between the user interface and the underlying C# data model. Data binding also allows reacting to events the user or the browser triggers.
Blazor Basics: Creating a Blazor Component
When you’re getting started in Blazor, one of the first things you need to know about is components. Learn how to create a component, use a template and pass parameters from parent to child components. Blazor applications consist of multiple layers of components. Everything in Blazor is a component. The component-oriented architecture has many advantages, such as simple code reuse, isolated programming and composability, even across multiple Blazor applications.
Blazor Basics: Blazor Development—Visual Studio 2022
Get started with Blazor in Visual Studio 2022: Set up the development environment, create your first Blazor Server project, navigate the project structure, and learn about the development lifecycle. In the first article of the Blazor Basics series, we learned what Blazor is, what it isn’t, and how it works under the hood. Now we are ready to set up our development environment, create our first Blazor Server project, navigate the project structure and learn about the development lifecycle.
5 Differences between Blazor Server and Blazor WebAssembly
Blazor Server and Blazor WebAssembly share many similarities but also have significant differences. I will share five differences that impact deciding whether to use Blazor Server or Blazor WebAssembly for your next project. Of course, Blazor Server runs on the server, and Blazor WebAssembly runs on WebAssembly in the browser. However, the five differences I will share go further than that and are more hands-on.
Blazor Basics: What is Blazor?
Web, Blazor 0 Comments Get an introduction to Blazor development and a high-level overview of how Blazor works and upon what technologies it’s based. Blazor is a modern web user interface development technology developed by Microsoft. It allows for modern web application development, such as highly interactive single-page applications (SPAs). It is part of the .NET platform, which means it has access to the vast ecosystem .NET provides, such as APIs, programming languages and runtime.
Blazor Components: How to Split Template and C# Code
In the Blazor Introduction and specifically in the article about How to Create a Blazor Component, we’ve seen how simple it is to write C# code for our components. It’s not the only way to write C# code for our components, though. Instead of having the C# code below the template in the component file, we can move it into a separate file. Some people don’t like having the C# code directly in the component definition file.
Show More
loading
Actions
Is this you?
As a journalist, you can create a free Muck Rack account to customize your profile, list your contact preferences, and upload a portfolio of your best work.Get in touch with Claudio
Contact Claudio, search articles and posts on X, monitor coverage, and track replies from one place.
Learn more about Muck Rack