In data-driven applications, it is common to want to display information dynamically and visually. However, there are times when we have doubts about which type of chart to use in our applications.

Choosing the wrong type of chart can cause users to become confused or even distort the information by displaying it incompletely or with a layout that doesn’t make much sense.

That is why this article is a roundup of the types of charts available in the Progress Telerik UI suite for Blazor and when to use each. Let’s get to it!

Chart Types in Telerik UI for Blazor

Let’s analyze the different types of charts available in Telerik UI for Blazor, as well as when to use them.

Column Chart

The first type of chart, column, is perhaps the simplest. With this chart we can display vertical bars in which the height represents the value of each category. It’s a quite versatile chart type, which is why it’s very common to see it in applications and elsewhere. The chart looks like the following:

This type of chart is useful when we want to compare values across categories, show rankings or classifications, and visualize data where order does matter.

Bar Chart

The bar chart is the equivalent of the column chart but in a horizontal format. In the Telerik component ChartSeriesType.Bar is used and the category axis is on the vertical axis instead of horizontal:

This chart can be used when category names are long and you need more space to display them, when you want to show a horizontal comparison between values, and when you want to emphasize the difference in values between categories.

Line Chart

The line chart displays a graph with connected points, which makes this chart ideal for showing trends over time. In the Telerik component it supports normal, step and smooth lines:

This chart is suitable when we want to visualize temporal trends, compare different evolutions within the same period and when continuity between data points is relevant.

Area Chart

This type of chart is similar to the line chart, with the difference that the space beneath the lines is filled with a semi-transparent color. This gives greater emphasis to the volume or magnitude of the data. In the Telerik component we can control the opacity using the Opacity property.

You can use this chart when you want to emphasize the volume of the data, their trend or when you want to show how different series overlap.

Pie Chart

The pie chart displays a circle divided into proportional slices for each value specified in the category. It only supports a single series, which makes it an ideal chart for showing the composition of a whole:

Some examples of when to use this type of chart are when you want to show a percentage distribution of data, while being mindful of the maximum number of slices so as not to overcrowd the chart. Likewise, when you want users to quickly understand portions of a whole and when you require the values to add up to 100%.

Donut Chart

This type of chart is similar to a pie chart but with a hole in the center. This hole can be used to display a highlighted data point or, as the Progress Telerik team has done, allow multiple series to be shown:

This chart is recommended for showing, in addition to the pie-chart scenarios, hierarchical relationships between data sets.

Scatter Chart

The scatter chart displays a series of points defined by the x and y axes, with these being numeric data:

This type of chart is ideal when you want to show a correlation between two numeric variables, such as the relationship between users connected in an application and a website’s load time. It is also useful for identifying patterns, clusters, scientific data, among others.

Bubble Chart

This chart is similar to the scatter chart in how it works, but adds a third dimension, which is the size of the bubble:

The third dimension is useful for comparing entities with multiple metrics simultaneously.

Scatter Line Chart

The scatter line chart is similar to the scatter chart, except that in this case the points are connected by lines:

This chart is convenient to use when you want to show the relationship between two variables while maintaining continuity in the data or trend.

Candlestick Chart

This candlestick-style chart is widely used in the financial sector, as it allows showing four values for a period: open, close, high and low. If we are talking about stocks in the securities market, the body of the candle represents the price from open to close, while the wicks, which are the thin lines above and below, show the period’s high and low:

This chart is suitable for showing financial movements or when you want to identify trading patterns.

OHLC Chart (Open-High-Low-Close)

This chart shows the same four values as the candlestick chart, but instead of using candle bodies, it uses horizontal marks. In this chart the horizontal values represent the open and close, while the lower and upper extremes show the maximum and minimum:

The use cases for this chart are the same as for the candlestick chart, but when you want a cleaner visualization. It is also ideal when you want to show many time periods, in which a candlestick chart would overlap the values.

Heatmap Chart

The heatmap displays a grid where color intensity represents the magnitude of a value across two dimensions:

If you are a software developer, you will surely recognize the image above, since GitHub shows a similar chart to display the commits you have made on an account. This demonstrates that the chart is ideal for showing an activity density in two dimensions and when you want to show behavior patterns across intersecting categories.

Radar Line Chart

This chart starts from a common center from which several axes radiate. Each axis represents a specific value, which are then connected to form a closed shape:

It is very useful when you want to make profile comparisons, such as variables between LLM models or when you want to make before/after comparisons.

Radar Area Chart

This radar area chart is similar to the radar line chart, with the difference that the space of the formed shape is filled with a color:

This chart works well to understand how different profiles overlap on the chart quickly.

Radar Column Chart

The radar column chart follows the same principle as the radar line and radar area charts, with the difference that it shows diagonal bars extending from the center:

By showing bars instead of connecting points, this chart is excellent for comparing individual values across categories and when an overlap in the radar area could make reading values difficult.

Range Area Chart

The range area chart shows an area defined between two continuous lines defining the range between a minimum and a maximum value, similar to the area chart but not starting from zero:

By displaying ranges, it is ideal in scenarios such as temperature ranges, error margins and when you need to emphasize a difference between continuous sequences of values.

Range Bar Chart

This chart lets you display ranges of values over a period of time using horizontal bars, whose position and length vary according to a from value and a to value:

This chart can help you show time ranges or durations, or compare ranges between categories or groups.

Range Column Chart

It is the vertical version of the range bar chart. In this chart vertical bars are displayed, which vary according to the from and to values:

This chart could be useful to show ranges of scores between periods or when you need to emphasize both the minimum and the maximum of each category.

Waterfall Chart

This chart is based on a series of bars that show a cumulative value of sequential positive and negative values. Each bar starts where the previous one ended, which allows you to see the value’s behavior after a period. In the Telerik component it is also possible to display columns with total or partial values:

Use cases for this chart include when you need to analyze cash flow over months, for budget and profitability analysis, among others.

Sankey Chart

This Telerik component TelerikSankey displays a set of entities and links to represent the flow between them. In addition, the thickness of each link shows the value, allowing users to easily see the entity-to-value flow:

Because of its flexibility, the Sankey chart is ideal for analyzing traffic distributions, breaking down budgets or redistributing resources.

Stock Chart

To use a stock chart, you should use the TelerikStockChart component, which is part of the Telerik UI for Blazor suite. This component is specifically designed for financial time series data. It supports types we’ve already covered such as candlestick and OHLC, with the difference that it includes a navigator to select a specific time period:

This component is useful when you need to navigate time periods in financial data or to create trading dashboards or investment analysis.

Trendline Chart

The last chart type we’ll analyze is the trendline type. This chart isn’t really a chart type where you define its own data; rather, it takes the data from an existing chart to reveal the trend of the data. The component supports several trend types: linear, average, exponential, logarithmic, among others:

Some use cases for this chart type include revealing the overall direction of the data, smoothing fluctuations, performing forecasts, as well as conducting statistical analyses and validating patterns over time.

Decision Tree for Selecting the Best Chart

After having analyzed the different types of charts that we can find in the Telerik UI for Blazor suite, I want to leave you a decision list that can help you select the best chart for your use case:

Comparison & Trends
- If there is time or continuity -> Use a line, area or scatter line chart
- If there are simple categories -> Use a column or bar chart
- If there are long category names -> Use a bar chart
- If you want to show underlying trends -> Add a trendline

Composition (Parts of a Whole)
- For a single series -> Use a pie or donut chart
- For multiple series -> Use a donut chart
- For flows between domains -> Use a Sankey diagram

Relationships & Distribution
- With 2 variables -> Use a scatter plot
- With 3 variables -> Use a bubble chart
- For 2D density -> Use a heatmap
- For multidimensional profiles -> Use a radar chart (area, column or line)

Ranges & Cumulative Changes
- To show the effect of changes -> Use a waterfall chart
- For continuous ranges -> Use a range area chart
- For time durations -> Use a range bar chart
- For vertical ranges -> Use a range column chart

Specialized Data
- For financial/price movement -> Use a candlestick or stock chart

This list should help you make a better decision about when to use each type of chart.

Conclusion

Throughout this article, we have taken a tour of the different types of charts that we can find in the Telerik suite for Blazor. This was aimed at understanding the structure of each one, how it looks and which are the best scenarios for their use. After this information, it’s your turn to present your users’ data in different ways, always keeping in mind that their interpretation should be as simple as possible.

Ready to experiment with all these chart types? Telerik UI for Blazor comes with a free 30-day trial:

Try Now

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.

You can access the code used in this example on GitHub.

The Blazor Project Template Approach

Let’s start simple by looking at the loading indicator used in the default Blazor project template.

@if (forecasts == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <table class="table">
    <!-- code omitted -->
    </table>
}

This very basic approach uses an if-else statement to determine the component state and a simple paragraph HTML element to render a “Loading…” text.

There are a few flaws with this overly simplistic solution:

1. Static text does not provide a modern user experience. In a world where attention spans are short and user experience is important, we should use a spinner animation or another element that conveys the feeling of progress.

2. Static text does not act as a placeholder with the correct size. In the example above from the Weather page of the default Blazor project template, the Loading text has a much lower height compared to the fully rendered table containing the weather information.

3. A code snippet like the Loading text above is not reusable. It doesn’t include a CSS class to make it look consistent across pages, nor is it reusable. Copying the same snippet across multiple pages will yield different user experiences if one of the developers decides to alter its design in the future.

A Basic Reusable Loading Indicator Component

Let’s build a basic reusable LoadingIndicator component. First of all, we want to internalize the loading state.

This helps us get rid of the if-else statement in each page component. We want the code in the page component to look like this:

<LoadingIndicator IsLoading="@(forecasts == null)">
    <table>
    <!-- code omitted -->
</LoadingIndicator>

Let’s start with the component template:

@if (IsLoading)
{
    <div class="loading-indicator" Style="@($"height: {Height}px")">
        <div class="circular-progress" />
        <div class="progress-text">Loading...</div>
    </div>
}
else
{
    @ChildContent
}

We internalized the if-else statement handling the loading state. During loading, we display a loading indicator, which consists of three divs.

We show the child content (in the example above, an HTML table) when the loading state is false.

Now let’s look at the code section:

@code {
    [Parameter]
    public required int Height { get; set; } = 96;

    [Parameter, EditorRequired]
    public required bool IsLoading { get; set; }

    [Parameter, EditorRequired]
    public RenderFragment? ChildContent { get; set; }
}

Here, we have three component parameters. Let’s go through them one by one.

The Height parameter is optional (notice the absence of the EditorRequired attribute). By default, the height of our loading indicator is 96 pixels. However, we can provide a custom value to this property for each instance on a page component.

The IsLoading parameter decides whether the loading indicator or its children are rendered.

The ChildContent parameter of type RenderFragement allows us to wrap the content of the page into the LoadingIndicator for a good developer experience.

Now that we have the component template and its behavior, we need the CSS styling:

.loading-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 8px;
}

.circular-progress {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(0, 0, 0, 0.1);
    border-top: 3px solid #3b82f6;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.progress-text {
    font-size: 1rem;
}

/* Spinner animation */
@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

CSS, unfortunately, most of the time requires a lot of code to implement rather simple things.

For example, here, we have the loading-indicator class, which contains a flex layout and its layout properties. It basically takes up the entire available width and places its children one below the other.

Next, we have the circular-progress class, which defines the circle’s layout. It’s the base of our animation.

The progress-text class is simple for now and only sets the font-size.

Last but not least, we have an animation definition using keyframes. We use the named animation in the circular-progress class’s animation property.

Let’s see how it works in action.

I set the delay in the Weather page component to 2 seconds so that I can see the full loading animation for testing.

// Simulate asynchronous loading to demonstrate a loading indicator
await Task.Delay(2000);

As soon as the data is loaded from the screen, the IsLoading property of the LoadingIndicator component will return false. Therefore, instead of the circular progress animation, we will see the pages’ content.

Hint: One of the advantages of component-oriented web frameworks such as Blazor is that we can reuse this LoadingIndicator component and therefore hide the large CSS definition and the component behavior behind this LoadingIndicator component.

Professional Integrated Solutions

While we definitely provided a more useful component and a better user experience with our reusable LoadingIndicator component, there is still room for improvement.

As application developers, we want to provide the best solutions for business problems while providing the best possible user experience.

We should focus on delivering value to our business rather than wasting time implementing generic components. Standing on the shoulders of giants is the right call.

There are professional user interface libraries, such as Progress Telerik UI for Blazor. Developers of those libraries invest much more time into building those reusable components than we are able to spend in our projects.

Component libraries like Telerik UI for Blazor integrate sophisticated loading indicators and loading state handling into higher-level components, such as AutoComplete fields, Grid layouts and ListViews, and more advanced components like TreeList and TreeView.

Conclusion

Handling the loading state and providing a good user experience during asynchronous data fetching operations is crucial in modern web development.

The default Blazor web application project template provides a simple solution that lacks in multiple regards.

We implement a custom LoadingIndicator component, which improves the solution from the default project template by extracting logic and behavior into a reusable component. Using its Height property, we can make the loading indicator take the same space as the rendered elements, thus preventing layout shifts. It’s a step in the right direction.

However, if possible, I usually prefer using one of the brilliant, existing solutions over my handmade approach. For example, the Loader and LoaderContainer components provide a great developer and user experience for building modern Blazor web applications.

Telerik UI for Blazor comes with a free 30-day trial, so you can explore these plus 120 other components for yourself.

Try Now

Imagine this: instead of clicking through a travel app—picking dates, applying filters, scrolling results, opening tabs to compare—you type one sentence:

“I want to get a flight from London to New York. Give me a plan as a dashboard with important data about the flight.”

What comes back is more than a paragraph explaining the basics. It’s a whole interface with a structured results grid showing airline, price, duration and departure time. It’s a comparison view so you can weigh your options, all assembled on the spot. No predefined screen needed. Just intent and a UI that responds to it.

That is the experience shift A2UI creates. And it is coming to Progress Telerik UI for Blazor.

Don’t miss the live demo! Register for the Telerik and Kendo UI 2026 Q2 release webinar on June 16 to see A2UI transforming intent into interactive Blazor UI in real time.

What Is A2UI?

A2UI (Agent-to-User Interface) is an open protocol introduced by Google that defines a standard way for AI agents to communicate their intent to generate a user interface. Think of it as a universal UI language that agents can speak to any client application.

Rather than describing insights, AI describes interfaces. The application then renders those interfaces using its own UI framework, styling and interaction model.

In this model:

• AI facilitates the UI composition layer. It reasons over context and emits a structured definition—a declarative JSON format describing which components to render and what data to populate them with.
• The application remains the source of truth for rendering and behavior. The client maintains a catalog of pre-approved components.
• The user experiences fully interactive interfaces generated from intent. Not static mockups. Not screenshots. Real components with real data.

A2UI effectively shifts AI from being a narrator to being a composer of user experiences.

A2UI in Telerik UI for Blazor

Within Telerik UI for Blazor, A2UI introduces an additional layer on top of the existing component ecosystem. Components are no longer only developer-defined. They become composable primitives available for AI-driven interface construction.

In effect, the library becomes a structured palette for dynamic interface generation. Your design system stays intact. Your business logic does not move.

Why A2UI Makes Sense: Agents Think in Text; Users Work in Interfaces

AI is rapidly reshaping how software is built and consumed. Over the past year, we have seen an acceleration of copilots, agents and large language models capable of reasoning over data, executing workflows and assisting users in ways that were previously out of reach.

Yet, one fundamental limitation remains.

AI is exceptionally good at producing text. But applications are not built around text. They are built around interfaces.

People perceive and interact more easily through visuals—dashboards, forms, grids, charts, filters, and workflows they can interact with directly. They want to see, explore and act. This is why A2UI has so much potential.

Modern enterprise applications have long assumed that UI is static. Developers define screens. Users adapt to them. AI, when introduced, typically sits alongside the application as a conversational layer rather than becoming part of the interface itself.

A2UI introduces the possibility to change that. When AI systems generate structured UI definitions that adapt to context and data, rather than just a block of text, we aren’t just enabling what the system says, but what the user sees.

A single request like “analyze my sales performance this quarter” can translate into multiple valid experiences depending on who is asking and why—an executive KPI dashboard, a detailed filterable data grid, a chart-centric exploratory view or a hybrid analytical workspace. The underlying data is the same, but the intent is different. And AI is uniquely positioned to interpret it.

A2UI in Practice

Use cases for A2UI implementation are as myriad as you can imagine.

Let’s go back to the example of booking a flight. Instead of tedious stepping through pages, one by one, filling and selecting values, you can type: “I want to fill a form for booking a flight from London to New York.”

The AI interprets that intent and emits a UI definition—a JSON description of a data form (pre-filled with data where possible and using the right components), a results grid (columns: airline, price, departure, duration, stops) and a comparison chart with the top options.

The Blazor renderer receives that definition and displays the interface using real Telerik UI for Blazor components. The Grid, the Form, the Charts—all themed and all enabling you to interpret and visualize data as naturally as possible.

Different users expressing the same intent might receive different representations depending on context, preferences or available data. Maybe one person gets a chart-first view and another gets a table. That is dynamic UI generation in practice.

A Step Further: Building on an Emerging AI Ecosystem

The flight-booking scenario reflects a much broader shift happening across the AI ecosystem. Applications are moving from static interactions toward dynamic, personalized, agent-driven experiences where intent, reasoning and UI composition are tightly connected.

This is where the A2UI approach becomes part of a larger architecture rather than a standalone concept.

In the current implementation, the demo builds on complementary layers that are increasingly relevant in modern AI systems:

• AI interprets user intent, translating natural language into structured goals and constraints.
• The Microsoft Agent Framework orchestrates reasoning and execution, coordinating tools, workflows and multi-step decision-making across systems.
• AG-UI provides the interaction contract for agent-driven interfaces, so UI intent and structure are expressed in a consistent, agent- and renderer-agnostic way.
• The A2UI layer for Telerik components for Blazor defines the structure of the user experience, describing how the outcome of that reasoning should be expressed as a dynamic, interactive UI rather than plain text.
• Telerik UI for Blazor renders the final experience, materializing that structure using enterprise-grade components such as grids, forms and charts with full theming, interactivity and performance.

Together, these components enable AI systems to move beyond conversational output and participate directly in application workflows. Instead of producing text responses, agents can reason over data and shape the user experience itself.

Telerik A2UI Renderer for Blazor—Availability: Preview

A2UI is still an emerging concept and ecosystem. Standards, protocols, component contracts and implementation patterns are actively evolving as the industry explores what dynamic UI generation should look like in production applications.

We are approaching A2UI with the same mindset. The feature is still experimental. As the implementation is evolving, feedback is actively shaping its direction.

During this phase, we are actively observing real-world usage patterns, gathering feedback from early adopters and refining how intent translates into UI structure. Specifically, we are exploring where AI-generated UI delivers real value and how much control users need to retain over generated interfaces.

The A2UI specification itself is at v0.8 stable, and the ecosystem around it—transport layers like AG-UI, Agent Frameworks from Microsoft (hint: we are exploring those too) and others and renderers for different frameworks—is all moving quickly. This is the right moment to explore the pattern, give us feedback and understand how the renderer model fits your architecture. And get to the next level of creating great UI and UX experience.

The current A2UI Preview for Telerik UI for Blazor focuses on a constrained but high-impact set of building blocks:

• Input components – text fields, date pickers, numeric inputs, dropdowns
• Data Grid – data exploration, visualization and comparison
• Charts – visual representations that adapt to what the data warrants

These are intentionally chosen because they represent the backbone of most business applications. This Preview is opinionated by design. Rather than attempting to support every UI pattern, it focuses on exploring how intent can reliably map to structured, usable interfaces. Go straight to the demo, click and prompt around on an easy-to-follow use case and get in touch with feedback.

If your organization is exploring AI-powered applications in 2026, this is the ideal time to start a pilot. Use our Support system to tell us more about your use case or drop us a line in our Blazor Feedback Portal or in the Telerik Forums.

The goal isn’t to replace your existing application. The goal is to explore how AI can augment it through interfaces that adapt to the user, the context and the task at hand.

WebMCP vs. A2UI: What’s the Difference?

If you’ve been following our recent AI initiatives, you may have also seen our Preview support for WebMCP, which enables AI agents to interact with applications through standardized tools and capabilities.

While both WebMCP and A2UI are part of the broader movement toward AI-native applications, they address different parts of the big picture.

You can think of them as complementary layers: WebMCP focuses on how AI agents interact with applications. A2UI focuses on how applications interact with users through AI-generated experiences.

Together, they create a powerful foundation for AI-native applications and are an extension of our commitment to great UI and UX.

With WebMCP, an AI agent can discover available actions, execute workflows, retrieve data and interact with business functionality exposed by an application.

With A2UI, that same agent can dynamically generate forms, grids, charts, dashboards and other user experiences that help users understand, validate and act on the results.

An AI agent can use WebMCP to retrieve information, execute actions and understand business capabilities, while A2UI can transform those results into dynamic user experiences built with Telerik UI for Blazor components.

To learn more about our WebMCP Preview support, check out our blog post: Telerik and Kendo UI Meet WebMCP.

The current capabilities represent only the beginning. The beauty of dynamic UI generation is that the number of possible use cases is virtually unlimited. AI maps context and intent, while Telerik UI for Blazor provides the components that bring those experiences to life.

Want to shape how A2UI support for Telerik UI for Blazor develops? Share your thoughts on the Blazor Feedback Portal or in the Telerik forums. We are reading everything.

And don’t forget to join the webinar for a live demo of A2UI.

If you’ve worked with .NET for any length of time, you’ve made peace with the .sln file. Not because it’s good (it isn’t) but because it’s the format we have. It’s verbose, GUID-laden and a reliable source of merge conflicts on Friday afternoons. It’s the format we tolerate, not the one we’d choose.

The good news is there’s a new format in town. The .slnx format is Microsoft’s XML-based replacement for the venerable .sln file, and it has been steadily gaining first-class support across Visual Studio, the .NET CLI, MSBuild and Rider over the last year. As of .NET 9.0.200 and Visual Studio 17.13+, you can use it for real projects without crossing your fingers. And as of .NET 10, dotnet new sln defaults to .slnx.

In this post, let’s talk about what .slnx is, why it exists, what it gets right and where you might get tripped up.

A Quick SLN Retrospective

To appreciate why we’re getting a new format, let’s remember what we’ve been working with. Here’s a typical fragment of an .sln file.

Microsoft Visual Studio Solution File, Format Version 12.00
# Visual Studio Version 17
VisualStudioVersion = 17.10.34804.81
MinimumVisualStudioVersion = 10.0.40219.1
Project("{FAE04EC0-301F-11D3-BF4B-00C04F79EFBC}") = "MyApi", "MyApi\MyApi.csproj", "{F95781B3-A973-4D19-9585-974DA143E6A1}"
EndProject
Project("{2150E333-8FDC-42A3-9474-1A3956D46DE8}") = "Solution Items", "Solution Items", "{8FC526EA-218B-4615-8410-4E1850611F38}"
ProjectSection(SolutionItems) = preProject
Directory.Build.props = Directory.Build.props
EndProjectSection
EndProject
Global
GlobalSection(SolutionConfigurationPlatforms) = preSolution
Debug|Any CPU = Debug|Any CPU
Release|Any CPU = Release|Any CPU
EndGlobalSection
GlobalSection(ProjectConfigurationPlatforms) = postSolution
{F95781B3-A973-4D19-9585-974DA143E6A1}.Debug|Any CPU.ActiveCfg = Debug|Any CPU
{F95781B3-A973-4D19-9585-974DA143E6A1}.Debug|Any CPU.Build.0 = Debug|Any CPU
{F95781B3-A973-4D19-9585-974DA143E6A1}.Release|Any CPU.ActiveCfg = Release|Any CPU
{F95781B3-A973-4D19-9585-974DA143E6A1}.Release|Any CPU.Build.0 = Release|Any CPU
EndGlobalSection
EndGlobal

Oof. The SLN format is a custom Microsoft format that has some weird quirks. Every project gets a GUID. Solution folders are themselves projects with their own GUIDs. Configuration combinations even get cross-multiplied so a four-project solution with two configurations and two platforms produces 16 lines of nearly identical setup.

The pain points are well known to us all. If even two developers add a project at the same time, both edit GlobalSection(ProjectConfigurationPlatforms), and Git throws its hands up.

GUIDs, bless their hearts, are not for human eyes. It’s a nightmare trying to figure out which project owns which configuration block. And outside of Visual Studio, generating or modifying .sln files reliably often requires a tool like slngen because no one wants to write the parser themselves.

This is what the .slnx tries to fix.

Looking Inside the .slnx

Here’s the same project, but expressed as .slnx.

<Solution>
  <Folder Name="/Solution Items/">
    <File Path="Directory.Build.props" />
  </Folder>
  <Project Path="MyApi/MyApi.csproj" />
</Solution>

Notice how we have no GUIDs, no cross-multiplied configuration table and no EndGlobalSection markers. Even a developer who is foreign to the .slnx format can read it and immediately understand it.

Expanding a little, here’s an example from a layered solution.

<Solution>
  <Folder Name="/Solution Items/">
    <File Path=".editorconfig" />
    <File Path="Directory.Build.props" />
    <File Path="Directory.Packages.props" />
  </Folder>
  <Folder Name="/src/">
    <Project Path="src/Application/Application.csproj" />
    <Project Path="src/Domain/Domain.csproj" />
    <Project Path="src/Infrastructure/Infrastructure.csproj" />
    <Project Path="src/Web.Api/Web.Api.csproj" />
  </Folder>
  <Folder Name="/tests/">
    <Project Path="tests/UnitTests/UnitTests.csproj" />
    <Project Path="tests/IntegrationTests/IntegrationTests.csproj" />
  </Folder>
</Solution>

If you compare this to the equivalent .sln, you’re looking at maybe a third of the lines, with none of the GUID overhead. If you need to override configurations for a specific project (like, say your test project shouldn’t build in Release mode) you can express that with a Configurations element on the project. In reality, most projects won’t need it at all. If you do, you can review examples in microsoft/vs-solutionpersistence and its samples wiki.

If the .slnx looks similar to a .csproj, that’s intentional. Microsoft’s reasoning is that XML is already the format the rest of MSBuild speaks, the team already had a parser for it, and features like comments and attributes are first-class citizens. A JSON or YAML format might have been trendier, but it would have forced the team to invent semantics for things .csproj already has solved problems for.

Migrating Existing Projects

Existing projects are a different conversation. Here’s what you get by migrating, and how to do it cleanly.

• Merge conflicts are more manageable. Because there are no GUIDs that change every time you touch a project, the diffs you see in PRs are meaningful. If you add a project, you see one line added. Move a project to a different folder, and you see the path change. Nobody has to play GUID detective.
• You can reasonably edit by hand. You’ll never want to hand-edit a .sln unless it’s an emergency. With .slnx, opening it in your editor of choice is perfectly reasonable. I’ve fixed broken solution layouts in a text editor faster than Visual Studio would have let me click through the dialogs.
• Tooling has standardized what a solution is. Microsoft has open-sourced the parser as the Microsoft.VisualStudio.SolutionPersistence NuGet package. This means MSBuild, the .NET CLI and third-party tools are all reading the same file the same way.

Based on the official dotnet sln reference, the actual conversion is one command.

dotnet sln migrate

If you run this in a directory with an .sln file, you’ll get an .slnx file beside it. From Visual Studio, you can also use File -> Save Solution As… and pick XML Solution File (.slnx) from the dropdown. Rider supports a similar flow.

You don’t want to keep both files in the repository. The dotnet sln commands don’t reliably pick the right one when you have both, and it’s easy for the two to get out of sync as people add or remove projects. Pick when to cut over, delete the old file and move on. While there is a community tool called dotnet-sln-sync that helps, that should only be used temporarily and not long term.

As you convert over, here’s a quick checklist to avoid any headaches:

• Verify your global.json allows the right SDK. You need at least .NET 9.0.200 for full CLI support. If your global.json pins to something older, the migrate command won’t work.
• Check your CI build agents. If you’re on self-hosted Azure DevOps agents, for example, confirm they’re running an SDK new enough to handle .slnx.
• Audit your pipelines. Anywhere you have references directly to .sln, update the path. Wildcard references like **/*.sln will miss the new file. If you are using templates where you have a mix of .sln and .slnx, a pattern like **/*.sln* will be useful.
• Look out for dependent tools. Tools like slngen don’t yet support .slnx at the time of this post (you can track the issue here). If you’re reliant on a tool outside of the Microsoft umbrella, check before you migrate.

Some Rough Edges

The .slnx format is no longer “preview” in any practical sense, but the ecosystem around it is still catching up.

• Visual Studio file association. Double-clicking a .slnx file doesn’t open Visual Studio by default. You can fix this with a file association or just open it from inside the IDE.
• C# Dev Kit in VS Code. It works, but you may need to set dotnet.defaultSolution to the path of your .slnx if it isn’t auto-detected.
• Globbing. You can’t write <Project Path="src/**/*.csproj" /> and have it discover projects automatically. The team’s reasoning, captured in the globbing feature request, is that globbing slows down solution loading on large repos because Visual Studio has to scan the file system before it can render anything. That makes sense, but I think plenty of us would happily trade a slower cold load for never having to add another project entry by hand.
• Third-party tools. Anything that parses .sln directly needs to update. Hopefully the open-source parser library accelerates that, but you’ll find holdouts.

None of these are dealbreakers for new projects. For older codebases with a lot of tooling baked in, it’s worth doing a small pilot before flipping the whole repo.

Wrapping Up

The .slnx format isn’t a revolutionary feature. It doesn’t change how you write code, it doesn’t add new build capabilities, and it doesn’t speed up your application. It is, however, one of those quality-of-life upgrades that quietly results in fewer merge conflicts, less time staring at GUIDs, less friction in your CI pipelines once they’re set up.

If you’re starting a new .NET solution, just use .slnx from day one. And with .NET 10, you’ll get it without lifting a finger. If you’re maintaining an existing .sln file, plan a migration when you have a slow week, audit your tooling and cut over cleanly. The format isn’t going anywhere, and getting ahead of the transition is easier than waiting for some downstream tool to force your hand.

Thanks for reading, and happy coding!

Further Reading

• New, simpler solution file format
• Introducing support for SLNX in the .NET CLI
• microsoft/vs-solutionpersistence
• dotnet sln command reference
• .NET 10 breaking change: dotnet new sln defaults to SLNX

I remember exactly where I was when Visual Studio 2026 dropped back in November: at my desk, watching the Microsoft launch event with one eye and refactoring an IDataReader implementation with the other.

The keynote was typical Microsoft. There was a lot of “reimagining how developers work.” There was, of course, a slide with the word “intelligent” on it at least eight times. And the word “Copilot” appeared on screen so many times I started to wonder if Microsoft’s marketing team had been replaced by an infinite loop that just prints Copilot forever.

Then I installed the thing.

The first week with VS 2026 was the most disoriented I’ve felt in a Visual Studio release since the menu bar went all-caps in 2012 and I spent a month reading angry forum threads about it.

In 2026, I was tripped up by the just-slightly different Solution Explorer, the Copilot panel that lives where my Test Explorer used to live, the general Copilot onslaught and the interesting design choices. I felt like everything on my desk had been moved slightly to the left.

That was temporary. As with most new technology, eventually things felt normal again. I was finding workflows that genuinely beat my old ones and I stopped noticing the cosmetic changes. So here’s where I am six months later … same machine, same kind of solution I work in every day, just a different IDE around it.

We meet again, old friend. At least the menu bar isn't in caps.

Six months in, I feel comfortable. Six months is long enough to live with the rough edges, and find what’s genuinely useful. So I’m here to share them with you.

As an aside: to keep my sanity intact, I’m going to use the word “Copilot” only when I absolutely have to. Microsoft has decided that every feature in Visual Studio is now Copilot-something … Copilot Chat, Copilot Edits, Copilot Agent, Copilot Workspaces, GitHub Copilot, Copilot for Azure, Copilot for Pull Requests and so on. So when I say “the agent” or “the AI thing in the sidebar,” you’ll know what I mean.

The Performance Story Is Real

I’ll lead with this, mostly because it was the thing I was most skeptical about. Every Visual Studio release for the past decade has touted “X% faster solution load!” and, to me, every Visual Studio release for the last decade has felt (roughly) the same speed once you test it with your beefy codebase.

VS 2026 is genuinely faster. Not “marketing-faster” … actually faster. The 64-bit-everywhere story that started with VS 2022 has matured into something that handles large solutions without the periodic “please hold” pauses we’re all familiar with. In Microsoft’s VS2026 launch post, they say they cut hangs by over 50%.

The IntelliSense responsiveness is the part I notice most. Typing a . after an object now produces suggestions roughly when I expect them to appear. A low bar? Definitely, but previous versions frequently limboed under it.

Agent Mode Is Useful, When You Pick the Right Job

GitHub Copilot’s agent mode in Visual Studio 2026—or, as Microsoft prefers, GitHub Copilot Agent Mode powered by Copilot in Visual Studio with Copilot—has improved tremendously since Visual Studio 2022. Six months in, I think it’s genuinely useful, but for a specific set of tasks.

In my experience, it works well with scoped, well-defined refactors. If I want to ask: Hey Copilot, add a new health check for this Cosmos container and follow the pattern in my existing health checks. (Yes, I sometimes talk to Copilot like a home assistant.) Or: Take my new controller and add the same logging pattern as the others in this project. And, after discovering some methods in a codebase with 11 nested if statements: Convert this for loop to a LINQ expression but keep it readable. It’s effective enough that I’ve stopped writing this kind of code by hand.

In my experience, things get harder when the agent needs to understand why something exists. The agent will happily refactor a piece of code that only exists because of, say, a weird third-party integration constraint from 2018, and the resulting code will be cleaner, more maintainable … and broken in production. Did I actually break something in production? Not this time. But I would have.

To be fair to the agent, this is exactly where it needs context. It doesn’t read minds (although it sure does try). Here’s a pattern I’ve leaned on.

// AGENT NOTES:
// - This service must remain synchronous; the upstream caller cannot
//   be made async without a contract change.
// - The string "PRIME" is required by the third-party integration. 
//   I don't like it but they won't change it. Do not "improve" it 
//   to PersonType.Prime.ToString().
// - Cancellation tokens must be forwarded; do NOT pass `default`.

When the agent has clear context like this, it really delivers. Below is the agent producing two new health check files plus a registration update in Program.cs, all from one prompt asking it to mirror an existing pattern. The result is a careful refactoring with the right substitutions swapped in. That’s exactly the kind of work I’m happy to hand off.

The agent panel and one of the two generated files. Three files changed, zero hand-written by me. (My team is thankful for the latter.)

This sounds like babysitting, and it is. Welcome to AI-driven development, my friends. The 10 seconds of setup saves me from a 10-minute cleanup later. When the prep is solid, the result is solid.

For more information on custom instructions, check out the Microsoft documentation.

Test Explorer Isn’t Frustrating

In my experience, the Test Explorer seems to be much improved in Visual Studio 2026. If I had to sum it up in previous versions, I’d say “it’s fine” … after all, do we ever get jazzed about tests? In previous releases, I kept saying “it’s fine” until I had a few thousand tests, at which point it started getting opinionated about which tests to run.

The new version is faster, the filtering predictably works, and it doesn’t lose track of which tests are running when you switch branches mid-execution. Try it yourself. Run your full test suite and watch the Test Explorer not embarrass itself. It’s a small joy.

One of those things you don't notice until it stops getting in your way.

Better Git Integration

Visual Studio’s Git tooling has historically been one of the IDE’s more underwhelming features. Until recently, my workflow was:

1. Make code changes in Visual Studio.
2. Run Git commands in my terminal (or a third-party tool like GitHub Desktop)
3. Ignore the IDE’s Git panel entirely.

With VS 2026, I’m finally doing real Git work inside the tool. The new staging interface is better. The conflict resolution UI is also better than it used to be. The “please show me an actual diff and not a vague summary” feature is good.

Now, it’s no GitKraken and it doesn’t try to be. But it’s good enough that I no longer switch over to a terminal for routine operations, and that works for me.

Three-way merge view, in the IDE I'm already in. Rejoice!

Hot Reload That Reloads More Often

Hot Reload has been one of those features that worked on Friday afternoons if I said “please work” (especially for ASP.NET Core). Any other time, I’d change a method body, save, watch the IDE think very hard about it, and then get: “Hot Reload was unable to apply your changes. Restart the application?”

The “hot” in “Hot Reload” was stretching the truth at times (with the understanding that getting it right isn’t as simple in .NET as it is for languages like JavaScript).

With VS 2026, I now reach for it instinctively instead of cynically. Method-body edits in controllers, services and Razor pages just apply. You change a string in a controller, hit Save and see the change. You know, the way it was supposed to work in 2021. The way it kind of worked in 2023. The way it now actually works in 2026.

When Hot Reload can’t apply a change (because the change requires a metadata update or you’ve added a field or whatever the actual reason is), the IDE now tells me clearly why instead of vaguely throwing up its hands. That alone goes a long way. I know whether to keep iterating or to just restart the host.

Debugger Improvements (Especially with Async Traces)

Have you ever stared at an async stack trace and felt your soul leave your body? Just me?

Historically, when an exception bubbled up from somewhere deep in an async/await chain, the stack trace was a wall of MoveNext calls and state machine internals. It was tremendously useful if you wanted to learn about the C# compiler, but not great if you wanted to know which of your methods actually threw.

Things are looking better in Visual Studio 2026. The debugger now stitches together async call chains into something that reads like the call graph you actually wrote. The MoveNext noise is collapsed by default. The original calling method is shown as the parent frame and not buried six levels down. When an exception is thrown inside a Task.WhenAll, you can see which task threw without reverse-engineering the parallel structure.

An async exception, with the actual call chain visible. No MoveNext translation required.

On top of that, conditional breakpoints feel faster to evaluate, and the tracepoints (where you can log a message without breaking) is a one-click affair instead of a buried right-click option.

Small wins. But debugging is the thing I do every day, and small wins on the thing you do every day add up fast.

The Verdict

Look, the Copilot stuff is genuinely impressive. The agent demos at the keynote were the kind of thing that makes you want to fire up the installer immediately. And after six months, I’ll admit that I use it every day.

But Visual Studio 2026 is a genuine step forward for the boring reasons. The performance is real. The Test Explorer doesn’t stress me out. The debugger provides stack traces a human can read. The agent mode handles the kind of work I’d previously do by hand. Those are the wins that show up in my daily work, not the ones that show up in keynote demos.

If you’re on Visual Studio 2022 and wondering whether to upgrade: yes. Ignore the marketing, and let the unglamorous improvements do their job. Six months later, you won’t be excited about Visual Studio 2026 … and that’s exactly the point. You’ll just be working faster.

Form validation is essential when working with data in Blazor applications. Before .NET 10, if you wanted to perform validation of nested objects, you had to take a series of additional steps that could add complexity to your projects. In this article, we will examine the improvements and new features in .NET 10 to solve this problem through a practical exercise. Let’s go!

Understanding the Problem of Nested Validations Before .NET 10

To see the problem when working with nested objects and their validation, let’s create a sample Blazor project. For this demonstration, I am working with a project using the Blazor Web App template configured with Interactive Server rendering globally.

Immediately after creating the project, perform the installation and configuration steps for the Progress Telerik UI for Blazor controls, as we will use them to quickly build modern interfaces.

Creating Models in the Application

Suppose we are building an attendee registration application for a technical event. As a first step, I have defined a class EventRegistration with the following structure:

public class EventRegistration
{
    public Attendee Attendee { get; set; } = new();
    public BillingAddress BillingAddress { get; set; } = new();
    public List<SessionSelection> Sessions { get; set; } = [];

    [Range(typeof(bool), "true", "true", ErrorMessage = "You must accept the terms and conditions.")]
    public bool AcceptTerms { get; set; }
}

The model above has some nested objects, both single objects such as Attendee and a list of type SessionSelection. Likewise, there is a validation on the property AcceptTerms of type Range, which verifies that the value is true.

The model of a Attendee looks as follows:

public class Attendee
{
    [Required(ErrorMessage = "Full name is required.")]
    [StringLength(100, ErrorMessage = "Name cannot exceed 100 characters.")]
    public string? FullName { get; set; }

    [Required(ErrorMessage = "Email is required.")]
    [EmailAddress(ErrorMessage = "Invalid email format.")]
    public string? Email { get; set; }

    [Required(ErrorMessage = "Phone number is required.")]
    [Phone(ErrorMessage = "Invalid phone number format.")]
    public string? Phone { get; set; }

    [Required(ErrorMessage = "Company name is required.")]
    public string? Company { get; set; }

    [Required(ErrorMessage = "Job title is required.")]
    public string? JobTitle { get; set; }
}

The Attendee model has more validation annotations per property, which allow validating each attendee’s information. The project also includes the BillingAddress model to store address information, also featuring validation attributes:

public class BillingAddress
{
    [Required(ErrorMessage = "Street address is required.")]
    public string? Street { get; set; }

    [Required(ErrorMessage = "City is required.")]
    public string? City { get; set; }

    [Required(ErrorMessage = "State/Province is required.")]
    public string? State { get; set; }

    [Required(ErrorMessage = "Postal code is required.")]
    public string? PostalCode { get; set; }

    [Required(ErrorMessage = "Country is required.")]
    public string? Country { get; set; }
}

Finally, the SessionSelection model defines the structure of each session selected by an attendee:

public class SessionSelection
{
    [Required(ErrorMessage = "Session name is required.")]
    public string? SessionName { get; set; }

    [Required(ErrorMessage = "Preference level is required.")]
    public string? Preference { get; set; }
}

The complexity among the previous models will allow us to test the new validation features included in .NET 10.

Initializing Project Data Using a Session Catalog Service

To display mock data in the application, let’s create a SessionCatalog service, where we’ll define a list of sessions:

public class SessionCatalog
{
    public List<string> GetAvailableSessions() =>
    [
        "Keynote: The Future of .NET",
        "Workshop: Blazor Advanced Patterns",
        "Talk: SignalR Real-Time Communication",
        "Workshop: Minimal APIs Deep Dive",
        "Talk: Cloud-Native .NET Applications",
        "Workshop: AI Integration with .NET"
    ];

    public List<string> GetPreferenceLevels() =>
    [
        "High",
        "Medium",
        "Low"
    ];
}

We will register this service in Program.cs as follows:

var builder = WebApplication.CreateBuilder(args);
...
builder.Services.AddSingleton<SessionCatalog>();

var app = builder.Build();

Creating the Graphical Interface

To perform various checks, let’s create a graphical interface using the TelerikForm component. This will enable generating and customizing model-based forms and with many configuration parameters, making it a powerful and useful component for our example. The resulting code looks like this:

@page "/registration"
@rendermode InteractiveServer
@using FormValidationNET10.Models
@using FormValidationNET10.Services
@inject SessionCatalog SessionCatalog

<PageTitle>Event Registration</PageTitle>

<h1 class="mb-4">Event Registration</h1>

<TelerikForm EditContext="editContext"
             OnValidSubmit="HandleValidSubmit">
    <FormValidation>
        <DataAnnotationsValidator />
        <TelerikValidationSummary />
    </FormValidation>
    <FormItems>
        <FormItem Field="Attendee.FullName" LabelText="Full Name" />
        <FormItem Field="Attendee.Email" LabelText="Email" />
        <FormItem Field="Attendee.Phone" LabelText="Phone" />
        <FormItem Field="Attendee.Company" LabelText="Company" />
        <FormItem Field="Attendee.JobTitle" LabelText="Job Title" />
        <FormItem Field="BillingAddress.Street" LabelText="Street" />
        <FormItem Field="BillingAddress.City" LabelText="City" />
        <FormItem Field="BillingAddress.State" LabelText="State / Province" />
        <FormItem Field="BillingAddress.PostalCode" LabelText="Postal Code" />
        <FormItem Field="BillingAddress.Country">
            <Template>
                <label for="country-editor" class="k-label k-form-label">Country</label>
                <div class="k-form-field-wrap">
                    <TelerikDropDownList @bind-Value="registration.BillingAddress.Country"
                                         Data="@countries"
                                         DefaultText="Select a country..."
                                         Id="country-editor" />
                    <TelerikValidationMessage For="@(() => registration.BillingAddress.Country)" />
                </div>
            </Template>
        </FormItem>
        <FormItem Field="AcceptTerms">
            <Template>
                <div class="k-form-field-wrap">
                    <TelerikCheckBox @bind-Value="registration.AcceptTerms" Id="acceptTerms" />
                    <label for="acceptTerms" class="ms-2">I accept the terms and conditions</label>
                    <div>
                        <TelerikValidationMessage For="@(() => registration.AcceptTerms)" />
                    </div>
                </div>
            </Template>
        </FormItem>
    </FormItems>
    <FormItemsTemplate Context="formContext">
        @{
            var items = formContext.Items.OfType<IFormItem>().ToList();
        }

        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">Attendee Information</h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-md-6">
                        <TelerikFormItemRenderer Item="@(items.First(x => x.Field == "Attendee.FullName"))" />
                    </div>
                    <div class="col-md-6">
                        <TelerikFormItemRenderer Item="@(items.First(x => x.Field == "Attendee.Email"))" />
                    </div>
                    <div class="col-md-4">
                        <TelerikFormItemRenderer Item="@(items.First(x => x.Field == "Attendee.Phone"))" />
                    </div>
                    <div class="col-md-4">
                        <TelerikFormItemRenderer Item="@(items.First(x => x.Field == "Attendee.Company"))" />
                    </div>
                    <div class="col-md-4">
                        <TelerikFormItemRenderer Item="@(items.First(x => x.Field == "Attendee.JobTitle"))" />
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white">
                <h5 class="mb-0">Billing Address</h5>
            </div>
            <div class="card-body">
                <div class="row g-3">
                    <div class="col-12">
                        <TelerikFormItemRenderer Item="@(items.First(x => x.Field == "BillingAddress.Street"))" />
                    </div>
                    <div class="col-md-4">
                        <TelerikFormItemRenderer Item="@(items.First(x => x.Field == "BillingAddress.City"))" />
                    </div>
                    <div class="col-md-4">
                        <TelerikFormItemRenderer Item="@(items.First(x => x.Field == "BillingAddress.State"))" />
                    </div>
                    <div class="col-md-4">
                        <TelerikFormItemRenderer Item="@(items.First(x => x.Field == "BillingAddress.PostalCode"))" />
                    </div>
                    <div class="col-md-12">
                        <TelerikFormItemRenderer Item="@(items.First(x => x.Field == "BillingAddress.Country"))" />
                    </div>
                </div>
            </div>
        </div>

        <div class="card shadow-sm mb-4">
            <div class="card-header bg-primary text-white d-flex justify-content-between align-items-center">
                <h5 class="mb-0">Session Selection</h5>
                <TelerikButton OnClick="@AddSession"
                               ThemeColor="@ThemeConstants.Button.ThemeColor.Light"
                               ButtonType="@ButtonType.Button">
                    + Add Session
                </TelerikButton>
            </div>
            <div class="card-body">
                @if (registration.Sessions.Count == 0)
                {
                    <div class="alert alert-info mb-0">
                        No sessions added yet. Click "Add Session" to select the sessions you'd like to attend.
                    </div>
                }
                else
                {
                    @for (int i = 0; i < registration.Sessions.Count; i++)
                    {
                        var index = i;
                        <div class="row g-3 mb-3 align-items-end">
                            <div class="col-md-5">
                                <label class="k-label k-form-label">Session</label>
                                <TelerikDropDownList @bind-Value="registration.Sessions[index].SessionName"
                                                     Data="@availableSessions"
                                                     DefaultText="Select a session..." />
                                <TelerikValidationMessage For="@(() => registration.Sessions[index].SessionName)" />
                            </div>
                            <div class="col-md-4">
                                <label class="k-label k-form-label">Preference</label>
                                <TelerikDropDownList @bind-Value="registration.Sessions[index].Preference"
                                                     Data="@preferenceLevels"
                                                     DefaultText="Select preference..." />
                                <TelerikValidationMessage For="@(() => registration.Sessions[index].Preference)" />
                            </div>
                            <div class="col-md-3">
                                <TelerikButton OnClick="@(() => RemoveSession(index))"
                                               ThemeColor="@ThemeConstants.Button.ThemeColor.Error"
                                               ButtonType="@ButtonType.Button">
                                    Remove
                                </TelerikButton>
                            </div>
                        </div>
                    }
                }
                <TelerikValidationMessage For="@(() => registration.Sessions)" />
            </div>
        </div>

        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <TelerikFormItemRenderer Item="@(items.First(x => x.Field == "AcceptTerms"))" />
            </div>
        </div>
    </FormItemsTemplate>
    <FormButtons>
        <TelerikButton ButtonType="@ButtonType.Submit"
                       ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">
            Submit Registration
        </TelerikButton>
    </FormButtons>
</TelerikForm>

@if (isSubmitted)
{
    <div class="alert alert-success mt-4">
        <h5>Registration Successful!</h5>
        <p>Thank you, <strong>@registration.Attendee.FullName</strong>! Your registration for @registration.Sessions.Count session(s) has been submitted.</p>
    </div>
}

@code {
    private EventRegistration registration = new();
    private EditContext editContext = default!;
    private List<string> availableSessions = [];
    private List<string> preferenceLevels = [];
    private List<string> countries = ["United States", "Canada", "Mexico", "United Kingdom", "Germany", "France", "Spain"];
    private bool isSubmitted;

    protected override void OnInitialized()
    {
        editContext = new EditContext(registration);
        
        availableSessions = SessionCatalog.GetAvailableSessions();
        preferenceLevels = SessionCatalog.GetPreferenceLevels();
    }

    private void AddSession()
    {
        registration.Sessions.Add(new SessionSelection());
    }

    private void RemoveSession(int index)
    {
        registration.Sessions.RemoveAt(index);
    }

    private void HandleValidSubmit(EditContext context)
    {
        isSubmitted = true;
    }
}

Validating Data Before .NET 10

Once we have all the pieces of the project, let’s run it. Let’s do a test by trying to submit the empty form:

In the previous image, you can see that when submitting the form the only error shown is the one indicating that the terms and conditions have not been accepted. However, although all models implement validations, no others are shown.

The reason behind this is that DataAnnotationsValidator in Blazor does not perform validation on nested objects or collections. This has been a known limitation in Blazor since its beginnings, which was addressed using custom recursive validators. Let’s see how .NET 10 helps us solve this problem.

Validating Data Thanks to the New Features in .NET 10

To perform validation of nested objects and collections, the first step you must take is to add in Program.cs a call to the method AddValidation():

var builder = WebApplication.CreateBuilder(args);
...
builder.Services.AddValidation();

var app = builder.Build();

The method AddValidation() registers the services required for the validation system to work.

The next step is to open the main model that contains the hierarchy of submodels and add the attribute [ValidatableType] to the class. In our example, the class is EventRegistration, which will look as follows after the modification:

[ValidatableType]
public class EventRegistration
{
   ...
}

The attribute [ValidatableType] tells the .NET source generator to generate validation logic for the class. Behind the scenes the following steps will be performed:

1. All properties of the decorated class are inspected.
2. Nested objects are detected and the necessary code to recursively validate their validation annotations is generated.
3. Collections are detected and code is generated to iterate through each element, validating their validation annotations.

After applying the previous changes, you will see that now, when submitting the form with empty fields, all errors are displayed correctly:

With these changes, we have correctly enabled full validation of nested objects and collections.

Implementing Cross-field Validation Using IValidatableObject

So far we have been able to apply validation rules at the level of individual properties. However, it is common in complex applications to have rules that involve multiple properties or complex business logic. For these cases, .NET provides the interface IValidatableObject, which in version 10 integrates seamlessly with [ValidatableType].

Let’s perform a check of this type assuming this pair of business rules:

• The user must select at least one session.
• Duplicate sessions are not allowed.

The rules depend on the state of the collection Sessions as a whole. To make it work correctly, let’s modify the class EventRegistration by adding the interface:

[ValidatableType]
public class EventRegistration : IValidatableObject
{
    ...

    public IEnumerable<ValidationResult> Validate(ValidationContext validationContext)
    {
    // 1.
        if (Sessions.Count == 0)
        {
            yield return new ValidationResult(
                "You must select at least one session.",
                [nameof(Sessions)]);
        }
        
        // 2.
        var duplicates = Sessions
            .Where(s => !string.IsNullOrEmpty(s.SessionName))
            .GroupBy(s => s.SessionName)
            .Where(g => g.Count() > 1)
            .Select(g => g.Key)
            .ToList();

        if (duplicates.Count > 0)
        {
            yield return new ValidationResult(
                $"Duplicate sessions are not allowed: {string.Join(", ", duplicates)}",
                [nameof(Sessions)]);
        }
    }
}

In the code above:

1. We validate that at least one session is selected.
2. We look for duplicate sessions.

In case of any error, we return an ValidationResult indicating the error. When running the application, we see the following result if no session is selected:

Now, when duplicate sessions are selected, the following error is shown:

With this, we have created cross-field validation correctly using Blazor.

Improving Validations Using FieldCssClassProvider

At this point we have a project that correctly validates the form information, thanks to the native capabilities of TelerikForm. We can go one step further and modify the project to add visual indicators at the section level that communicate to the user which sections have errors. We can do this thanks to the method EditContext.IsValid(fieldIdentifier) introduced in .NET 10, which allows directly checking whether a field is valid.

To use it, the first thing we will do is create a class that inherits from FieldCssClassProvider. For the demonstration I will create a class called RegistrationFieldClassProvider at the root level of the project that looks as follows:

public class RegistrationFieldClassProvider : FieldCssClassProvider
{
    public override string GetFieldCssClass(EditContext editContext, in FieldIdentifier fieldIdentifier)
    {
        if (!editContext.IsModified(fieldIdentifier))
            return string.Empty;

        var isValid = editContext.IsValid(fieldIdentifier);
        return isValid ? "is-valid" : "is-invalid";
    }
}

In the code above, it checks whether the field has been modified. Next IsValid() is used inside the method GetFieldCssClass to check if the field has associated validation messages. Finally, Bootstrap classes are returned that will provide feedback to the user about the validity of the sections.

To achieve this, we will make the card headers change color according to the state of their fields by modifying Registration.razor as follows:

1. Add the event OnValidSubmit to TelerikForm:

<TelerikForm EditContext="editContext"
             OnValidSubmit="HandleValidSubmit"
             OnInvalidSubmit="HandleInvalidSubmit">

2. Find the h5 elements that reference Attendee Information and Billing Address, and modify their container div as follows:

<div class="card-header @GetAttendeeHeaderClass()">
    <h5 class="mb-0">Attendee Information</h5>
</div>
...
<div class="card-header @GetBillingHeaderClass()">
    <h5 class="mb-0">Billing Address</h5>
</div>

3. Modify the code section by adding the following changes:

@code {
   ...
    private bool hasValidated;

    protected override void OnInitialized()
    {
        editContext = new EditContext(registration);
                
        editContext.SetFieldCssClassProvider(new RegistrationFieldClassProvider());
        editContext.OnValidationStateChanged += (_, _) => StateHasChanged();        

        availableSessions = SessionCatalog.GetAvailableSessions();
        preferenceLevels = SessionCatalog.GetPreferenceLevels();
    }
    
    private bool IsFieldValid<T>(Expression<Func<T>> accessor)
       => editContext.IsValid(FieldIdentifier.Create(accessor));

    private string GetAttendeeHeaderClass()
    {
        if (!hasValidated) return "bg-primary text-white";

        bool allValid = IsFieldValid(() => registration.Attendee.FullName)
            && IsFieldValid(() => registration.Attendee.Email)
            && IsFieldValid(() => registration.Attendee.Phone)
            && IsFieldValid(() => registration.Attendee.Company)
            && IsFieldValid(() => registration.Attendee.JobTitle);

        return allValid ? "bg-success text-white" : "bg-danger text-white";
    }

    private string GetBillingHeaderClass()
    {
        if (!hasValidated) return "bg-primary text-white";

        bool allValid = IsFieldValid(() => registration.BillingAddress.Street)
            && IsFieldValid(() => registration.BillingAddress.City)
            && IsFieldValid(() => registration.BillingAddress.State)
            && IsFieldValid(() => registration.BillingAddress.PostalCode)
            && IsFieldValid(() => registration.BillingAddress.Country);

        return allValid ? "bg-success text-white" : "bg-danger text-white";
    }

    ...

    private void HandleValidSubmit(EditContext context)
    {        
        hasValidated = true;        
        isSubmitted = true;
    }
        
    private void HandleInvalidSubmit(EditContext context)
    {
        hasValidated = true;
    }
}

In the code above, I added the field hasValidated to check if the form has been submitted. I also modified OnInitialized by adding the handler for the event OnValidationStateChanged, which allows the UI to update reactively. I also added the helper IsFieldValid<T> and the methods GetAttendeeHeaderClass and GetBillingHeaderClass. This is the result:

With this, we have managed to give the user better feedback about the sections they need to complete before proceeding.

Conclusion

Throughout this article, we have explored the new features available in .NET 10 that will undoubtedly help you manage forms with nested objects and lists. We’ve also looked at how to perform cross-validations and, finally, the process of carrying out more complex validations by checking data in sections.

Now it’s your time to implement these new features in your own projects and provide better feedback to your users.

In the world of web development, there are scenarios where you need to receive real-time information, such as notifications about an event, server metrics or live logs. One possible solution to achieve this is the use of Server-Sent Events (SSE). With the arrival of .NET 10, implementing this type of solution has become much easier, so let’s see how to integrate this web standard into your projects.

What Are Server-Sent Events?

The Server-Sent Events (SSE) are not a new technology. Their origins date back to around 2006, and they are a web standard that allows data to be sent to clients continuously using a persistent HTTP connection.

If you wonder the difference compared to other similar technologies, we can make a comparison:

• SSE vs. Polling: In the case of polling, the direction goes from the client to the server, using the HTTP protocol. We can see it as a client asking the server if there are updates at certain intervals. It involves low implementation complexity.

• SSE vs. WebSockets: With WebSockets there is bidirectional communication. It involves high complexity and is ideal for scenarios like video games, chats, etc. It works over the WS protocol.

• SSE vs. SignalR: SignalR also establishes bidirectional communication, with medium implementation complexity. It allows the use of binary protocols, which makes it a very good option for scalable enterprise apps. It uses variable protocols.

Analyzing the above, we can conclude that SSE is ideal when the data flow is unidirectional, you need it to work over the HTTP protocol and it must be easy to implement.

How Does the SSE Protocol Work?

The workings behind the scenes of the SSE protocol, in broad terms, are as follows: a server SSE endpoint needs to send an HTTP response of the type Content-Type: text/event-stream. The response looks similar to the following:

event: app-event
data: {"id":1,"time":"10:30:45","level":"Info","source":"OrderService","message":"Order #1234 placed successfully"}

In the code above, there are some fields we should pay attention to:

• event: Specifies the name of the event
• data: Is the content of the message
• id: Identifier used to perform a reconnection if needed

What’s New in .NET 10 for SSE

The most important update in .NET 10 for working with SSE is that the ability to return a ServerSentEvents using the API TypedResults.ServerSentEvents has been implemented. This means that the method TypedResults.ServerSentEvents<T>() allows converting any IAsyncEnumerable<T> into a formatted SSE stream without needing to do anything else. Tasks like JSON serialization, HTTP headers, connection closing, etc. are handled automatically.

To better understand how it works, let’s create a project using the SSE standard with ASP.NET 10.

Building an SSE Project Using ASP.NET 10

To practice the theoretical concepts covered so far, we’ll create a page that shows a simulation of receiving events from backend services in real time. Using a Progress Telerik UI for Blazor Grid, we’ll perform tasks like filtering, grouping and analysis quickly.

Creating and Configuring the Project

The first thing we’ll do is create a project using the Blazor Web App template, selecting an Interactive render mode of Server and Interactivity location of Global. Next, we’ll follow the official installation guide for Telerik UI for Blazor to configure the project and be able to use the Telerik components.

Creating an EventBroadcaster

For our project, we’ll create an event broadcaster, which in simple terms will be a bus that SSE clients can connect to to consume events, while backend services will use it to publish events. First, we’ll create a record that represents a system event:

namespace SSEDemo.Services
{
    public record AppEvent(int Id, string Time, string Level, string Source, string Message);
}

Next, we will create the class EventBroadcaster which will have the following definition:

public class EventBroadcaster
{
    //1.
    private readonly Channel<AppEvent> _channel = Channel.CreateBounded<AppEvent>(
    new BoundedChannelOptions(100) { FullMode = BoundedChannelFullMode.DropOldest });

    private int _nextId;

    // 2.
    public void Publish(string level, string source, string message)
    {
        var id = Interlocked.Increment(ref _nextId);
        var evt = new AppEvent(id, DateTime.Now.ToString("HH:mm:ss"), level, source, message);
        _channel.Writer.TryWrite(evt);
    }

    // 3.
    public async IAsyncEnumerable<AppEvent> Subscribe(
        [System.Runtime.CompilerServices.EnumeratorCancellation] CancellationToken ct)
    {
        while (!ct.IsCancellationRequested)
        {
            bool hasData;
            try
            {
                hasData = await _channel.Reader.WaitToReadAsync(ct);
            }
            catch (OperationCanceledException)
            {
                yield break;
            }

            if (!hasData) yield break;

            while (_channel.Reader.TryRead(out var evt))
            {
                yield return evt;
            }
        }
    }
}

In the code above, we have the following sections:

1. Sets up the channel where events will be passed, with a queue limit of 100 messages. FullMode = BoundedChannelFullMode.DropOldest allows that if the queue fills up and a new message arrives, the oldest one is removed to make room for the new message.

2. The method Publish is the one that will be used to emit events. Interlocked.Increment allows generating sequential IDs in a safe manner, while AppEvent packages the received data together with the obtained id. Finally the method TryWrite() attempts to write the event to the channel asynchronously.

3. On the other hand, the method Subscribe returns a continuous stream of asynchronous data through the use of IAsyncEnumerable<AppEvent>. Inside its implementation an infinite loop is created that waits for data to be available in the channel. Once an event enters the channel, it is emitted to the consumer. This will happen until the CancellationToken called ct is canceled.

Generating Test Events

To test the bus defined above, we’ll create a service that simulates the activity of multiple services:

public class DemoEventGenerator(EventBroadcaster broadcaster) : BackgroundService
{
    private static readonly string[] Levels = ["Info", "Warning", "Error", "Success"];
    private static readonly string[] Sources =
        ["OrderService", "PaymentService", "InventoryService", "AuthService", "ShippingService"];
    private static readonly string[][] Messages =
    [
        ["Order #{0} placed successfully", "New customer registered", "Product viewed: SKU-{0}"],
        ["High latency detected: {0}ms", "Retry attempt #{0}", "Queue depth above threshold"],
        ["Payment failed for order #{0}", "Database timeout after {0}ms", "Service unreachable"],
        ["Deployment completed v2.{0}", "Health check passed", "Cache refreshed ({0} items)"]
    ];

    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        var rng = new Random();

        while (!stoppingToken.IsCancellationRequested)
        {            
            await Task.Delay(rng.Next(1500, 4000), stoppingToken);

            var levelIdx = rng.Next(Levels.Length);
            var level = Levels[levelIdx];
            var source = Sources[rng.Next(Sources.Length)];
            var templates = Messages[levelIdx];
            var message = string.Format(templates[rng.Next(templates.Length)], rng.Next(1000, 9999));

            broadcaster.Publish(level, source, message);
        }
    }
}

The previous class is a random event generator, taking a random value from the arrays Levels, Sources and Messages. In addition, through the parameter broadcaster, the new event is published to the bus.

Creating the SSE Endpoint

Now it’s time to create the SSE endpoint, which will consume the shared EventBroadcaster, with the purpose of creating the Event Feed so clients can connect to receive events:

public static class SseEndpoints
{
    public static void MapSseEndpoints(this WebApplication app)
    {        
        app.MapGet("/sse/events", (EventBroadcaster broadcaster, CancellationToken ct) =>
            TypedResults.ServerSentEvents(broadcaster.Subscribe(ct), eventType: "app-event"));
    }
}

In the code above you can notice how EventBroadcaster is injected as a parameter of MapGet. Likewise, TypedResults.ServerSentEvent is executed, which serializes the information and sends the correct SSE format to clients.

Registering Services in Program.cs

For everything to work as expected, we must register in Program.cs the different instances that will interact in the Blazor application. This means creating a singleton instance of EventBroadcaster, so that all systems have access to the same bus. Similarly, we will register DemoEventGenerator as a background service, through the method AddHostedService. This will allow simulated events to be generated in the background continuously:

var builder = WebApplication.CreateBuilder(args);
...
builder.Services.AddSingleton<EventBroadcaster>();
builder.Services.AddHostedService<DemoEventGenerator>();

var app = builder.Build();
...

app.MapSseEndpoints();

app.Run();

In the previous code, in addition to registering the services, MapSseEndpoints is invoked to enable SSE communication in the project.

Creating the Blazor Application

Once we have the application infrastructure ready, it’s time to move on to the UI part. At this point, let’s start by creating a JavaScript client, because the standard requires using the browser’s EventSource API. Since the project is configured as InteractiveServer, we cannot add inline script tags. To work around this, I will add a new file inside the wwwroot/js folder called sse-demos.js:

//1.
let eventFeedSource = null;

2.
export function start(dotNetRef) {
    // 3.
    if (eventFeedSource) eventFeedSource.close();

//4.
    const src = new EventSource('/sse/events');

    // 5.
    src.addEventListener('app-event', function (e) {
        dotNetRef.invokeMethodAsync('OnEventReceived', JSON.parse(e.data));
    });

    // 6.
    src.onopen = function () { dotNetRef.invokeMethodAsync('OnConnectionChanged', true); };
    src.onerror = function () { dotNetRef.invokeMethodAsync('OnConnectionChanged', false); };

    eventFeedSource = src;
}

//7.
export function stop() {
    if (eventFeedSource) {
        eventFeedSource.close();
        eventFeedSource = null;
    }
}

The previous code does the following:

1. A variable eventFeedSource is created to keep information about whether there is an active connection with the server.
2. A function named start should be called from C# code when you want to start receiving information…
3. It checks whether there is an open connection, in which case it is closed.
4. It tells the browser to connect to /sse/events and to listen for all events that the server sends.
5. It filters events named app-event.
6. We subscribe to the events onopen and onerror. Each will notify the method OnConnectionChanged about a change in the connection, which will allow showing a different state in the Blazor UI.
7. The function stop should be invoked to clean up memory when we want to close the connection.

With the JS functions ready, the next step is to create the Blazor component. In this new component we will use a Blazor Data Grid type component, because it is a highly configurable component that has built-in options to filter, group, etc., ideal for quickly obtaining information about events in the different systems.

To do the above, we will create a component called EventFeed.razor, which looks as follows:

@page "/events"
@rendermode InteractiveServer
@inject IJSRuntime JS
@implements IAsyncDisposable

<PageTitle>Live Event Feed</PageTitle>

<h1 class="mb-4">Live Event Feed</h1>

<div class="card shadow-sm">
    <div class="card-header d-flex align-items-center justify-content-between py-2">
        <div class="d-flex align-items-center gap-3">
            @if (isStreaming)
            {
                <span class="badge rounded-pill @(isConnected ? "bg-success" : "bg-secondary") fs-6">
                    <span class="me-1">⬤</span>@(isConnected ? "Connected" : "Disconnected")
                </span>
            }
            else
            {
                <span class="badge rounded-pill bg-warning text-dark fs-6">
                    <span class="me-1">⏸</span>Paused
                </span>
            }
            <span class="text-muted">
                Events received: <strong class="text-dark">@totalEventsReceived</strong>
            </span>
        </div>
        <div class="d-flex gap-2">
            <TelerikButton OnClick="ToggleStreaming"
                           ThemeColor="@(isStreaming ? ThemeConstants.Button.ThemeColor.Primary : ThemeConstants.Button.ThemeColor.Success)">
                @(isStreaming ? "⏸ Pause" : "▶ Resume")
            </TelerikButton>
            <TelerikButton OnClick="ClearGrid" ThemeColor="@ThemeConstants.Button.ThemeColor.Light"> Clear</TelerikButton>
        </div>
    </div>
    <div class="card-body p-0">
        <TelerikGrid Data="@events"
                     Height="560px"
                     Sortable="true"
                     Resizable="true"
                     Reorderable="true"
                     Groupable="true"                     
                     ShowColumnMenu="true">
            <GridColumns>
                <GridColumn Field="@nameof(AppEvent.Time)" Title="Time" Width="110px" />
                <GridColumn Field="@nameof(AppEvent.Level)" Title="Level" Width="120px">
                    <Template>
                        @{
                            var item = (AppEvent)context;
                        }
                        <span class="badge rounded-pill @GetBadgeClass(item.Level) px-3 py-2">@item.Level</span>
                    </Template>
                </GridColumn>
                <GridColumn Field="@nameof(AppEvent.Source)" Title="Source" Width="140px" />
                <GridColumn Field="@nameof(AppEvent.Message)" Title="Message" />
            </GridColumns>
        </TelerikGrid>
    </div>
</div>

@code {
    private List<AppEvent> events = new();
    private bool isConnected;
    private bool isStreaming = true;
    private int totalEventsReceived;
    private DotNetObjectReference<EventFeed>? dotNetRef;
    private IJSObjectReference? jsModule;
    private bool _jsInitialized;

    protected override async Task OnAfterRenderAsync(bool firstRender)
    {
        if (firstRender)
        {
            dotNetRef = DotNetObjectReference.Create(this);
                       
            jsModule = await JS.InvokeAsync<IJSObjectReference>("import", "./js/sse-demos.js");
                        
            await jsModule.InvokeVoidAsync("start", dotNetRef);
            
            _jsInitialized = true;
        }
    }

    [JSInvokable]
    public void OnEventReceived(AppEvent appEvent)
    {
        totalEventsReceived++;
        var updated = new List<AppEvent>(events);
        updated.Insert(0, appEvent);
        if (updated.Count > 50)
            updated.RemoveRange(50, updated.Count - 50);
        events = updated;
        InvokeAsync(StateHasChanged);
    }

    [JSInvokable]
    public void OnConnectionChanged(bool connected)
    {
        isConnected = connected;
        InvokeAsync(StateHasChanged);
    }

    private async Task ToggleStreaming()
    {
        isStreaming = !isStreaming;
        
        if (jsModule is not null)
        {
            if (isStreaming)
                await jsModule.InvokeVoidAsync("start", dotNetRef);
            else
                await jsModule.InvokeVoidAsync("stop");
        }
    }

    private void ClearGrid()
    {
        events = new List<AppEvent>();
        StateHasChanged();
    }

    private string GetBadgeClass(string level) => level switch
    {
        "Info" => "bg-info text-dark",
        "Warning" => "bg-warning text-dark",
        "Error" => "bg-danger",
        "Success" => "bg-success",
        _ => "bg-secondary"
    };

    public async ValueTask DisposeAsync()
    {
        if (_jsInitialized && jsModule is not null)
        {
            try
            {                
                await jsModule.InvokeVoidAsync("stop");
                                
                await jsModule.DisposeAsync();
            }
            catch
            {                
            }
        }
        dotNetRef?.Dispose();
    }

    public class AppEvent
    {
        public int Id { get; set; }
        public string Time { get; set; } = string.Empty;
        public string Level { get; set; } = string.Empty;
        public string Source { get; set; } = string.Empty;
        public string Message { get; set; } = string.Empty;
    }
}

In the previous code, there are some points to highlight:

• jsModule dynamically loads the JS module.
• The variable dotNetRef wraps the instance of the Blazor component that we will use inside the JS code.
• The method InvokeVoidAsync is used both to start and to stop the event streaming.
• The method OnEventReceived is invoked from the JS code each time an event is received. This allows updating the list events to show the new information in TelerikGrid.
• The OnConnectionChanged method receives a connection status from the JS code to update the UI according to any change in the connection.

With the new component ready, we can test the application, which looks like the following:

With this, we verify that everything works correctly. Also, thanks to the Blazor DataGrid capabilities, we can perform operations such as monitoring only those high-severity events:

With this we have a nice event viewer that monitors the status of multiple fictitious systems.

Conclusion

Throughout this article you have learned about the SSE standard. You have also seen how changes introduced in .NET 10 help simplify the creation of SSE endpoints, enabling the creation of applications that send real-time events to clients. Now it’s your turn to explore when you might use this web standard in your own projects. See you in the next article!

Try all this yourself with a free 30-day trial of Telerik UI for Blazor.

Try Now

If you have worked with Blazor in versions prior to .NET 10, you have certainly encountered some difficulties in implementing not found pages and in handling NavLink to show users the page they are currently on.

This is why, during the last update to .NET 10, the team behind Blazor has significantly improved the handling of routes and the management of not found pages. In this article, we will analyze the most important aspects. Let’s get started!

Understanding the Handling of Not Found Routes in Blazor

When we talk about routing, we refer to the mechanism that allows the user to navigate to a specific component based on the requested URL. However, there may be times when there are non-existent URLs that the user attempts to navigate to, such as when an item has been deleted or when, for some reason, a page has been removed from the site.

Properly handling these scenarios is essential for a good user experience, good SEO and, in general, having a reliable web application.

The Problem with Not Found Pages Before .NET 10

You should know that before .NET 10, as part of the Router component, there was a render fragment called NotFound, which at first glance could lead us to think that it allowed defining graphical code to show content when a route was not found:

<Router AppAssembly="typeof(Program).Assembly">
    <Found Context="routeData">
        ...
    </Found>
    <NotFound>
        <LayoutView Layout="typeof(Layout.MainLayout)">
            <h1>Page not found</h1>
            <p>Sorry, but there is nothing here!</p>
        </LayoutView>
    </NotFound>
</Router>

In practice, something different occurred, as when attempting to navigate to a non-existent page, an error page was displayed instead of the defined graphical code:

Another technique that was used before .NET 10 was to handle the not found page code within the components. For example, there could be an ecommerce-type application with a products page and a product details page. On the product details page, if the user tried to access a non-existent page, it was handled similarly to the following way:

@if (product == null)
{    
    <div class="alert alert-warning text-center" role="alert">
        <h4 class="alert-heading">Product Not Found</h4>
        <p>The product with ID <strong>@Id</strong> does not exist in our catalog.</p>
        <hr>
        <button class="btn btn-outline-primary" @onclick="GoBack">
            &larr; Back to Products
        </button>
    </div>
}
else
{
    ...
}

The execution of the previous code resulted in the following appearance:

The previous code, although it achieved the goal of showing the user that the product did not exist, had several problems:

• It returned an HTTP 200 code, not a 404.
• Each component had to implement its own logic.
• If there was navigation to a non-existent URL (not handled by a component), a site error page was shown.

Next, let’s see how .NET 10 improves the handling of not found pages.

Features in .NET 10 for Route Management

In .NET 10, things have changed regarding route management. Let’s analyze what these new features are.

The Router.NotFoundPage Parameter

One of the most prominent updates is the addition of the NotFoundPage parameter to the Router component, which allows specifying a Razor page component that will be displayed when a route is not found. By default, in Blazor projects starting from .NET 10, in the Pages folder we find a component called NotFound.razor, whose structure is as follows:

NotFound.razor

@page "/not-found"
@layout MainLayout

<h3>Not Found</h3>
<p>Sorry, the content you are looking for does not exist.</p>

Routes.razor

<Router AppAssembly="typeof(Program).Assembly" NotFoundPage="typeof(Pages.NotFound)">
   ...
</Router>

The preview of this code gives the following result:

In the code above, we can see that the 404 error page must include the @page directive for it to function correctly.

Customizing the NotFound Component

With the NotFound.razor component showing us how to implement a 404 page in our Blazor apps, the next step is to customize it. There are several ways to do this. For example, by adding support for contextual messages through a service class called NotFoundContext:

public class NotFoundContext
{
    public string? Heading { get; private set; }
    public string? Message { get; private set; }

    public void UpdateContext(string heading, string message)
    {
        Heading = heading;
        Message = message;
    }
}

This class will allow you to show a custom heading and message based on the operation the user has requested. For it to work correctly, you need to register the service in Program.cs:

var builder = WebApplication.CreateBuilder(args);
...
builder.Services.AddScoped<NotFoundContext>();
...
var app = builder.Build();

Now, let’s give a bit more design to the NotFound.razor template:

@page "/not-found"
@layout MainLayout
@using NotFoundManagementNET102.Services
@inject NotFoundContext NotFoundContext

<PageTitle>Not Found</PageTitle>

<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card shadow-sm border-0 text-center">
                <div class="card-body p-5">
                    <div class="mb-4">
                        <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" fill="#6c757d"
                             class="bi bi-exclamation-triangle" viewBox="0 0 16 16">
                            <path d="M7.938 2.016A.13.13 0 0 1 8.002 2a.13.13 0 0 1 .063.016..." />
                        </svg>
                    </div>

                    <h3 class="card-title text-dark mb-3">
                        @(NotFoundContext.Heading ?? "Page Not Found")
                    </h3>

                    <p class="card-text text-muted mb-4">
                        @(NotFoundContext.Message ?? "Sorry, the content you are looking for does not exist.")
                    </p>

                    <div class="d-flex justify-content-center gap-2">
                        <a href="/products" class="btn btn-primary">
                            &larr; Back to Products
                        </a>
                        <a href="/" class="btn btn-outline-secondary">
                            Go Home
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

In the code above, you can notice that it checks whether the user sets a value for Heading and Message, in order to display either a generic message or a personalized one. Let’s see next how to display custom pages based on the user’s context.

Handling Not Found Pages with NavigationManager.NotFound() and OnNotFound

In .NET 9, NavigationManager.NotFound() and OnNotFound were introduced as part of the framework improvements for handling not found pages. We can combine both with the NotFoundContext service to display a 404 response and custom messages, through the following code:

@page "/product/{Id:int}"
@using NotFoundManagementNET102.Models
@using NotFoundManagementNET102.Services
@implements IDisposable
@inject ProductService ProductService
@inject NavigationManager Navigation
@inject NotFoundContext NotFoundContext

<PageTitle>@(product?.Name ?? "Product Detail")</PageTitle>

@if (product != null)
{
    <div class="container mt-4">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="/products">Products</a></li>
                <li class="breadcrumb-item active" aria-current="page">@product.Name</li>
            </ol>
        </nav>

        <div class="card shadow-sm">
            <div class="card-body">
                <div class="row">
                    <div class="col-md-8">
                        <h2 class="card-title">@product.Name</h2>
                        <span class="badge bg-secondary mb-3">@product.Category</span>
                        <p class="card-text text-muted">@product.Description</p>

                        <div class="row mt-4">
                            <div class="col-6">
                                <h5>Price</h5>
                                <p class="fs-4 text-primary fw-bold">$@product.Price.ToString("N2")</p>
                            </div>
                            <div class="col-6">
                                <h5>Stock</h5>
                                <span class="badge @(product.Stock > 30 ? "bg-success" : product.Stock > 10 ? "bg-warning" : "bg-danger") fs-6">
                                    @product.Stock units
                                </span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="card-footer">
                <TelerikButton OnClick="GoBack"
                               ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">
                    &larr; Back to Products
                </TelerikButton>
            </div>
        </div>
    </div>
}

@code {
    [Parameter]
    public int Id { get; set; }

    private Product? product;

    protected override void OnInitialized()
    {
        // 1.
        Navigation.OnNotFound += HandleNotFound;

        // 2.
        product = ProductService.GetProductById(Id);

        if (product == null)
        {
            // 3.            
            Navigation.NotFound();
        }
    }

    private void HandleNotFound(object? sender, NotFoundEventArgs e)
    {
        // 4.
        NotFoundContext.UpdateContext(
            "Product Not Found",
            $"The product with ID {Id} does not exist in our catalog.");
    }

    private void GoBack()
    {
        Navigation.NavigateTo("/products");
    }

    public void Dispose()
    {
        // 5.
        Navigation.OnNotFound -= HandleNotFound;
    }
}

Let’s analyze in more detail what happens in the code above:

1. We subscribe to Navigation.OnNotFound to monitor when a product is not found.
2. The product is searched by its ID.
3. If the product does not exist, Navigation.NotFound is invoked, allowing the rendering of the component with an HTTP 404 code.
4. In the HandleNotFound handler, we set a custom title and message.
5. We unsubscribe from the event to avoid memory leaks.

With the previous implementation, if we navigate to a nonexistent URL such as https://localhost:7038/not-found-page, a generic message will be displayed:

However, when trying to access the URL of a nonexistent product such as https://localhost:7038/product/122, we will find a custom message:

With the above, we have confirmed that it is now much easier to handle not found routes.

Improvements in URL Detection using NavLinkMatch.All

Before .NET 10, when using Match="NavLinkMatch.All", Blazor was very strict in detecting links. For example, suppose you had something like this in your navigation menu:

<NavLink href="https://www.telerik.comproducts" Match="NavLinkMatch.All">Products</NavLink>

If you visited the /products page, the UI would mark an active link in the menu. However, if you navigated to a different URL such as /products?price=cheap or /products#offers, the UI would mark the section as inactive, leading to a poor user experience. This behavior is currently happening in our application:

In the image above, you can see how the focus is lost when navigating to a product details page. This happens because the main URL is http://localhost:5084/products, while the product URL looks like this: http://localhost:5084/product/2.

Fortunately, in .NET 10 we can inherit from NavLink and write custom logic to handle matching the URLs we need:

public class CustomNavLink : NavLink
{
    protected override bool ShouldMatch(string currentUriAbsolute)
    {
        // 1.
        var baseUri = new Uri(NavigationManagerBase.BaseUri);
        var currentUri = new Uri(currentUriAbsolute);
        var relativePath = currentUri.AbsolutePath.TrimStart('/').ToLowerInvariant();

        // 2.
        var href = AdditionalAttributes != null
            && AdditionalAttributes.TryGetValue("href", out var hrefValue)
            ? hrefValue?.ToString()?.TrimStart('/').ToLowerInvariant()
            : null;

        if (string.IsNullOrEmpty(href))
            return base.ShouldMatch(currentUriAbsolute);

        // 3.
        if (href == "products")
        {
            return relativePath == "products"
                || relativePath.StartsWith("product/");
        }

        return base.ShouldMatch(currentUriAbsolute);
    }

    [Inject]
    private NavigationManager NavigationManagerBase { get; set; } = default!;
}

In the code above:

1. We obtain the relative path from the absolute URI.
2. We get the href.
3. We perform a custom match so that NavLink is active both in /products and /product/{id}.

For the previous implementation to work in the project, we need to swap NavLink for CustomNavLink in NavMenu.razor:

...
<div class="nav-item px-3">
    <CustomNavLink class="nav-link" href="products">
        <span class="bi bi-bag-fill-nav-menu" aria-hidden="true"></span> Products
    </CustomNavLink>
</div>
...

The result of the implementation is that the user knows at all times where they are, thanks to the implementation of a custom NavLink:

Conclusion

Throughout this article, you have learned about some new features in .NET 10 that are particularly useful for handling routes.

This includes creating a context for managing information on an error page and how to use this context to show users specific error pages, in addition to an inheritance of NavLink to define custom rules for better navigation.

Undoubtedly, these new features were much needed in Blazor. Now it’s your time to use them and create better user experiences utilizing them alongside Progress Telerik components for Blazor.

AI-driven applications introduce a new set of challenges for user experience design. Traditional web applications operate within predictable boundaries, where requests complete in a consistent and measurable way. AI features change that dynamic, with response times ranging from near-instant to long-running operations that can take minutes. Designing for that variability is no longer optional, it is a core part of building reliable AI-powered applications.

The challenge extends beyond implementation into perception. Users do not experience time objectively; they react to how it feels. A blank screen creates doubt, while visible progress keeps the experience grounded. When feedback aligns with the effort required, the interaction feels natural. When it does not, friction builds quickly. Thoughtful loading design addresses this gap by communicating progress, setting expectations and reinforcing the value of the task in motion.

This guide focuses on practical loading UI patterns for AI scenarios, organized by real-world wait times. Each pattern is implemented with Blazor and Progress Telerik UI components, keeping the discussion grounded in tools developers already use. The goal is simple: create loading experiences that do more than fill time, improving perceived performance and building confidence in the system behind the scenes.

Understanding AI Application Loading Patterns

AI applications introduce a different class of loading behavior. Traditional web requests are relatively predictable, but AI workloads are not. Inference, natural language processing and computer vision all introduce variability based on model complexity, input size and system load. As powerful as these capabilities are, they require a more deliberate approach to how progress is communicated.

Effective loading experiences center on managing expectations through clear, continuous feedback. Every loading state should communicate what is happening now, what has completed and what comes next, keeping users oriented as the system works. With this foundation in place, loading patterns can be tailored to specific wait times, keeping the experience responsive and understandable regardless of how long processing takes.

Near Instantaneous Responses (Less Than 1 Second)

For interactions under one second, traditional loading indicators often add more friction than value. Quick flashes of spinners or progress bars create a visual glitch that feels broken rather than helpful. Instead, the interface should respond immediately with subtle visual feedback that confirms the action without interrupting flow.

One exception stands out: when a fast action represents the final step in a longer workflow. In these cases, introducing a brief, intentional delay can create a sense of completion, giving users a moment to recognize the result of their effort before moving on.

AI Task Examples

AI tasks that typically complete in under one second include:

• Real-time text suggestions and autocomplete
• Simple sentiment analysis on short text
• Basic image classification with lightweight models
• Cached AI responses
• Rule-based chatbot responses
• Simple recommendation filtering

Blazor Implementation Strategy

Implementing instantaneous feedback in Blazor requires careful coordination between state changes and visual cues. The goal is to reflect user actions immediately while avoiding flicker from overly brief loading states. In practice, this often means enforcing a minimal display duration for indicators so that interactions feel smooth and intentional.

Try the A/B samples below by clicking the “Zoom and Enhance” buttons twice. The A sample should feel smoother on short intervals because of the intentional delay.

UX Strategy

Instant interactions benefit from confirmation rather than explanation. Subtle cues like button state changes, input highlighting or lightweight animations signal that the system has responded, keeping the experience fluid and uninterrupted. When these signals are consistent and immediate, users stay oriented without feeling like they are waiting.

Short Wait Times (1–3 Seconds)

Short waits call for lightweight, indeterminate indicators that acknowledge progress without interrupting flow. Simple spinners or skeleton screens work well because they provide immediate feedback while keeping the interface responsive. More elaborate animations tend to work against this, as users do not have enough time to process them and the interaction can feel slower than it is.

Skeleton screens are especially effective in AI scenarios because they establish structure upfront. By rendering a placeholder version of the final layout, the interface maintains continuity and gives users a clear sense of what is coming next as content is generated.

AI Task Examples

AI operations in the 1–3 second range include:

• Text generation for short responses
• Image enhancement or basic filtering
• Summarizing a document of moderate length
• Translation of short to medium text
• Basic data analysis and insights generation
• Voice-to-text conversion for brief audio

Blazor Implementation Strategy

Chat Progress and Thinking

The Telerik UI for Blazor Skeleton component provides a straightforward way to mirror final layouts while AI-generated content is loading and the agent is thinking.

Smart Paste Loading

The following demo shows a smart paste interaction that incorporates loading indicators to signal the process taking place. The Loading Container is displayed over the form fields being populated, while a button loader indicates the action is taking place once the button is clicked.

UX Strategy

Short waits benefit from clarity without added friction. Contextual messaging that reflects the task in progress, such as “Thinking” or “Generating recommendations,” helps users understand what is happening without slowing the experience down. When combined with progressive disclosure, where partial results are rendered as they become available, the interface stays active and responsive, reducing perceived wait time while making the system’s work visible.

Medium Wait Times (3–10 Seconds)

Users begin to question responsiveness, and a lack of visible progress quickly turns into doubt. Multi-agent workflows or agentic workflows with multiple indeterminate steps can be difficult to navigate. Agents can make requests to external tools that have asynchronous processes. While these processes run, it is important to report the activity in a manageable way without losing focus of the main content.

Blazor Implementation

Provide feedback for AI operations that expose measurable progress. The example below shows a chat process where the agent uses external tools. Loading indicators are exposed in a collapsible panel to allow the user to see the progress but also hide it when the details are no longer necessary.

UX Strategy

Medium waits benefit from a balance of clarity and momentum. Directional time estimates, even something as simple as “This may take about a minute,” help users decide whether to stay engaged or return later, while continuously moving progress indicators reinforce that the system is still working. When paired with contextual messaging that explains the current step or highlights what is being processed, the experience shifts from passive waiting to a guided interaction that keeps users oriented and informed.

Extended Wait Times (10+ Seconds)

Extended wait times require a different approach. Clear visibility into progress matters, but so does the freedom to move on without losing track of what is happening. Combining progress indicators with background processing patterns allows the system to stay transparent while keeping the rest of the application usable.

Percent-complete indicators play a central role here by giving users a sense of scale. Seeing measurable progress helps them judge how much work remains and whether it is worth continuing to wait. At the same time, providing cancel or abort options keeps users in control rather than locked into a long-running process.

Step-based indicators work especially well for multi-stage AI operations by breaking the process into clear, understandable phases. Even when exact timing is uncertain, each completed step provides direction and reinforces forward movement.

Blazor Implementation

The following example uses a grid format to display and manage agent activity. Each element displays important information about the task’s state. In addition, failure modes are included and made actionable from the interface. This type of UX is great for dashboard-like scenarios where users can launch agent workflows and return later to see the task completion status.

If the user may encounter a long and undetermined loading state, a looping indicator can be used to communicate the overall steps that are running in the background, without labeling exactly what stage the process is at now. This nondeterministic progress indicator displays a carousel of information while the user waits.

With agentic applications, long processes can give the impression of wasted time, even though a process that takes minutes for an agent may have taken a human hour to complete manually. This loading pattern reminds users of the work going on behind the scenes. While some consider this a “dark pattern” when used to obscure the process details, it can be quite useful when used correctly to share honest information about the value the process provides.

Extended waits benefit from a design that prioritizes flexibility and user control. Background task patterns, such as persistent status panels or drawers, allow users to continue working while keeping progress visible, reducing the friction of being forced to wait in place. When paired with notification systems that signal completion, the need to actively monitor progress is removed entirely, giving users confidence that the system will follow through.

Longer waits create space to surface meaningful insights, explain processing steps or provide guidance for improving future results. When these elements are combined effectively, the experience shifts from a blocking delay to a managed, transparent process that keeps users informed without interrupting their workflow.

Advanced Patterns for AI Applications

Contextual Loading Messages

AI applications benefit from contextual loading messages that explain current processing steps. Replace generic “Loading...” text with specific descriptions: “Analyzing image composition,” “Generating creative variations” or “Cross-referencing knowledge base.” These messages build user understanding of AI capabilities while setting realistic expectations for output quality.

Streaming and Incremental Results

Many modern AI applications support streaming responses, particularly for text generation. Implement progressive disclosure patterns that display AI outputs as they generate, reducing perceived wait time while demonstrating active processing. This approach works particularly well for conversational AI interfaces and content-generation tools.

Summary

Designing loading experiences for AI applications is no longer about handling delays. It is about shaping how users understand and interact with the system. When feedback aligns with the work being performed, users stay engaged and in control regardless of how long processing takes.

By matching loading strategies to expected wait times, developers can move beyond generic indicators and deliver feedback that is intentional and informative. From immediate visual confirmation to multi-stage progress tracking, each pattern helps make AI interactions feel predictable and responsive.

Blazor and Telerik UI components provide a practical foundation for implementing these patterns, enabling teams to build consistent loading experiences without introducing unnecessary complexity. The advantage comes from how these tools are applied, not just their availability.

As AI continues to shape modern applications, loading design becomes a defining part of the user experience. Applications that communicate clearly during processing will feel faster and more reliable, regardless of the work happening behind the scenes.

Get Started with These Examples

Use any of the Telerik UI for Blazor components shown above, plus the Blazor MCP servers free with the 30-day trial.

Try Now

While many developers using Windows love the fully integrated development experience Visual Studio provides, it’s not an option for some of us.

We will learn how to set up Visual Studio Code for Blazor web application development, a few first-hand tips and how to conveniently debug.

Why Use Visual Studio Code for Blazor Web Development?

Maybe you or your team already use Visual Studio Code for software development because of its excellent code editor or GIT integration. Why learn something new if you are happy with what you already have?

Another reason that comes to mind is your preferred operating system.

Visual Studio is only available for Windows. While I am a Windows user and have always loved the fully fledged feature set provided by Visual Studio for .NET development, I understand that there are other options.

For macOS or Linux, you do not have the option to use Visual Studio. Visual Studio Code (VS Code) is a great, lightweight, and free alternative.

Also, licensing can be an issue. While the Visual Studio Community edition has limitations, VS Code is free for .NET development, both personal and commercial.

Last but not least, VS Code uses less RAM, hard-drive space and CPU compared to fully fledged IDEs, such as Visual Studio. For hardware constraint situations, it’s an ideal choice.

Getting Started: The Setup

We need two essential things before we can start developing Blazor web applications with VS Code.

1. Obviously, we need the latest Visual Studio Code version installed
2. We also need the latest .NET SDK installed

Make sure you can execute the dotnet --version command in a terminal. If it doesn’t show the version of the installed .NET SDK, add the .NET CLI to the PATH variable of your operating system and restart your computer before trying again.

Installing the C# Dev Kit

Next, we want to install the C# Dev Kit extension for Visual Studio Code.

This extension adds C# development features, including project and solution management, debugging, syntax highlighting, code navigation, refactorings and more, to VS Code. It’s a mature extension with more than 13 million downloads.

Hint: The C# Dev Kit extension not only adds support for Blazor web development but for all C# project types, including desktop, mobile, web, or cloud-native applications.

Creating a Blazor Web App in VS Code

If you open an empty VS Code instance, you’ll get the Create .NET Project menu option in the Explorer panel.

Pressing the Create .NET Project button will execute a VS Code command that allows you to select the project type. We select the default Blazor Web App project template and choose the destination folder on the hard drive.

Depending on the project template you choose, you’ll be able to add additional information to influence the outcome of the created project.

After a few seconds, the Explorer now shows the project folder containing the created solution file, the project file and the Components folder containing the example pages and layouts.

Hint: We won’t explore the structure and architecture of the Blazor Web application.

Another option for creating a .NET project is using the .NET CLI from the terminal. The dotnet new blazor command creates the same project as shown above.

Running the Blazor Web Application in VS Code

Running a Blazor Web Application is no different from running any other .NET-based application. In a terminal, you can use the dotnet run or dotnet watch run command to run it.

The dotnet watch run command automatically rebuilds and refreshes the browser (hot reload) when you edit the code and save the file.

The application runs the same whether you run it in Visual Studio or from the command line without VS Code. All three options use the .NET CLI under the hood.

Compared to Visual Studio, VS Code is noticeably faster at applying simple changes to components, such as the text of the default Home page component.

Tip: Using hot reload saves a lot of time. Use the dotnet watch run command and open the Counter.razor component. Change the code in the IncrementCount method from currentCount++ to currentCount+=2 and save the file. Whenever you hit the Click Me button, the counter now increases the value by two instead of one.

Debugging C# Code in VS Code

VS Code not only supports running the Blazor web app, but also debugging it.

To enable debugging:

1. Open the Run and Debug panel (CTRL+SHIFT+D)
2. Click the Run and Debug button.
3. Select C#
4. Select one of the available project options, or launch the Startup project.
5. Click on Start Debugging (Green Triangle), or press F5.

You can click left of any C# code line to add a breakpoint. A yellow background highlights the code line when the debugger stops the execution. And you can use the toolbar to step through your code and hover over variables to see their values.

The debugging experience is comparable to that of other fully fledged IDEs and allows you to find bugs and understand code execution.

You can add variables to the watch view to keep their values visible as you step through program execution. You also see the call stack whenever the program execution halts, and you can enable or disable the breakpoints.

Hint: Make sure the application isn’t running from a terminal, such as using the dotnet watch run command.

Conclusion

While I personally prefer using Visual Studio 2026 for most of my development work, I hopefully was able to have shown that Visual Studio Code also offers a first-class development environment.

For Linux or macOS, VS Code would definitely be my first choice because it provides most of the tools I regularly use and contains much less bloat than a fully fledged IDE. VS Code is free for personal and commercial use.

Depending on the scope of your project and how you want to work, VS Code is a good choice to get started with Blazor web development. Especially if you already use VS Code for other projects, such as React or Angular web application development.

If you want to learn more about Blazor development, watch my free Blazor Crash Course on YouTube. And stay tuned to the Telerik blog for more Blazor Basics.

AI-powered code generation has become a significant part of how developers build user interfaces. The 2025 Stack Overflow Developer Survey found that 84% of developers are now using or planning to use AI tools in their development process.

Original AI adoption has been through tools like code autocompletion and chat-based assistants, but agentic UI tools take things further. Rather than suggesting the next line of code, they can take a natural language prompt and produce working, styled UI code in seconds.

However, not all AI generation tools are created equal. The quality of the output, how reliably it builds on the first attempt, how fast it runs and how well it handles things like accessibility and theming can vary quite a bit between tools. These differences matter because a tool that requires a large number of follow-up prompts to correct errors or produce code that doesn’t match the original requirements isn’t truly saving us time.

In this article, we’ll look at a head-to-head comparison between two agentic UI generation tools: the Progress Telerik Agentic UI Generator which includes the Blazor Agentic UI Generator for .NET/Blazor and the Kendo UI Generator for Angular and React, and the Syncfusion Agentic UI Builder. We’ll walk through the results of extensive testing across multiple frameworks, covering output quality, performance, stability, accessibility, theming and more.

How the Comparison Was Conducted

To make this comparison as fair and thorough as possible, both tools were tested across multiple frameworks using two evaluation approaches.

Blazor/.NET

On the Blazor/.NET side, 23 prompts were run through the Telerik Agentic UI Generator and the Syncfusion Agentic UI Builder. These prompts ranged from simple single-component requests to complex multi-section layouts like e-commerce catalog pages and CMS admin dashboards. Each prompt’s output was rated on a 0 to 7 scale:

• 0-1: Doesn’t build or crashes with no UI
• 2-3: Partially renders, major sections broken
• 4: Renders but requires multiple prompts to clear build or runtime errors
• 5: Renders but doesn’t match prompt requirements in several areas
• 6: Mostly complete, minor issues
• 7: Fully matches requirements

The evaluation also tracked how many prompts were needed before the output could successfully build and render, as well as the time (in seconds) from initial prompt submission to output generation.

Angular and React

For Angular and React, a dedicated evaluation was conducted comparing the Kendo Agentic UI Generator against the Syncfusion Agentic UI Builder. Rather than scoring individual prompts, this evaluation focused on a technical comparison of the tools themselves. By running many prompts and examining the context returned by each tool, the analysis compared how each MCP server helps the AI agent arrive at its output across categories like layout, styling, accessibility, documentation and component handling.

Output Quality and Reliability

This is the category where the gap between the two tools becomes immediately clear.

Across the 23 Blazor prompts, the Telerik Agentic UI Generator consistently produced complete, requirement-matching output on the first attempt. The Syncfusion Agentic UI Builder told a different story. It experienced five failures where no usable UI was generated at all, and several other prompts that required follow-up prompts to fix errors before the output could even build. Let’s look at a couple of examples.

Failures

The very first prompt asked both tools to build a login screen with email/password validation and an admin dashboard with a sidebar menu, key metrics and recent activity.

Prompt: “I have created an empty application that now needs a login screen and an admin dashboard. Add a login form with email/password fields and validation. After a successful login, redirect to an admin dashboard page featuring a sidebar menu and a main content area displaying key metrics and recent activity.”

The Telerik Generator produced a fully working output on the first attempt.

The Syncfusion Builder returned an error along the lines of: Error. This response is truncated because it is too long. Try rephrasing your question. No UI was generated at all.

The second prompt told both tools to create a monitoring dashboard with system health KPIs, a log stream panel, charts for API response times and requests per service.

Prompt: “Create a new page using the existing top navigation and footer. In the middle, add 3 rows with 3 responsive columns each. The top row shows system health KPIs for CPU, memory and error counts. The middle rows include a Log Stream panel, a line Chart of API response times and a bar chart of requests per service. The bottom row contains a Deployment History table, an Alerts panel and a list of open tickets.”

The Telerik Generator again produced a fully working output on the first pass.

The Syncfusion Builder hit the same truncation error.

These are the kinds of prompts that represent real-world use cases. A login screen with a dashboard and a monitoring page with multiple data panels aren’t unusual requests.

Errors Requiring Follow-ups

Not every issue is an error during the generation process. Some prompts produced output that needed additional work to get running.

We fired a prompt to ask for a product catalog page with a responsive layout, product cards, a filtering toolbar and expandable detail views. The Telerik Generator handled it cleanly on the first attempt. The Syncfusion Builder hit an error about a missing component parameter and needed a second follow-up prompt to fix it.

Prompt: “Create a product catalog page with a responsive CSS layout. The layout should display product cards. Add a toolbar with filtering options, and expandable detail view for each product that work seamlessly on mobile, tablet, and desktop.”

The first output by the Telerik Blazor generator:

The final output from Syncfusion, after the necessary follow-up prompt:

The Syncfusion Builder’s errors in these cases often involved referencing component parameters that don’t exist, which may suggest the tool’s AI agent is working with less reliable component information during generation.

Partial Results

Not all issues showed up as crashes or errors needing follow-ups. Let’s look at an example of a prompt that was made which involved a theming request.

Prompt: “Generate a custom theme for a corporate blue and green color scheme with high contrast accessibility requirements.”

The Telerik Agentic UI Generator created the output matching the requirements.

The Syncfusion Builder did create a custom theme, but the expected theme wasn’t applied to the output.

The Bigger Picture

Even when we set aside the failures and only look at prompts where the Syncfusion Builder produced something usable, the outputs still frequently fell short of the original requirements.

On the Angular and React side, the findings were consistent. While the final rendered UI sometimes appeared similar at a glance, the most significant differences were in how each tool’s MCP server helped the agent arrive at that output. The Kendo Generator’s tools consistently delivered more relevant, targeted context to the AI agent, filtering results to what was actually needed for the prompt. The Syncfusion Builder’s tools returned broader, less filtered responses, often including full component prop lists and governance rules regardless of what was asked.

Performance

Speed matters when we’re iterating on UI designs with AI. Waiting several minutes for a complex layout to generate can significantly slow down the development flow.

Across the Blazor evaluation, the Telerik Generator was consistently faster. The speed advantage was most noticeable on complex layout prompts. For example, on a complex e-commerce catalog page with filtering, sorting, responsive breakpoints and pagination, the Telerik Generator completed in about 799 seconds while the Syncfusion Builder took 908 seconds.

There was one outlier where Syncfusion was notably faster (a simpler single-component case), but across the full set of 23 prompts, the speed advantage consistently favored Telerik.

Accessibility

Accessibility is often treated as an afterthought, but for enterprise applications, it’s a requirement, not a nice-to-have!

The Kendo Generator includes a dedicated accessibility tool (#kendo_accessibility_assistant) that retrieves WCAG 2.2 Level AA guidelines as a mandatory step in the generation process. It also fetches component-specific accessibility requirements for each component used in the output. This leads to every piece of generated UI having accessibility considerations baked in from the start.

From what we can gather, and at the time of writing, the Syncfusion Builder doesn’t have a strong accessibility tool like the #kendo_accessibility_assistant.

Theming, Layout and Documentation

Beyond output quality and speed, the Angular and React evaluation revealed some important architectural differences in how each tool handles theming, layout and documentation.

Theming

Theming is more than color selection. The Kendo UI Generator produces a complete design system from a single prompt, including colors, typography, spacing scales, border radius, elevation and shadows. The Syncfusion Builder’s style tool is limited to component state colors and semantic colors. Typography, spacing and elevation aren’t reachable through it, so the generated output may look right in terms of color but lack the design coherence that holds a full application together.

Layout

Layout is also where a notable dependency difference comes in. The Kendo UI Generator uses a self-contained layout system built on its own CSS utilities, introducing no external dependencies. The Syncfusion Builder relies on Tailwind CSS, injected into every project, and works from a catalog of 265+ prebuilt blocks. When the desired layout doesn’t match a catalog entry, the result approximates what was asked for.

For teams already using Tailwind, this might feel natural but for projects on a different CSS framework (Angular Material, for example), adding Tailwind on top can introduce style conflicts. This can also be a potential blocker for organizations that restrict third-party dependencies.

Responsiveness follows a similar split: the Kendo UI Generator has a dedicated phase with explicit breakpoint reasoning, while the Syncfusion Builder inherits responsive behavior from Tailwind’s defaults without any first-class responsive logic of its own.

Documentation

Documentation plays a bigger role in output quality than it might seem, since it directly shapes how well the AI agent understands the components it’s generating. The Kendo UI Generator injects relevant documentation chunks directly into every component tool call, including API references with full type signatures. The Syncfusion Builder treats documentation as a separate tool, triggered only by specific keywords. At the time of the evaluation, results from this tool were inconsistent and the service had been unavailable for over 24 hours for both Angular and React.

One other important observation from the Angular and React evaluation: the Kendo UI Generator customizes its workflow per prompt using confidence scores, including only the tools and instructions relevant to each request. The Syncfusion Builder runs the same fixed sequence for most prompts regardless of complexity, and its component tools return the full prop list and approximately 250 lines of governance rules on every call. The result is that the Kendo UI agent operates on targeted, preprocessed context while the Syncfusion agent carries a heavier payload for every request.

Wrap-up

The comparison across Blazor, Angular and React tells a consistent story with these agentic UI generators. The Progress Telerik Agentic UI Generator outperforms the Syncfusion Agentic UI Builder across output quality, reliability, performance, accessibility, theming, layout and documentation.

On the Blazor side, the Telerik Generator had zero full failures across 23 prompts while Syncfusion had five, along with a consistent speed advantage on complex prompts and more reliable first-pass output. On the Angular and React side, the advantages show up in the underlying architecture, where the Kendo Generator’s tools consistently deliver cleaner, more relevant context to the AI agent.

Get started with AI-empowered development. The Kendo UI and Telerik AI tools are ready. And they come as part of the free trial of the component libraries.

Try Now

For more information on the Progress Telerik Agentic UI Generator, check out the following resources:

• Telerik Agentic UI Generator for Blazor
• Kendo UI Generator for Angular
• Kendo UI Generator for React

The full comparison data referenced in this article is available for download:

• Telerik UI for Blazor Agentic UI Generator vs Syncfusion Agentic UI Builder Comparative Evaluation (XLSX)
• Kendo Agentic UI Generator vs Syncfusion Agentic UI Builder (XLSX)

Summary FAQs

What Do These Tools Do?

What Telerik Agentic UI Generator Is

According to the Progress Telerik website, the Telerik Agentic UI Generator for Telerik and Kendo UI libraries is an intelligent development tool delivered through the Model Context Protocol (MCP) Server that enables UI generation from natural language prompts. Once configured and authenticated, you can use the Agentic UI Generator tool (#telerik_ui_generator) together with the available specialized MCP assistants.

What Syncfusion Agentic UI Builder Is

According to the Syncfusion site, Syncfusion’s Agentic UI Builder is designed to work inside an IDE to generate UIs, dashboards or pages with Syncfusion components with natural language commands. Syncfusion uses MCP integration to access component APIs, prebuilt UI blocks, styling configurations, icon libraries and code generation.

Why Does MCP Matter in Both Products?

Both brands’ tools use Model Context Protocol (MCP) servers to connect AI applications directly to the software specs for the individual library. This means that the AI is informed on component documentation, best practices, workflows and tooling provided by the UI library, so the AI can create a user interface more in line with how the library was designed to work. It should result in better outputs than if an AI were cobbling together an interface without guidance.

Learn more about the individual MCP servers:

• Telerik UI for Blazor MCP Servers
• Kendo UI for Angular MCP Servers
• KendoReact MCP Servers
• Syncfusion EJ2 React MCP Server
• Syncfusion EJ2 Angular MCP Server
• Syncfusion Blazor MCP Server

Are Prompt Libraries Included?

Telerik and Kendo UI Generator Prompt Libraries

Yes! Prompt libraries are included for the Kendo UI and Telerik AI UI Generator tools:

• Blazor: https://www.telerik.com/blazor-ui/documentation/ai/agentic-ui-generator/prompt-library
• React: https://www.telerik.com/kendo-react-ui/components/ai-tools/agentic-ui-generator/getting-started
• Angular: https://www.telerik.com/kendo-angular-ui/components/ai-tools/agentic-ui-generator/prompt-library

Syncfusion Agentic UI Builder Prompt Libraries

Yes! Prompt libraries are included for the Syncfusion Agentic UI Builder tools:

• Blazor: https://blazor.syncfusion.com/documentation/mcp-server/agentic-ui-builder/prompt-library
• React: https://ej2.syncfusion.com/react/documentation/mcp-server/agentic-ui-builder/prompt-library
• Angular: https://ej2.syncfusion.com/angular/documentation/mcp-server/agentic-ui-builder/prompt-library

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. Next, we will learn about what we should and should not do in our Blazor logic (C# code).

You can access the code used in this example on GitHub.

What Is Responsive Design for Blazor Apps?

Blazor provides a user interface rendering engine (Razor components) that lets us implement behavior using C#. Blazor components consist of an HTML and CSS template combined with C# interaction logic.

In modern web development, we want to utilize CSS media queries to let our web applications adapt to different screen sizes:

• Small screens, such as mobile phones
• Medium screens, such as tablets
• Large screens, such as desktop computers
• (optional) Ultra-wide monitors

Best practices for general web development also apply to implementing Blazor web applications.

CSS Media Queries in Blazor Components

Let’s learn about CSS media queries using a practical example, a Blazor web application generated from the .NET 10 Blazor Web App project template.

The NavMenu component contains a menu toggler. How it appears on the screen differs completely between a larger and a smaller screen.

For a larger screen, the menu is always visible on the left. For a smaller screen, the menu is collapsed, and the menu toggler is visible. The menu only appears if the user presses the hamburger menu button.

The HTML definition in the NavMenu component looks like this:

<input type="checkbox" title="Navigation menu" class="navbar-toggler" />

It’s an input element with the navbar-toggler CSS class attached.

Let’s look at the CSS code defining that behavior:

.navbar-toggler {
    appearance: none;
    cursor: pointer;
    width: 3.5rem;
    height: 2.5rem;
    color: white;
    position: absolute;
    top: 0.5rem;
    right: 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") no-repeat center/1.75rem rgba(255, 255, 255, 0.1);
}

This CSS class definition defines the visual appearance of the menu toggler. It includes an inline SVG to define the three horizontal lines and a few spacing definitions.

As shown in the image above, on larger screens, this nav menu button is not visible. Let’s look at the CSS code that implements this behavior.

@media (min-width: 641px) {
    .navbar-toggler {
        display: none;
    }
}

The @media syntax introduces the CSS media query feature. In the parentheses, we can implement a filter. In this case, we want all CSS definitions placed inside the curly braces to apply in case the filter condition evaluates to true. In this case, the minimum width of the rendered web page is expected to be 641 pixels.

In other words: When the page is at least 641 pixels in width, we want the CSS definitions inside the curly braces to be applied. In this definition, we set the display property to none for the navbar-toggler CSS class.

Learning: Using CSS media queries, we can implement conditional rules based on a filter criterion. For example, we can add additional CSS definitions for existing CSS classes.

Hint: There are additional CSS definitions inside the NavMenu.razor.css file generated by the default .NET 10 Blazor Web App project template. For simplicity and illustration, I included only the relevant code.

Hiding Information on Smaller Screens

A very useful technique is to show certain information only for larger screens.

As mentioned earlier, you want to carefully decide what information to show on the screen. Does it help the user with the current use case, or does it distract? Is it really necessary?

Consider the following screenshot of the Weather page for a desktop-sized screen.

We have data in four columns: Date, Temperature in Celsius, Temperature in Fahrenheit and Summary.

The Summary column adds a textual explanation and gives slightly more detail than the numerical temperature. Let’s say we don’t want to show that Summary on mobile to help the user focus on the actual temperature numbers.

Let’s add the following class definition to the th and td elements of the table in the Weather page component:

<th class="desktop-only">Summary</th>
<td class="desktop-only">@forecast.Summary</td>

We added the desktop-only CSS class to those HTML elements.

Now, we implement the CSS code inside the Weather.razor.css file:

.desktop-only {
    display: none;
}

@media (min-width: 768px) {
    .desktop-only {
        display: block;
    }
}

We set the display property to none and implement a media query to set it to block for screens larger than 768 pixels.

As you can see in the image, the Summary column doesn’t show up for mobile users.

This is a simple yet powerful technique for conditionally rendering information based on screen size without requiring imperative C# code, such as using the @if directive in the component’s template.

Integrating User Interface Control Libraries

You might think that using a professional user control library, such as Progress Telerik UI for Blazor, solves everything for you. They provide professional-looking, tested user interface controls with accessibility and usability in mind. They also provide theming support, making it easy to apply custom colors.

However, while those components are implemented with responsive design in mind internally, you still have to arrange the layout around them, show and hide panels, and adjust spacing or information density.

You need to understand the overall structure of your web application and know when to step in and adjust the page layout to accommodate the various aspect ratios and device sizes of the modern world—from a handheld smartphone to a large 34" desktop monitor.

A good example provides the implementation of the MainLayout page in the default .NET 10 Blazor Web App project template:

.page {
    position: relative;
    display: flex;
    flex-direction: column;
}

@media (min-width: 641px) {
    .page {
        flex-direction: row;
    }
}

The page CSS class is applied to the most outer div of the MainLayout component. It defines a relative position and a flex layout with the flex direction column. It means that the items will be rendered vertically below each other.

The following media query, with a minimum width of 641 pixels, sets the flex direction to row. It means that for screens at least 641 pixels wide, the items will be placed horizontally beside each other.

This is an excellent example of how to utilize CSS media queries to structure your pages for different screen sizes.

Yes, utilizing one of the proven user interface libraries will take a lot of weight off your shoulders and provide you with ready-to-use building blocks.

It will save you a lot of time and let you focus on solving your business problems rather than reinventing the wheel by implementing foundational components.

However, a fully responsive web application integrates those components to form a truly responsive web application.

In short: Responsive design touches all levels of web application development. You have to consider it when implementing reusable building blocks, and when orchestrating them to form a page or application part.

Best Practices for Implementing Responsive Blazor Web Applications

The following best practices will help you with implementing your responsive Blazor web applications:

1. Use a mobile-first approach: When implementing page layouts, always start with the layout for the smallest screens. It will force you to clearly structure the information and present it in a user-friendly way. Creating the layouts for bigger screens is much simpler than starting with a big screen and trying to size it down.
2. Use CSS Grid & CSS Flexbox: They adapt naturally to screen changes, reducing the need for complex breakpoints and other complex CSS magic. I personally prefer Flexbox for internal component structure and Grid for layout.
3. Use CSS Isolation in Blazor: Component-specific styles written in [Component].razor.css files are scoped and easily maintainable. You’re sure that changes made in that file do not propagate to other components or your entire application code.
4. Avoid screen-size logic in C#: Do not try to detect screen width or similar information from C# interaction code. Let CSS do the layouting and focus on loading, storing, updating and organizing data in your C# Code.
5. Use the browser’s developer tools: Test your responsive web app by changing resolutions and aspect ratios to simulate different devices.
6. Use prebuilt user interface libraries: Reinventing the wheel is time-consuming, and you risk repeating mistakes others have already made and fixed. However, you still need to take care to properly integrate and arrange those third-party components to keep your web application fully responsive.

Conclusion

Blazor provides a powerful, simple user interface rendering engine. However, true responsiveness comes from combining it with modern CSS techniques, such as media queries.

Utilizing CSS Isolation will allow you to separate the scope of your CSS for individual components.

Responsive design is important for implementing modern low-level components, but also for integrating them into a full webpage or web application.

While CSS media queries are powerful and let us implement conditional behavior, it’s still a lot of code that needs to be maintained. Be careful to extract reused code into components to minimize the effect, and use third-party user interface libraries to avoid re-inventing the wheel.

If you want to learn more about Blazor development, watch my free Blazor Crash Course on YouTube. And stay tuned to the Telerik blog for more Blazor Basics.

Blazor is Microsoft’s framework ideal for creating single-page applications (SPAs), complementing the stack for developing applications entirely in .NET. This is why each year we see significant updates in the framework that allows developers to create secure and robust applications. These changes, along with Blazor control suites like the one from Progress Telerik, undoubtedly accelerate the development of complete apps.

In this article, I will tell you about the new interop features with JavaScript, which certainly marks a significant improvement in handling objects from the C# language. Let’s get started!

Understanding the Problem to Solve

Until .NET 10, interoperability with JS was mainly done by invoking JS functions, without being able to directly handle live objects from C# code, which involved creating wrappers and code that could often lead to failures and runtime errors due to syntax errors.

We can get an idea of the above through a practical case. Suppose that in our application, we have a Blazor Data Grid control that allows displaying products from an online store. Each row has a column with a button to show a lightbox popup, where images are displayed. The demonstration code, for you to gain a complete idea, looks as follows.

First, I created a JavaScript file with the necessary functionality to display the lightbox image gallery:

lightboxGallery.js

window.lightboxGallery = {
    LightboxGallery: class LightboxGallery {
        constructor(imageUrls, startIndex = 0) {
            this.images = imageUrls;
            this.currentIndex = startIndex;
            this.overlayElement = null;
            this.keyHandler = null;
        }

        show() {
            this.createOverlay();
            this.displayImage();
        }

        createOverlay() {
            if (this.overlayElement) {
                this.overlayElement.remove();
            }

            this.overlayElement = document.createElement('div');
            this.overlayElement.className = 'lightbox-overlay';
            this.overlayElement.innerHTML = `
            <div class="lightbox-container">
                <button class="lightbox-close">&times;</button>
                <button class="lightbox-prev">&lsaquo;</button>
                <div class="lightbox-content">
                    <img class="lightbox-image" src="https://www.telerik.com" alt="Gallery Image">
                    <div class="lightbox-counter"></div>
                </div>
                <button class="lightbox-next">&rsaquo;</button>
            </div>
        `;

            document.body.appendChild(this.overlayElement);
            
            this.overlayElement.querySelector('.lightbox-close').addEventListener('click', () => this.close());
            this.overlayElement.querySelector('.lightbox-prev').addEventListener('click', () => this.prev());
            this.overlayElement.querySelector('.lightbox-next').addEventListener('click', () => this.next());

            this.overlayElement.addEventListener('click', (e) => {
                if (e.target === this.overlayElement) {
                    this.close();
                }
            });

            this.keyHandler = (e) => {
                if (e.key === 'Escape') this.close();
                if (e.key === 'ArrowLeft') this.prev();
                if (e.key === 'ArrowRight') this.next();
            };
            document.addEventListener('keydown', this.keyHandler);
        }

        displayImage() {
            if (!this.overlayElement) return;

            const img = this.overlayElement.querySelector('.lightbox-image');
            const counter = this.overlayElement.querySelector('.lightbox-counter');

            img.src = this.images[this.currentIndex];
            counter.textContent = `${this.currentIndex + 1} / ${this.images.length}`;
        }

        next() {
            this.currentIndex = (this.currentIndex + 1) % this.images.length;
            this.displayImage();
        }

        prev() {
            this.currentIndex = (this.currentIndex - 1 + this.images.length) % this.images.length;
            this.displayImage();
        }

        close() {
            if (this.overlayElement) {
                this.overlayElement.remove();
                this.overlayElement = null;
            }
            if (this.keyHandler) {
                document.removeEventListener('keydown', this.keyHandler);
                this.keyHandler = null;
            }
        }
        
        getCurrentIndex() {
            return this.currentIndex;
        }
        
        getImagesLength() {
            return this.images.length;
        }
    }
};

The above code shows the definition of a JS class LightboxGallery with some properties to control the gallery. In addition, methods are also defined to enable interaction with it, such as next, prev, show, etc.

This file needs to be registered in App.razor to be able to use it from the application, as I show you below:

....
<head>
    ...
</head>

<body>
    <Routes @rendermode="InteractiveServer" />
    <ReconnectModal />
    <script src="https://www.telerik.com@Assets["_content/Telerik.UI.for.Blazor/js/telerik-blazor.js"]"></script>
    <script src="https://www.telerik.com@Assets["js/lightboxGallery.js"]"></script>
    <script src="https://www.telerik.com@Assets["_framework/blazor.web.js"]"></script>
</body>

</html>

Finally, I created a Razor page where I use the Blazor Data Grid and Blazor Button components to create a quick and functional graphic interface.

@page "/products-traditional"
@inject IJSRuntime JSRuntime

<PageTitle>Products - Traditional JS Interop</PageTitle>

<div class="container-fluid mt-4">
    <div class="row mb-4">
        <div class="col-12">
            <h1 class="display-6">Product Gallery</h1>          
        </div>
    </div>

    <div class="row">
        <div class="col-12">
            <TelerikGrid Data="@Products"
                         Pageable="true"
                         PageSize="10"
                         Sortable="true"
                         FilterMode="@GridFilterMode.FilterRow"
                         Resizable="true"
                         Height="600px">
                <GridColumns>
                    <GridColumn Field="@nameof(Product.Id)" 
                                Title="ID" 
                                Width="80px" />
                    <GridColumn Field="@nameof(Product.Name)" 
                                Title="Product Name" 
                                Width="200px" />
                    <GridColumn Field="@nameof(Product.Category)" 
                                Title="Category" 
                                Width="150px" />
                    <GridColumn Field="@nameof(Product.Price)" 
                                Title="Price" 
                                Width="120px">
                        <Template>
                            @{
                                var product = context as Product;
                                <span>$@product?.Price.ToString("N2")</span>
                            }
                        </Template>
                    </GridColumn>
                    <GridColumn Field="@nameof(Product.Stock)" 
                                Title="Stock" 
                                Width="100px" />
                    <GridColumn Title="Actions" 
                                Width="150px" 
                                Filterable="false" 
                                Sortable="false">
                        <Template>
                            @{
                                var product = context as Product;
                                <TelerikButton OnClick="@(async () => await ShowImagesTraditional(product))"
                                               ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">
                                    Show Images
                                </TelerikButton>
                            }
                        </Template>
                    </GridColumn>
                </GridColumns>
            </TelerikGrid>
        </div>
    </div>

If we want to invoke the methods from the JS code, there are various ways, although in the following example I show you one of the easiest. To display the gallery, we would use the following code:

private async Task ShowImagesTraditional(Product? product)
{
    if (product == null || product.ImageUrls.Count == 0)
        return;
        
    var imageUrlsJson = System.Text.Json.JsonSerializer.Serialize(product.ImageUrls);
    
    // Step 1
    await JSRuntime.InvokeVoidAsync("eval", 
        $"window.__tempGallery = new lightboxGallery.LightboxGallery({imageUrlsJson}, 0)");
    
    // Step 2
    await JSRuntime.InvokeVoidAsync("eval", "window.__tempGallery.show()");
    
    // Step 3
    var currentIndex = await JSRuntime.InvokeAsync<int>("eval", "window.__tempGallery.currentIndex");
    
    // Step 4
    var imagesCount = await JSRuntime.InvokeAsync<int>("eval", "window.__tempGallery.images.length");
    
    // Step 5
    Console.WriteLine($"Traditional: Showing {imagesCount} images, starting at index {currentIndex}");
    
    isGalleryOpen = true;
    StateHasChanged();    
}

Here’s what we do in the above code:

• Step 1: We use eval and global variables in window to maintain the reference to the gallery.
• Step 2: The method show defined in the class LightboxGallery is called.
• Step 3: We obtain the index of the image from the gallery.
• Step 4: The number of images is obtained using lenght.
• Step 5: The results are displayed based on the information obtained.

The same applies to perform operations like navigating forward or backward:

Navigating Forward

await JSRuntime.InvokeVoidAsync("eval", "window.__tempGallery.next()");

Navigating Backward

await JSRuntime.InvokeVoidAsync("eval", "window.__tempGallery.prev()");

Or even to close the gallery:

await JSRuntime.InvokeVoidAsync("eval", "window.__tempGallery.close()");

await JSRuntime.InvokeVoidAsync("eval", "delete window.__tempGallery");

The example being executed looks as follows:

In the previous example, you can notice several problems, starting with the use of eval, which allows executing text as JavaScript code. Although it is an easy way to run code, it poses a danger as it opens the door to code injection. Moreover, it is slow as it cannot be optimized, is difficult to debug and is generally considered a bad practice.

Another problem is the direct use of global variables in window, as there is a risk of collisions with other libraries in the project; there is no management of galleries or lifecycle, plus there is no control over when to destroy it.

A third serious problem is that there can be a memory leak if the object in memory isn’t destroyed since the browser’s garbage collection (GC) cannot collect the reference, leaving listeners and live DOM references.

New JavaScript Interop Features in Blazor 10

We could continue discussing the multiple issues in the example from the previous section, but let’s focus on the new features of Blazor in .NET 10 to address this.

The InvokeConstructorAsync Method

In .NET 10, it is possible to use the method InvokeConstructorAsync, which allows you to invoke a JS constructor asynchronously. This method will execute the new operator and return a type IJSObjectReference. For example, to display a gallery, it would be done as follows:

@code {
    ...
    private IJSObjectReference? galleryInstance;
    private GalleryInfo? currentGalleryInfo;
    ...
    private async Task ShowImagesModern(Product? product)
    {
        if (product == null || product.ImageUrls.Count == 0)
            return;

        try
        {            
            if (galleryInstance != null)
            {
                await galleryInstance.DisposeAsync();
            }
            
            var imageUrls = product.ImageUrls.ToArray();
            
            // Step 1
            galleryInstance = await JSRuntime.InvokeConstructorAsync(
                "lightboxGallery.LightboxGallery", 
                imageUrls, 
                0);

            // Step 2
            await galleryInstance.InvokeVoidAsync("show");

            // Step 3
            var currentIndex = await galleryInstance.GetValueAsync<int>("currentIndex");
            
            // Step 4
            var imagesLength = await galleryInstance.GetValueAsync<int>("images.length");
            
            //Step 5
            currentGalleryInfo = new GalleryInfo
            {
                CurrentIndex = currentIndex,
                TotalImages = imagesLength
            };

            StateHasChanged();
            
            Console.WriteLine($"Modern: Showing {imagesLength} images, starting at index {currentIndex}");
            
        }
        catch (Exception ex)
        {
            Console.WriteLine($"Error showing images: {ex.Message}");
        }
    }
}

In the above code, the exact same steps are followed to display the gallery, but with cleaner code. InvokeConstructorAsync is used to create the object and maintain its reference, which can in turn be used to invoke other methods using the traditional method InvokeVoidAsync. In our example, we invoke the method show defined in the JavaScript class.

To perform other actions, a similar approach is followed:

To advance:

await galleryInstance.InvokeVoidAsync("next");

To go back:

await galleryInstance.InvokeVoidAsync("prev");

To close the gallery:

await galleryInstance.InvokeVoidAsync("close");
currentGalleryInfo = null;
StateHasChanged();

With this new approach, we have a drastic change not only aesthetically but also internally. For example, each component has its own instance, which prevents collisions between them. Additionally, there is a controlled lifecycle with no memory leaks. You may also notice that parameter passing is much simpler and safer.

The GetValueAsync and SetValueAsync Methods

In addition to the method for invoking a JS function constructor, we can also access the values of the instance obtained through the methods GetValueAsync<TValue>(string identifier) and SetValueAsync<TValue>(string identifier, TValue value). A clear example of this can be seen when we obtain the value of the current image and the length for debugging purposes:

// Step 3
var currentIndex = await galleryInstance.GetValueAsync<int>("currentIndex");

// Step 4
var imagesLength = await galleryInstance.GetValueAsync<int>("images.length");

//Step 5
currentGalleryInfo = new GalleryInfo
{
    CurrentIndex = currentIndex,
    TotalImages = imagesLength
};

StateHasChanged();

Console.WriteLine($"Modern: Showing {imagesLength} images, starting at index {currentIndex}");

In the above code, these values are displayed through an Console.WriteLine, but you could perfectly use them to modify other UI elements or to perform operations.

Conclusion

Throughout this article, you have been introduced to the new JavaScript interop features available in .NET 10, which undoubtedly marks an evolution in the way interaction with JS occurs when necessary. It is time to create safer and typeable code in web apps based on Blazor.

Remember, you can try Telerik UI for Blazor free for 30 days:

Try Now

Ever since the significant changes that landed with .NET 8, we’ve seen incremental updates to Blazor over several releases.

This year seems set to continue that trend, with some key gaps being filled and refinements to key features. So no structural shifts, new hosting models or render modes, but we do finally get a Label component for forms!

Here are some notable Blazor changes and new features that landed in .NET 11 Previews 1 and 2.

TempData for Static SSR

Ever since .NET 8, we’ve had SSR mode for Blazor. It’s a way of building applications using Blazor’s Razor components, but without resorting to Blazor Server or Blazor WASM to run those components.

With SSR, when a user requests your page, Blazor runs on the server, locates the relevant page component, renders it and returns the generated HTML which is then displayed in the browser.

In this mode you can also use forms to capture user input.

But sometimes you want to take information and persist it between page navigations. For example, maybe a user enters their name in a form, and you want to show them a personalized message on the subsequent confirmation screen, “Thanks, Jon, for your order.”

Prior to .NET 11, this required you to pass the value along somehow, with common solutions involving query string, session state or custom cookies.

But MVC and Razor Pages developers have long been able to use something called Temp Data to store that information between screens. Temp Data is specifically for capturing short-lived messages or data that only need to survive one redirect, then disappear.

In .NET 11, Temp Data is coming to Blazor and will be available as a cascading parameter in static SSR components, with no extra registration needed beyond the usual AddRazorComponents():

[CascadingParameter]
public ITempData? TempData { get; set; }

Let’s say you’re about to redirect your user to a different page. You can write a value to TempData:

private void HandleSubmit()
{
    TempData["SuccessMessage"] = $"Thanks {Input.Name}, your message has been sent!";
    Navigation.NavigateTo("/contact/confirmation");
}

Then pick that up on the page they’re redirected to:

protected override void OnInitialized()
{
    // Get() reads and marks for deletion - one-shot read
    confirmationMessage = TempData?.Get("SuccessMessage") as string;
}

Under the hood, these values are stored in a cookie in the user’s browser.

Once you’ve retrieved a value via Get, it’s marked for deletion. So if you want to check the value without it being deleted, you can use Peek instead. If you want to keep something that has been marked for deletion you can call Keep to cancel the deletion.

IHostedService in Blazor WebAssembly

If you’re using Blazor WebAssembly, you may well have realized there’s one thing you can’t easily do with Blazor running in the browser: schedule jobs to run in the background.

This is a challenge because sometimes you want to separate background work from your component lifecycles. For example, you might want to poll an API (maybe a pricing or notifications endpoint).

In WASM apps, prior to .NET 11, this has been tricky to achieve, often requiring the use of timers within specific components (tied to component lifecycles and only running when the component is rendered), or singleton services with a manual timer.

.NET 11 simplifies this with IHostedService.

You can add a hosted service to your Blazor WASM app and it will start with the app (not a specific component), and run independently of navigation.

AddHostedService<T>() now works with WebAssemblyHostBuilder:

var builder = WebAssemblyHostBuilder.CreateDefault(args);
builder.Services.AddHostedService<PricePollingService>();
await builder.Build().RunAsync();

The service itself is standard BackgroundService, identical to its server-side equivalent:

public class PricePollingService(PriceState state) : BackgroundService
{
    protected override async Task ExecuteAsync(CancellationToken stoppingToken)
    {
        while (!stoppingToken.IsCancellationRequested)
        {
            await FetchPricesAsync();
            state.NotifyUpdate();
            await Task.Delay(TimeSpan.FromSeconds(3), stoppingToken);
        }
    }
}

This example uses a Singleton PriceState service and a component which listens for updates to that state.

The PriceState service acts as a shared state container which the background service writes to:

Program.cs

builder.Services.AddSingleton<PriceState>();

PriceState.cs

public class PriceState
{
    public event Action? OnChange;

    public List<PriceQuote> Quotes { get; private set; } = [];
    public DateTimeOffset LastUpdated { get; private set; }

    public void UpdateQuotes(List<PriceQuote> quotes)
    {
        Quotes = quotes;
        LastUpdated = DateTimeOffset.UtcNow;
        OnChange?.Invoke();
    }
}

And then you can subscribe to the OnChange event when that data changes:

PriceWatcher.razor

@implements IDisposable
@inject PriceState State

<p>Last updated: @State.LastUpdated</p>

<!-- render price data here -->

@code {
    protected override void OnInitialized()
    {
        State.OnChange += HandleStateChanged;
    }

    private void HandleStateChanged()
    {
        InvokeAsync(StateHasChanged);
    }

    public void Dispose()
    {
        State.OnChange -= HandleStateChanged;
    }
}

Important note: WASM is single-threaded. BackgroundService gives you a convenient way to abstract background tasks, but not true parallelism.

I/O-bound work (polling, fetching) is typically fine because it’s mostly waiting (await), which frees the thread up in the meantime. But CPU-heavy work would block the UI.

But fear not, there’s a solution for that too!

Web Worker Template

For anything CPU-heavy, you want to keep the main thread (which also handles the UI) free.

.NET 11 introduces dotnet new webworker, which scaffolds a Razor class library with the JS plumbing needed to run .NET code in a browser web worker. Modern web browsers support web workers as a convenient way to run tasks completely separately from your main application’s thread.

The template will create a WebWorkerClient class which uses a factory pattern to create worker instances. Then you can define your worker methods using [JSExport].

Here’s an example, which computes primes (a CPU-heavy task).

PrimesWorker.cs

[SupportedOSPlatform("browser")]
public static partial class PrimesWorker
{
    [JSExport]
    public static string ComputePrimes(int limit)
    {
        // CPU-intensive work runs on the worker thread
        // UI stays responsive
        var result = SieveOfEratosthenes(limit);
        return JsonSerializer.Serialize(new PrimeResult(primes.Count, primes.TakeLast(5).ToArray(), sw.ElapsedMilliseconds));
    }
}

public record PrimeResult(int Count, int[] LastFive, long ElapsedMs);

You can invoke this method from a component (via a web worker).

private const int limit = 50_000_000;

var worker = await WebWorkerClient.CreateAsync(JSRuntime);
var result = await worker.InvokeAsync<PrimeResult>(
    "WebWorkerAppDemo.PrimesWorker.ComputePrimes",
    args: [limit]);

If you were to run that same prime number code directly in a component, it would lock UI updates for as long as it’s running. Try it with the above approach (using web workers), and the UI will stay entirely responsive throughout.

Some important notes about web workers:

• Class must be static partial with [SupportedOSPlatform("browser")].
• Return types: primitives or strings only (complex types must be serialized to JSON).
• Your project needs <AllowUnsafeBlocks>true</AllowUnsafeBlocks> set in its csproj.
• The worker loads a second .NET runtime, so startup is slow but compute is genuinely parallel.
• Template produces a class library, which you can then reference from your main project.

Relative Navigation

This is one of those “if you know, you know” challenges.

In previous versions of .NET, when you want to render a relative link, things got tricky. Say you wanted a link to an FAQ page at /faq. .NET would assume you wanted to navigate to /faq at the app root. But if you were already on /docs/, you might well have wanted that link to go to /docs/faq.

The workaround up to now has been to use hardcoded full paths everywhere, which is asking for trouble when you start moving things around.

NavigationManager.NavigateTo() and NavLink now accept RelativeToCurrentUri, which, when set to true, means relative paths will resolve against the current page path instead of the app root:

@page "/docs/getting-started"

@* .NET 11 - resolves to /docs/getting-started/overview *@
<NavLink href="overview" RelativeToCurrentUri="true">Overview</NavLink>

@* Before - had to hardcode the full path *@
<NavLink href="/docs/getting-started/overview">Overview</NavLink>

Programmatic navigation:

Navigation.NavigateTo("faq", new NavigationOptions
{
    RelativeToCurrentUri = true
});

Note: Path must not have a leading slash for relative resolution (“overview” not “/overview”).

DisplayName and Label Components

This may well be one of those features that leaves you wondering how it took so long to appear, but Blazor now has a Label component (and a handy DisplayName one too).

Both components read display names from model attributes:

public class ProductModel
{
    [Display(Name = "Production Date")]  // DisplayName and Label read this
    public DateOnly? ProductionDate { get; set; }

    [DisplayName("Unit Price (£)")]     // Also supported, but [Display] takes precedence
    public decimal Price { get; set; }

    public int StockCount { get; set; }  // Falls back to raw property name
}

Here’s how you can use them in a form:

@* Label wraps the input - accessible by default *@
<Label For="@(() => Model.ProductionDate)" class="form-label">
    <InputDate @bind-Value="Model.ProductionDate" class="form-control" />
</Label>

@* DisplayName standalone *@
<th><DisplayName For="@(() => Model.Price)" /></th>

Previously you had to write your own <label> components, so this is a welcome addition.

EnvironmentBoundary Component

Ever felt the need to show different information on the screen depending on which environment your app’s running in? (Think UI that only shows up when you’re running locally, or on staging.)

Now you can conditionally render content based on the hosting environment:

<EnvironmentBoundary Include="Development">
    <p>Debug tools enabled</p>
</EnvironmentBoundary>

<EnvironmentBoundary Exclude="Production">
    <p>Test banner</p>
</EnvironmentBoundary>

<EnvironmentBoundary Include="Staging,Production">
    <p>Analytics script</p>
</EnvironmentBoundary>

Previously, you had to inject IWebHostEnvironment and write manual conditional statements. This declarative approach is cleaner (note the matching of environment is case-insensitive).

BasePath Component

Another small but handy change.

<BasePath /> in App.razor replaces the hardcoded <base href="https://www.telerik.com/">:

<head>   
    <BasePath />   
</head>

This will take the value from NavigationManager.BaseUri and essentially returns whatever UsePathBase sets (which you can configure in Program.cs).

This is handy if you’re running your app on a subpath, as the base href will be automatically set to the correct value.

SignalR ConfigureConnection

If you need to configure your SignalR connection for Blazor Server, you now have easier config available via AddInteractiveServerRenderMode.

In .NET 11, it accepts a ConfigureConnection callback for the underlying SignalR connection:

app.MapRazorComponents<App>()
    .AddInteractiveServerRenderMode(options =>
    {
        options.ConfigureConnection = connectionOptions =>
        {
            connectionOptions.ApplicationMaxBufferSize = 512 * 1024;
            connectionOptions.TransportMaxBufferSize = 512 * 1024;
            connectionOptions.Transports = HttpTransportType.WebSockets;
          connectionOptions.AllowStatefulReconnects = true;
            connectionOptions.CloseOnAuthenticationExpiration = true;
        };
    });

Previously, you had to resort to global SignalR hub config. Now you can target Blazor’s hub specifically.

You’ll probably find yourself spending time here if you run into errors because your components hold too much state, you want to tweak stateful reconnection logic or have other reasons to tweak how the SignalR part of Blazor Server works.

What to Watch

That wraps up a quick tour of some of the highlights of .NET 11 Previews 1 and 2 for Blazor.

Here are a few things that look set to land in future previews:

• SessionData for static SSR – The session-scoped counterpart to TempData
• Cache component – Component-level output caching
• Client-side validation without a circuit – No need to resort to Blazor Server for your statically rendered forms
• Aspire integration improvements
• Virtualize with variable-height items
• [SupplyParameterFromTempData] attribute

.NET 11 will be released in November, with preview releases dropping every month until then.