Syncfusion Blazor Components Are Compatible with .NET 8.0
Live Chat Icon For mobile
Live Chat Icon
Popular Categories.NET  (180).NET Core  (28).NET MAUI  (224)Angular  (113)ASP.NET  (49)ASP.NET Core  (81)ASP.NET MVC  (87)Azure  (41)Black Friday Deal  (1)Blazor  (234)BoldSign  (14)DocIO  (24)Essential JS 2  (110)Essential Studio  (199)File Formats  (72)Flutter  (135)JavaScript  (226)Microsoft  (121)PDF  (83)Python  (1)React  (105)Streamlit  (1)Succinctly series  (131)Syncfusion  (960)TypeScript  (33)Uno Platform  (3)UWP  (3)Vue  (46)Webinar  (53)Windows Forms  (59)WinUI  (72)WPF  (162)Xamarin  (159)XlsIO  (38)Other CategoriesBarcode  (5)BI  (29)Bold BI  (8)Bold Reports  (2)Build conference  (10)Business intelligence  (55)Button  (4)C#  (163)Chart  (145)Chart of the week  (57)Cloud  (15)Company  (440)Dashboard  (8)Data Science  (3)Data Validation  (8)DataGrid  (73)Development  (676)Doc  (7)DockingManager  (1)eBook  (99)Enterprise  (22)Entity Framework  (7)Essential Tools  (13)Excel  (43)Extensions  (23)File Manager  (7)Gantt  (20)Gauge  (12)Git  (5)Grid  (31)HTML  (13)Installer  (2)Knockout  (2)Language  (1)LINQPad  (1)Linux  (2)M-Commerce  (1)Metro Studio  (11)Mobile  (519)Mobile MVC  (9)OLAP server  (2)Open source  (1)Orubase  (12)Partners  (21)PDF viewer  (45)Performance  (13)PHP  (2)PivotGrid  (5)Predictive Analytics  (6)Report Server  (3)Reporting  (8)Reporting / Back Office  (9)Rich Text Editor  (12)Road Map  (12)Scheduler  (54)Security  (5)SfDataGrid  (9)Silverlight  (21)Sneak Peek  (32)Solution Services  (4)Spreadsheet  (11)SQL  (15)Stock Chart  (1)Surface  (4)Tablets  (5)Theme  (12)Tips and Tricks  (113)UI  (400)Uncategorized  (68)Unix  (2)User interface  (68)Visual State Manager  (2)Visual Studio  (31)Visual Studio Code  (19)Web  (624)What's new  (337)Windows 8  (19)Windows App  (2)Windows Phone  (15)Windows Phone 7  (9)WinRT  (26)
Syncfusion Blazor Components Are Compatible with .NET 8.0

Syncfusion Blazor Components Are Compatible with .NET 8.0

On Nov. 14, 2023, Microsoft unveiled the much-anticipated .NET 8 release, which has LTS support and brings lots of enhancements for web developers.

From the 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 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.

.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 and demo.

You can also find the Syncfusion Blazor NuGet package supporting .NET 8 on nuget.org. Refer to the following image.Syncfusion Blazor Grid Package with .NET 8 support

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:

Let’s briefly look at the .NET 8 interactive rendering modes and location and authentication support for the Syncfusion Blazor platform with examples.

Interactive mode

Interactive location

Authentication

Example

Server

Global

Individual account

Blazor .NET 8 server render mode individaul

None

Blazor .NET 8 server render mode Global None

Per page/component

Individual account

Blazor .NET 8 server render mode PerPage Individual

None

Blazor .NET 8 Server render mode PerPage None

WASM

Global

Individual account

Blazor .NET 8 WASM render mode Global Individual

None

Blazor .NET 8 WASM render mode Global None

Per page/component

Individual account

Blazor .NET 8 WASM render modes PerPage individual

None

Blazor .NET 8 WASM render modes PerPage None

Auto

Global

Individual account

Blazor .NET 8 auto render mode Global Individual

None

Blazor .NET 8 auto render mode Global None

Per page/component

Individual account

Blazor .NET 8 auto render mode PerPage individual

None

Blazor .NET 8 auto render modes  PerPage None

Static SSR

Global

Individual account

Blazor .NET 8 Static SSR Global individual

None

Blazor .NET 8 Static SSR Global None

Per page/component

Individual account

Blazor .NET 8 Static SSR PerPage individual

None

Blazor .NET 8 Static SSR PerPage None

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. We’ll use the 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 or the Syncfusion Blazor extension. 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 and Syncfusion.Blazor.Themes NuGet packages in the {App name}.Client project.

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.

@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.

.... 
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.

<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.

@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

Note: For more details, refer to the Getting Started with the Blazor web app documentation.

.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

Note: For more details, refer to the Syncfusion Visual Studio Extensions Are Compatible with .NET 8.0 blog.

GitHub reference

For more details, refer to .NET 8 render modes on GitHub.

Conclusion

Thanks for reading! In this blog, we learned about different .NET 8 features and how Syncfusion Blazor 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.

Try out these features and share your feedback as comments on this blog. You can also reach us through our support forums, support portal, or feedback portal.

Related blogs

Tags:

Share this post:

Popular Now

Be the first to get updates

Subscribe RSS feed

Be the first to get updates

Subscribe RSS feed