Syncfusion Blazor Components Are Compatible with .NET 8.0
Tags: blazor, dotnet8, whatsnew, web
Published: 2023-11-28 14:01:49

---
title: Syncfusion Blazor Components Are Compatible with .NET 8.0
published: true
date: 2023-11-23 13:13:02 UTC
tags: blazor, dotnet8, whatsnew, web
canonical_url: https://www.syncfusion.com/blogs/post/blazor-ui-support-dotnet-8.aspx
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/unetmsozlh1ni2gh7fmy.png
---
On Nov. 14, 2023, Microsoft unveiled the much-anticipated [.NET 8 release](https://devblogs.microsoft.com/dotnet/announcing-dotnet-8/ ".NET 8 release"), which has LTS support and brings lots of enhancements for web developers.

From the [2023 Volume 3 SP release](https://help.syncfusion.com/common/essential-studio/release-notes/v23.2.4 "Syncfusion Essential Studio 2023 Volume 3 SP release") onwards, Syncfusion Blazor components also support .NET version 8.0.

In this blog, let’s see how the Syncfusion [Blazor](https://www.syncfusion.com/blazor-components "Blazor Library") components work with the new .NET 8 features.

## What’s new in .NET 8 for Blazor

Version 8 of .NET brings a complete solution for modern web app development. The following are major features and improvements in .NET 8 for Blazor:

- Full stack web UI
  - Static server-side rendering (SSR).
  - Streaming rendering.
  - Enhanced navigation and forms.
  - Interactive render modes: server, WebAssembly, and auto (both server and WebAssembly).
- The Web App Template supports more options, such as interactive render modes, interactive location rendering, and the ability to decide whether sample pages (e.g., counter, weather) are needed or not.
- .NET WebAssembly has improvements like a jiterpreter-based runtime, hot reload capabilities, and a web-friendly packaging format (WebCIL).

For more details, refer to [what’s new in .NET 8 for Blazor](https://learn.microsoft.com/en-us/aspnet/core/release-notes/aspnetcore-8.0?view=aspnetcore-8.0#blazor "What’s New in .NET 8 for Blazor").

## .NET 8 support for Syncfusion Blazor components

With the 2023 Volume 3 Service Pack release (version 23.2.4), Syncfusion Blazor UI components have seamless, integrated support for .NET 8. Developers can work with the new .NET 8 features combined with the rich functionalities of Syncfusion Blazor UI components.

For more details, refer to the [Syncfusion Blazor release notes](https://sfblazor.azurewebsites.net/staging/documentation/release-notes/23.2.4?type=all "Blazor Release Notes") and [demo](https://blazor.syncfusion.com/demos/ "Blazor online demo").

You can also find the [Syncfusion Blazor NuGet package](https://www.nuget.org/packages/Syncfusion.Blazor.Grid#supportedframeworks-body-tab "Blazor NuGet package") supporting .NET 8 on [nuget.org](https://www.nuget.org/ "Nuget Gallery"). Refer to the following image. ![Syncfusion Blazor Grid Package with .NET 8 support](https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Syncfusion-Blazor-Grid-Package-with-.NET-8-support.png)

## Interactive render modes, location, and authentication

The interactive render modes in .NET 8 for Blazor decide the hosting model in .NET 8 as well as whether the app is interactive or not.

For more details, refer to the following documentation:

- [ASP.NET Core Blazor render modes](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes "ASP.NET Core Blazor render modes")
- [Tooling for ASP.NET Core Blazor](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=windows "Tooling for ASP.NET Core Blazor")

Let’s briefly look at the .NET 8 interactive rendering modes and location and authentication support for the Syncfusion Blazor platform with examples.
<table>
<tbody>
<tr>
<td width="159">
<p><strong>Interactive mode</strong></p>
</td>
<td width="160">
<p><strong>Interactive location</strong></p>
</td>
<td width="169">
<p><strong>Authentication</strong></p>
</td>
<td width="135">
<p><strong>Example</strong></p>
</td>
</tr>
<tr>
<td rowspan="4" width="159">
<p>Server</p>
</td>
<td rowspan="2" width="160">
<p>Global</p>
</td>
<td width="169">
<p>Individual account</p>
</td>
<td width="135">
<p><a title="Blazor .NET8 Render Modes GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/Server-Global-Individual" target="_blank" rel="noopener">Blazor .NET 8 server render mode individaul</a></p>
</td>
</tr>
<tr>
<td width="169">
<p>None</p>
</td>
<td width="135">
<p><a title="Blazor .NET 8 Render Modes Server Global None GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/Server-Global-None" target="_blank" rel="noopener">Blazor .NET 8 server render mode Global None</a></p>
</td>
</tr>
<tr>
<td rowspan="2" width="160">
<p>Per page/component</p>
</td>
<td width="169">
<p>Individual account</p>
</td>
<td width="135">
<p><a title="Blazor .NET8 Render Modes Server PerPage Individual GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/Server-PerPage-Individual" target="_blank" rel="noopener">Blazor .NET 8 server render mode PerPage Individual</a></p>
</td>
</tr>
<tr>
<td width="169">
<p>None</p>
</td>
<td width="135">
<p><a title="Blazor .NET8 Render Modes Server PerPage None GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/Server-PerPage-None" target="_blank" rel="noopener">Blazor .NET 8 Server render mode PerPage None</a></p>
</td>
</tr>
<tr>
<td rowspan="4" width="159">
<p>WASM</p>
</td>
<td rowspan="2" width="160">
<p>Global</p>
</td>
<td width="169">
<p>Individual account</p>
</td>
<td width="135">
<p><a title="Blazor .NET8 Render Modes WASM Global Individual GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/WASM-Global-Individual" target="_blank" rel="noopener">Blazor .NET 8 WASM render mode Global Individual</a></p>
</td>
</tr>
<tr>
<td width="169">
<p>None</p>
</td>
<td width="135">
<p><a title="Blazor .NET8 Render Modes WASM Global None GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/WASM-Global-None" target="_blank" rel="noopener">Blazor .NET 8 WASM render mode Global None</a></p>
</td>
</tr>
<tr>
<td rowspan="2" width="160">
<p>Per page/component</p>
</td>
<td width="169">
<p>Individual account</p>
</td>
<td width="135">
<p><a title="Blazor .NET8 Render Modes WASM PerPage Individual GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/WASM-PerPage-Individual" target="_blank" rel="noopener">Blazor .NET 8 WASM render modes PerPage individual</a></p>
</td>
</tr>
<tr>
<td width="169">
<p>None</p>
</td>
<td width="135">
<p><a title="Blazor .NET8 Render Modes WASM PerPage None GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/WASM-PerPage-None" target="_blank" rel="noopener">Blazor .NET 8 WASM render modes PerPage None</a></p>
</td>
</tr>
<tr>
<td rowspan="4" width="159">
<p>Auto</p>
</td>
<td rowspan="2" width="160">
<p>Global</p>
</td>
<td width="169">
<p>Individual account</p>
</td>
<td width="135">
<p><a title="Blazor .NET8 auto render mode Global Individual GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/ServerWasm-Global-Individual" target="_blank" rel="noopener">Blazor .NET 8 auto render mode Global Individual</a></p>
</td>
</tr>
<tr>
<td width="169">
<p>None</p>
</td>
<td width="135">
<p><a title="Blazor .NET 8 auto render mode Global None GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/ServerWASM-Global-None" target="_blank" rel="noopener">Blazor .NET 8 auto render mode Global None</a></p>
</td>
</tr>
<tr>
<td rowspan="2" width="160">
<p>Per page/component</p>
</td>
<td width="169">
<p>Individual account</p>
</td>
<td width="135">
<p><a title="Blazor .NET 8 auto render mode PerPage Individual GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/ServerWasm-PerPage-Individual" target="_blank" rel="noopener">Blazor .NET 8 auto render mode PerPage individual</a></p>
</td>
</tr>
<tr>
<td width="169">
<p>None</p>
</td>
<td width="135">
<p><a title="Blazor .NET 8 auto render mode PerPage None GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/ServerWASM-PerPage-None" target="_blank" rel="noopener">Blazor .NET 8 auto render modes  PerPage None</a></p>
</td>
</tr>
<tr>
<td rowspan="4" width="159">
<p>Static SSR</p>
</td>
<td rowspan="2" width="160">
<p>Global</p>
</td>
<td width="169">
<p>Individual account</p>
</td>
<td width="135">
<p><a title="Blazor .NET 8 Static SSR Global Individual GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/SSR-Global-Individual" target="_blank" rel="noopener">Blazor .NET 8 Static SSR Global individual</a></p>
</td>
</tr>
<tr>
<td width="169">
<p>None</p>
</td>
<td width="135">
<p><a title="Blazor .NET 8 Static SSR Global None GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/SSR-Global-None" target="_blank" rel="noopener">Blazor .NET 8 Static SSR Global None</a></p>
</td>
</tr>
<tr>
<td rowspan="2" width="160">
<p>Per page/component</p>
</td>
<td width="169">
<p>Individual account</p>
</td>
<td width="135">
<p><a title="Blazor .NET 8 Static SSR PerPage Individual GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/SSR-PerPage-Individual" target="_blank" rel="noopener">Blazor .NET 8 Static SSR PerPage individual</a></p>
</td>
</tr>
<tr>
<td width="169">
<p>None</p>
</td>
<td width="135">
<p><a title="Blazor .NET 8 Static SSR PerPage None GitHub demo" href="https://github.com/SyncfusionExamples/blazor-net8-render-modes/tree/master/SSR-PerPage-None" target="_blank" rel="noopener">Blazor .NET 8 Static SSR PerPage None</a></p>
</td>
</tr>
</tbody>
</table>
**Note:** A few of our Syncfusion Blazor components are incompatible with the static SSR rendering. These components are dependent on the client for calculation of dimension, boundary detection for position, pop-up alignment based on collision, etc.

## Getting started with Blazor web apps and Syncfusion Blazor components

Let’s see how to create a Blazor web app with Syncfusion Blazor components using [Visual Studio](https://visualstudio.microsoft.com/vs/ "Visual Studio"). We’ll use the [Syncfusion Blazor DataGrid](https://blazor.syncfusion.com/documentation/datagrid/getting-started "Getting started with Syncfusion Blazor DataGrid") component.

### Step 1: Create a new Blazor web app

You can create a  **Blazor web app**  using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0 "Tooling for ASP.NET Core Blazor") or the [Syncfusion Blazor extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio "Syncfusion Blazor Template Studio"). We are using the following configuration for demonstration purposes:

- The authentication type is **Individual**  **Accounts**.
- The interactive render mode is **Auto (Server and WebAssembly)**.
- The interactivity location is **per page/component**.

### Step 2: Install Syncfusion Blazor DataGrid and themes NuGet packages in the Blazor web app

Install the [Syncfusion.Blazor.Grid](https://www.nuget.org/packages/Syncfusion.Blazor.Grid/ "Syncfusion.Blazor.Grid NuGet Package") and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/ "Syncfusion.Blazor.Themes NuGet Package") NuGet packages in the **{App name}.Client** project.

```csharp
Install-Package Syncfusion.Blazor.Grid -Version 23.2.4 
Install-Package Syncfusion.Blazor.Themes -Version 23.2.4
```

### Step 3: Import the namespaces

Then, open the  **\_Imports.razor**  file in the **{App name}.Client** project and import the **Syncfusion.Blazor** and **Syncfusion.Blazor.Grids** namespaces.

```csharp
@using Syncfusion.Blazor 
@using Syncfusion.Blazor.Grids
```

### Step 4: Register the Syncfusion Blazor service

Register the Syncfusion Blazor service in the  **~/Program.cs**  file in both **{App name}** and **{App name}.Client** projects.

```csharp
.... 
using Syncfusion.Blazor; 
.... 
builder.Services.AddSyncfusionBlazor(); 

```

### Step 5: Add stylesheet and script resources

Include the stylesheet reference in the  <head> tag and the script reference at the end of the  <body> tag in the **~/Components/App.razor** file. Refer to the following code example.

```xml
<head> 
  …. 
  <link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" /> 
</head> 
.... 
<body> 
  .... 
  <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script> 
</body>

```

### Step 6: Add Syncfusion Blazor DataGrid component

Add the Syncfusion Blazor DataGrid component in the **~/Pages/Counter.razor** file.

```csharp
@page "/counter"
@rendermode InteractiveAuto

<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
    <GridPageSettings PageSize="5"></GridPageSettings>
    <GridColumns>
        <GridColumn Field=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right" Width="120"></GridColumn>
        <GridColumn Field=@nameof(Order.CustomerID) HeaderText="Customer Name" Width="150"></GridColumn>
        <GridColumn Field=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Type="ColumnType.Date" TextAlign="TextAlign.Right" Width="130"></GridColumn>
        <GridColumn Field=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Right" Width="120"></GridColumn>
    </GridColumns>
</SfGrid>

@code
{
    public List<Order> Orders { get; set; }

    protected override void OnInitialized()
    {
        Orders = Enumerable.Range(1, 75).Select(x => new Order()
        {
            OrderID = 1000 + x,
            CustomerID = (new string[] { "ALFKI", "ANANTR", "ANTON", "BLONP", "BOLID" })[new Random().Next(5)],
            Freight = 2.1 * x,
            OrderDate = DateTime.Now.AddDays(-x),
        }).ToList();
    }

    public class Order
    {
        public int? OrderID { get; set; }
        public string CustomerID { get; set; }
        public DateTime? OrderDate { get; set; }
        public double? Freight { get; set; }
    }
}
```

Finally, run the application using the **Ctrl+F5** shortcut key. ![Creating a Blazor app with Syncfusion components and .NET 8 support](https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Syncfusion-Blazor-Grid-created-with-Blazor-Web-App-in-.NET-8.png)

**Note:** For more details, refer to the [Getting Started with the Blazor web app documentation](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app "Getting started with Blazor web app").

## .NET 8 support in Blazor Template Studio

The Syncfusion Blazor Template Studio now supports .NET version 8. With this, you can create a web app with an interaction mode, an interactivity location, and authentication types. ![Blazor Template Studio with .NET 8 configurations](https://www.syncfusion.com/blogs/wp-content/uploads/2023/11/Blazor-Template-Studio-with-.NET-8-configurations-1.png)

**Note:** For more details, refer to the [Syncfusion Blazor Template Studio documentation](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio "Syncfusion Blazor Template Studio").

## GitHub reference

For more details, refer to [.NET 8 render modes on GitHub](https://github.com/SyncfusionExamples/blazor-net8-render-modes "Blazor .NET 8 Render Modes GitHub demo").

## Conclusion

Thanks for reading! In this blog, we learned about different .NET 8 features and how Syncfusion [Blazor](https://www.syncfusion.com/blazor-components "Blazor components") components work in .NET 8 with different interactive modes, interactive locations, and various authentication types. You can check out these updates in our [2023 Volume 3 SP release](https://help.syncfusion.com/common/essential-studio/release-notes/v23.2.4 "Syncfusion 2023 Volume 3 SP release").

Try out these features and share your feedback as comments on this blog. You can also reach us through our [support forums](https://www.syncfusion.com/forums "Syncfusion Support Forum"), [support portal](https://support.syncfusion.com/ "Syncfusion Support Portal"), or [feedback portal](https://www.syncfusion.com/feedback/ "Syncfusion Feedback Portal").

## Related blogs

- [Transforming Blazor AutoComplete: Unleashing Google-Like Search Suggestions](https://www.syncfusion.com/blogs/post/google-like-suggestions-blazor.aspx "Blog: Transforming Blazor AutoComplete: Unleashing Google-Like Search Suggestions")
- [Boost Blazor Dropdown List Performance with Virtualization](https://www.syncfusion.com/blogs/post/virtualization-blazor-dropdown-list.aspx "Blog: Boost Blazor Dropdown List Performance with Virtualization")
- [Unveiling New Date-Only and Time-Only Features in Blazor Pickers](https://www.syncfusion.com/blogs/post/date-time-only-blazor-pickers.aspx "Blog: Unveiling New Date-Only and Time-Only Features in Blazor Pickers")
- [How to Add a Blazor WebAssembly Project to an ASP.NET Core App](https://www.syncfusion.com/blogs/post/blazor-wasm-to-asp-dotnet-core.aspx "Blog: How to Add a Blazor WebAssembly Project to an ASP.NET Core App")