Web Development With Blazor

Belitsoft has released a guide for technology leaders who want to move faster with Blazor. Inside: proven patterns for state management, security, authentication, and role-based UI, walkthroughs on forms, APIs, JavaScript interop, debugging, automated tests with bUnit and Playwright plus CI/CD and cloud deployment checklists. Future roadmap insights for .NET 10 are included.

What is Blazor

Blazor is a .NET-based framework for building interactive user interfaces in C#. It removes the need to combine ASP.NET on the server with separate JavaScript single-page application frameworks. Developers can reuse existing C# code and NuGet libraries and only need to call JavaScript when a specific client-side library is required.

Before Blazor, modern web applications typically split development between C# on the server and JavaScript or TypeScript in the browser. Frameworks such as Angular and React improved perceived performance by updating only parts of the page, but they increased the number of languages, build tools, and packages that teams had to maintain. 

Hosting models

1. Blazor Server keeps all executable code on the server and uses SignalR to send compact UI updates to the browser, enabling fast initial loads and compatibility with older browsers, but it requires a persistent connection and additional server memory per session. 
2. Blazor WebAssembly downloads a lightweight .NET runtime into the browser, enabling offline work and eliminating server round trips, but at the cost of a larger initial download. 
3. Blazor Hybrid embeds the same components inside a .NET MAUI WebView, so the identical C# UI can run as a desktop or mobile application that also has access to native device APIs. 
4. The server-side rendering option introduced in .NET 8 renders HTML on the server. Its streaming mode can begin sending markup immediately and push further updates when long tasks complete.

Considerations

1. Server hosting simplifies deployment to older browsers but requires capacity planning for concurrent SignalR circuits. 
2. WebAssembly shifts compute load to the client and lowers ongoing server costs while increasing download size. 
3. Hybrid applications are distributed through traditional desktop or mobile channels and rely on standard web technologies inside a native shell. 
4. Server-side rendering serves mostly static HTML until additional interactivity is added, trading maximum compatibility for minimal client processing.

Advantages of using Blazor to create a .NET application

One project, three delivery modes

A single Blazor web application created with .NET can render pages on the server, run entirely in the browser with WebAssembly, or combine both through streaming. The framework starts with server rendering and transparently moves to cached WebAssembly on subsequent visits when the initial download would exceed about 100 milliseconds. No separate front-end stack is required.

Low-cost, cross-platform tools

Development is supported on Windows, macOS, and Linux. Windows teams can use the free Visual Studio Community edition. Paid editions add enterprise features but are not required. Cross-platform teams can use Visual Studio Code with two extensions or JetBrains Rider. Everything Visual Studio offers - including project creation - can also be managed using the cross-platform dotnet CLI, enabling automated builds without additional licenses.

Built-in security and compliance

New Blazor web application projects are configured with HTTPS, HSTS, and antiforgery middleware enabled by default. Assemblies are packaged in the Webcil format rather than as raw DLLs, preventing antivirus or host blocks that would otherwise block DLL downloads.

Static hosting option when needed

For scenarios that allow only static files (such as file shares, GitHub Pages, or Azure Static Web Apps), the Blazor WebAssembly Standalone template packages the application without server dependencies, preserving deployment flexibility.

Long-term support and streamlined templates

.NET 8 is a long-term support (LTS) release, providing security and servicing updates through 2028. Microsoft has reduced the Blazor template set to two main web options plus one hybrid template, lowering maintenance overhead and simplifying project selection.

Shared C# code reduces duplication

Business models, validation logic, and user interface components can run on both the server and the client, reducing duplicate code and speeding delivery.

State management in a Blazor application

Every modern application has to remember things - customer choices, the items in a basket, user preferences, and so on. In Blazor-based systems, that memory, or "state," can be stored in different places. 

When the application runs on the server, a real-time SignalR connection holds the state in server memory. When it runs entirely in the browser (WebAssembly), the state is in the user’s tab.

If the page reloads or the connection drops, everything in memory disappears, which is why state management is critical to a smooth customer experience.

There are several practical ways to keep the data safe:

Server storage

Databases, blob stores, and similar services hold information permanently and are always accessible, no matter how the front end is hosted.

The URL

Small identifiers - like a blog post ID or a page number - can be placed in the address bar so that a link will always recreate the same view. It is useful for sharing links but unsuitable for anything that should remain private or invisible.

Browser storage. Modern browsers offer local storage (persists across sessions) and session storage (cleared when a tab closes). On the server version of Blazor, the data can be encrypted automatically; on the browser-only version, it remains readable, so it must never hold sensitive details such as prices, discounts, or personal data.

In-memory services

A small C# service kept alive by dependency injection can act as a "live clipboard" while the user is on the site. In the server model, one instance can serve every visitor and even broadcast changes instantly - useful for dashboards or live editing. For browser-only hosting, the same effect requires a lightweight real-time channel such as SignalR.

Root-level cascading values

This feature lets the application publish a single object - say, the user’s theme preference - and have every component pick it up automatically, refreshing whenever the value changes.

Each approach has trade-offs in performance, security, and development cost, but together they give the organization a flexible toolkit:

• Customers do not lose their basket when the page reloads.
• Links carry the right context for marketing campaigns.
• Administrators can push live updates to every open screen without writing JavaScript.
• Sensitive data stays on the server or in encrypted storage.

Custom Blazor Components

Blazor delivers web applications as collections of modular "components," each packaged in a single .razor file that combines layout and C# logic. Engineers can keep code and markup together for rapid prototyping, separate them for easier maintenance, or write purely in C# when low-level control is required.

Underlying this model is Blazor’s dependency injection framework. Shared services - such as data access, configuration, or logging - can be registered once and injected wherever they are needed. Services can be scoped to the whole application, to each user’s active session, or to individual operations, giving architects clear levers for controlling resource use and isolation.

Every component can be delivered in one of four modes. It can be a cost-efficient static page, a live server connected screen, a fully client-side WebAssembly experience that relieves the server of processing, or a hybrid that starts on the server and migrates to the browser automatically. These decisions are made on a page-by-page basis, allowing teams to match hosting cost and performance to business needs without restructuring the application.

Because components compile into standard .NET libraries, the same user interface code can be shared across multiple projects and can switch data sources - from a local JSON file today to a cloud API tomorrow - without rewriting the front end. This modular, service-oriented architecture reduces development effort, eases future integration work, and lets organizations tune operating costs and user experience with precision.

Advanced Blazor Components

Blazor approaches the user interface as a collection of small, self-contained building blocks called components. Each component can display data, react to user input, and be reused wherever it is needed. 

Data moves between a component and its on-screen representation in one of two ways. With one-way binding, the component pushes information to the page. With two-way binding, the page can also push changes back to the component. Two-way binding relies on a simple naming rule - pair each value with a companion "Changed" callback - and Blazor takes care of synchronizing the data and refreshing the screen.

A component signals that something has changed through an EventCallback. This callback is lightweight, cannot be null, and automatically triggers a screen refresh when it completes, so developers do not have to write additional plumbing. When more than one downstream function must react, the developer can expose an ordinary .NET action or event instead.

A component can accept a slice of markup - called a render fragment - and incorporate it directly into its output. This ChildContent lets a developer drop custom content between the component’s start and end tags without extra code. Render fragments are lighter than creating a separate component for every item in a list, so they reduce memory use and speed up page rendering.

These capabilities encourage teams to package repeating patterns into shared components and to wrap third-party controls behind well-defined abstractions. The result is a codebase that stays consistent across developers, adapts quickly to design changes, and scales without unnecessary performance overhead.

Building Forms with Validation in Blazor

Blazor lets a development team build web forms with features out of the box. 

Its form wrapper, EditForm, removes the need to hand-code submission targets - it automatically tracks which fields the user has touched, validates input, and reports problems in real time. The platform supplies ready-made controls - text boxes, check boxes, date and number pickers, file uploads, radio buttons, dropdowns, and components that display validation errors - so engineers focus on business rules, not low-level plumbing.

Validation is driven by the Data Annotations attributes. By tagging model properties with declarations such as "Required" or "Range," developers gain automatic front-end and back-end checks without extra code. Blazor also adds CSS classes that indicate whether a field is valid, and these can be remapped to match the chosen design framework (for example, Bootstrap’s .is-valid and .is-invalid). 

Teams can choose to update data on every keystroke, after a field loses focus, or under explicit programmatic control. 

Blazor also protects unsaved work. A NavigationLock feature prevents accidental data loss when users, for example, refresh, or close the tab, ensuring they don’t discard work unintentionally. An accompanying helper component determines when the warning should appear and suppresses it once data is saved. The mechanism works seamlessly in interactive render modes and, with minor limitations, in static server-rendered pages.

Finally, server-rendered forms can post data without relying on WebAssembly or persistent SignalR connections. Developers tag the form with a standard method="post" plus a name, and add an attribute to preserve scroll position after submission. 

Individual fields marked as "permanent" keep their values between navigations, which streamlines common tasks such as repeated searches.

In short, the framework now provides a pipeline for secure, validated data entry that is easy to style, easy to extend - all while keeping development effort low and future maintenance predictable.

Creating an API in Blazor

Blazor Server already keeps the code and its security checks on the server and does not need that extra layer. 

Blazor WebAssembly, by contrast, runs entirely in the browser, so every request to read or change data must pass through a small REST service on the server. 

The API exposes the three actions for every data type: GET retrieves data, PUT both creates new records and updates existing ones - the server decides whether a record already exists, DELETE removes records.

Any operation that changes or removes information is automatically locked behind authentication, while reads can stay open if desired. 

Microsoft’s Minimal API syntax declares these endpoints in just a few lines, keeping the codebase small but still ready to grow. 

In the browser, a WebAssembly client calls the same endpoints through an HttpClient that attaches the user’s access token and redirects to the sign-in page if the token is missing. 

Because both server and client use the same interface, the rest of the application behaves identically whether it is hosted on the server or in the browser.

Authentication and Authorization in Blazor

Only authorized staff should be able to change website content.

ASP.NET Core supplies the authentication framework (cookie handling, token validation, role checks, etc.). Auth0 then acts as the external identity provider.

When someone clicks Log in, the browser is redirected to Auth0. Auth0 confirms the person’s identity and returns a signed token that lists the user’s ID, email, and any roles such as Administrator. ASP.NET Core receives that token, sets a secure cookie, and from then on checks the cookie on every request.

If the UI is running on the server (Blazor Server), the SignalR connection that streams screen updates carries the same cookie, so the server knows who is sending each action.

If the UI has moved to the browser (Blazor WebAssembly), the browser includes the cookie with each call back to the server or to the API, so the same permissions apply.

Because both hosting modes rely on the same cookie, every part of the site - server-rendered pages, browser-side components, and the API - enforces the same access rules without extra work.

Content-management screens stay hidden unless the token lists the Administrator role; regular visitors see only the public content.

The business gains protection of its content, removes the liability of password storage, delivers a friction-free sign-in experience, and preserves the flexibility to scale or rearchitect later without revisiting the authentication approach.

Sharing Code and Resources in Blazor

A single library of Blazor components, styles, and static assets can be built once and reused in any hosting model - server-side, WebAssembly, or a hybrid - so the same codebase can power both a public customer portal and an internal CRM without modification. 

By packaging everything, including images and corporate styles, into that library, every product inherits the same look and behavior, and a change made in one place is rolled out everywhere immediately. 

Because Blazor emits standard HTML, teams remain free to pick the styling approach that best fits their skills and brand guidelines - whether that is Bootstrap, Tailwind, SASS, or another tool - while the library mechanism keeps deployment as simple as approving a new NuGet version. 

Component-scoped "isolated CSS" further guarantees that brand-critical styles cannot clash across projects, eliminating regression defects. 

Role-based visibility controls improve security without extra code. 

The benefits for the organization are faster delivery cycles, consistent customer experience, and the flexibility to shift hosting technologies or refresh branding with minimal engineering effort and no disruption to live systems.

ASP.NET Core Blazor JavaScript interoperability

Blazor lets development teams write full-stack web apps in C#, but it still leans on JavaScript for the handful of things browsers expose only through JS - updating the DOM at runtime, catching resize or scroll events, downloading files, reading local storage, or tapping advanced APIs such as Bluetooth. This interlanguage "interop" lets Blazor reach every corner of the modern browser.

On the outbound side (.NET → JavaScript) developers have the modern approach - JavaScript Isolation - that treats each component’s script as a private ES module that Blazor loads automatically and exactly once. This keeps codebases tidy, eliminates manual script tags, and lets vendors offer drop-in components that just work.

Inbound calls (JavaScript → .NET) are required when the browser fires events that C# must handle. Blazor exposes static methods or live object instances to JavaScript with one attribute, so a Bluetooth device event, for example, can flow straight into C# business logic. Disposal patterns are built in, preventing the memory leaks that plague long-running SPAs.

For executives worried about technical debt, the guidance is: favor native Blazor components wherever possible - major vendors already deliver fully C# controls that hide their minimal JS under the hood. When a niche JavaScript library really is the only game in town, Blazor’s interop lets you wrap it behind a stable component façade so the rest of the app remains pure .NET.

Finally, WebAssembly hosting amplifies these benefits. Because the .NET runtime itself lives inside the browser, interop no longer makes round trips to a server - the new JSHost / JSImport and JSExport APIs give near-native performance while keeping the developer experience symmetrical on both sides.

Debugging ASP.NET Core Blazor apps

Blazor, Microsoft’s web-UI framework, gives development teams an end-to-end way to find and fix problems quickly. 

Whether the application runs on the server or in the browser, engineers can pause execution, inspect live data, and see errors the moment they occur - using the same Visual Studio tools they already know. That consistency shortens onboarding for new projects and keeps troubleshooting costs low. For WebAssembly deployments, the browser itself can also host a streamlined debugger, adding flexibility for support scenarios.

Beyond traditional debugging, Blazor’s Hot Reload feature lets coders change a running application and watch the update appear almost instantly, usually without losing page state. This means faster feedback loops, fewer full rebuilds, and noticeably higher developer throughput. Taken together, these capabilities reduce time to market, shrink the risk of undetected defects reaching production, and reinforce Blazor’s fit inside a modern Microsoft stack - all outcomes that matter directly to schedule, quality, and budget.

Testing Razor components in ASP.NET Core Blazor

Automated tests give us a quick, reliable way to confirm that new code hasn’t broken anything, so development teams can move faster without manually checking each screen. 

Traditional browser-based tests accomplish this by launching the full site in different browsers and devices, but that cycle - start a browser, run a test, shut it down - takes time. 

With Blazor, the development team can avoid much of that overhead by using bUnit, a purpose-built testing framework that renders each component in memory, lets us inspect the output instantly, mocks browser calls, authentication, or JavaScript interactions. Setting up bUnit takes a few minutes: install a Visual Studio template, create a test project, and write tests in C# or Razor syntax. 

If components rely on an API, you replace the live service with a simple mock that returns predictable data, making every test repeatable. One short test can confirm, for example, the home page lists exactly 20 posts. Another can verify that the login link switches to logout once a user is marked as authenticated. 

Engineers can also validate that the code calls the expected JavaScript functions without running script in a browser. 

For broader, end-to-end coverage, it's possible to add Playwright tests, but bUnit handles most day-to-day checks in seconds. 

A free Visual Studio extension called Blazm streamlines common Blazor chores and generates starter tests. 

The result: developers catch regressions early, sustain quality, and move on to deployment with confidence.

Deploying ASP.NET Core Blazor apps 

Deploying a Blazor application is about turning finished code into a service your customers can reach. The safest way to do that is through an automated pipeline - often called CI/CD - so the build that leaves source control is exactly the one that arrives in production. 

Relying on a developer to publish from a local machine leaves you guessing whether the code is current or whether every recent fix made it in. With GitHub Actions, Azure DevOps, Jenkins, or similar tools, the handoff is automatic and repeatable, and any test suite you already run for ASP.NET will run for Blazor without extra effort.

Once the pipeline is in place, you simply need a host that can run ASP.NET Core - or you package the app as "self-contained," which ships the required .NET runtime along with your code. If you choose Blazor Server or the interactive mode that uses SignalR, be sure the hosting provider keeps WebSockets switched on, because that protocol carries the live connection to the user’s browser. If the app is a standalone Blazor WebAssembly build, you can drop it onto a static site service like Azure Static Web Apps or GitHub Pages and skip the server runtime entirely.

For organizations that still run Internet Information Services, installing the .NET Hosting Bundle and enabling WebSockets is sufficient. A typical upgrade through Azure DevOps causes several seconds of visible downtime while SignalR reconnects, which most end users barely notice.

Put an automated pipeline between source control and production, run the test suite every time, and deploy either to a cloud host that supports the right .NET version or as a self-contained package if it does not. With those pieces in place, the release process becomes predictable, fast, and easy to audit, letting your teams focus on new features.

Angular, React & Blazor

Blazor lets you modernize an existing website without shutting the old one down. Microsoft designed it to coexist alongside other frameworks, so you can move pages or features over gradually instead of rewriting everything at once. Teams gain flexibility - front-end developers can keep using Angular or React where they already excel, while new work can start in Blazor - this as a transition phase, running multiple stacks increases complexity, testing effort, and support costs. Many organizations run the old and new sites side by side behind a proxy until all functionality is rebuilt.

Blazor’s key advantage is simplicity. It uses C# and Razor syntax on both client and server, so developers work in one language and avoid the heavy JavaScript toolchains that Angular and React require. A standard feature called "custom elements" turns any Blazor component into a normal browser tag, making it easy to drop a Blazor feature into an Angular, React, or traditional ASP.NET MVC page. For Angular or React, the component runs in WebAssembly entirely in the browser, for Razor Pages or MVC, you can choose WebAssembly or a server-hosted mode that keeps state on the server. Either way, a component can be moved later with only minor code changes.

The same mechanism works in reverse: if a best-of-breed JavaScript control has no Blazor equivalent, it can be loaded as a web component and used from Blazor with minimal glue code. This opens the whole JavaScript ecosystem to a Blazor project without surrendering the single-language development model.

Blazor gives enterprises a low-risk, incremental path from legacy web stacks to a modern, unified C# front end, reducing long-term tooling overhead while preserving the option to reuse proven JavaScript assets during the transition.

Future of Web Development with ASP.NET Core & Blazor

At Microsoft Build, the ASP.NET Core team outlined where the platform stands today and what is coming in .NET 10.  More than two million developers now use ASP.NET Core every month, and it already powers Microsoft 365, Bing, Teams, Copilot, Xbox, and most Azure services. Benchmarks show it running roughly three times faster than Node’s Express and up to five times faster than Go’s Gin, so Microsoft continues to choose it for high-traffic, latency-sensitive workloads.

The speakers stressed that ASP.NET Core slots neatly into Microsoft’s expanding AI stack. New libraries such as Microsoft.Extensions.AI, Evaluations, VectorData, Semantic Kernel, and the C# Model-Context-Protocol SDK sit on top of the framework, and turnkey project templates let teams add chat-style interfaces in minutes. For cloud-native composition, they presented .NET Aspire, an optional layer that injects health checks, OpenTelemetry, HTTPS, resiliency patterns, and service-to-service discovery. 

Blazor is Microsoft’s flagship framework for building .NET web front-ends. The upcoming release makes it easier for an app to remember what a user was doing: developers simply tag the data that matters, and the framework saves it automatically when a session goes idle and restores it when the user returns. This boosts resilience without extra coding. The grid component gains more flexible row-level formatting and cleaner filters, and the connection between .NET and browser JavaScript is now straightforward, so teams can call browser features directly. Out-of-the-box templates include a customizable "reconnecting" screen, letting companies keep their branding even during brief outages. Finally, the test harness can spin up a full web server, allowing automated Playwright or Selenium tests to run against a production-like environment. Together, these changes lower risk, cut support effort and speed up delivery.

The final release is scheduled for November 2025 and will be launched during .NET Conf 2025.

How Belitsoft Can Help

Belitsoft offers end-to-end engineering services for companies that want to build or modernize .NET products with Blazor. 

A cross-functional team of solution architects, C# and .NET developers, UI/UX specialists, QA engineers, and DevOps professionals implements the plan in two-week sprints, shows incremental demos, and keeps code in a continuous integration pipeline so every commit is tested and deployable.

For clients that already run ASP.NET MVC, Angular, or React, Belitsoft follows an incremental migration path. Legacy pages continue to operate while new Blazor components - packaged as standard web custom elements - replace them one by one.

If a client’s priority is extra capacity rather than a full project, Belitsoft supplies dedicated or augmented staff. The company maintains a pool of more than two hundred engineers, so it can present candidate CVs, arrange interviews, and start work quickly. Engagement models cover single specialists, blended teams that embed into the customer’s organization, and standalone squads that own an entire feature set. All developers adhere to a mandatory code review workflow, write unit tests, integrate Playwright, and scan code  to enforce security and quality gates.