On Nov. 14, 2023, Microsoft unveiled the much-anticipated .NET 8 launch, which has LTS assist and brings a lot of enhancements for internet builders.
From the 2023 Quantity 3 SP launch onwards, Syncfusion Blazor parts additionally assist .NET model 8.0.
On this weblog, let’s see how the Syncfusion Blazor parts work with the brand new .NET 8 options.
What’s new in .NET 8 for Blazor
Model 8 of .NET brings an entire answer for contemporary internet app improvement. The next are main options and enhancements in .NET 8 for Blazor:
- Full stack internet UI
- Static server-side rendering (SSR).
- Streaming rendering.
- Enhanced navigation and varieties.
- Interactive render modes: server, WebAssembly, and auto (each server and WebAssembly).
- The Net App Template helps extra choices, resembling interactive render modes, interactive location rendering, and the power to resolve whether or not pattern pages (e.g., counter, climate) are wanted or not.
- .NET WebAssembly has enhancements like a jiterpreter-based runtime, sizzling reload capabilities, and a web-friendly packaging format (WebCIL).
For extra particulars, check with what’s new in .NET 8 for Blazor.
.NET 8 assist for Syncfusion Blazor parts
With the 2023 Quantity 3 Service Pack launch (model 23.2.4), Syncfusion Blazor UI parts have seamless, built-in assist for .NET 8. Builders can work with the brand new .NET 8 options mixed with the wealthy functionalities of Syncfusion Blazor UI parts.
For extra particulars, check with the Syncfusion Blazor launch notes and demo.
You may also discover the Syncfusion Blazor NuGet package deal supporting .NET 8 on nuget.org. Discuss with the next picture.
Interactive render modes, location, and authentication
The interactive render modes in .NET 8 for Blazor resolve the internet hosting mannequin in .NET 8 in addition to whether or not the app is interactive or not.
For extra particulars, check with the next documentation:
Let’s briefly take a look at the .NET 8 interactive rendering modes and site and authentication assist for the Syncfusion Blazor platform with examples.
Word: Just a few of our Syncfusion Blazor parts are incompatible with the static SSR rendering. These parts are depending on the consumer for calculation of dimension, boundary detection for place, pop-up alignment based mostly on collision, and so on.
Getting began with Blazor internet apps and Syncfusion Blazor parts
Let’s see the way to create a Blazor internet app with Syncfusion Blazor parts utilizing Visible Studio. We’ll use the Syncfusion Blazor DataGrid element.
Step 1: Create a brand new Blazor internet app
You’ll be able to create a Blazor internet app utilizing Visible Studio 2022 by way of Microsoft Templates or the Syncfusion Blazor extension. We’re utilizing the next configuration for demonstration functions:
- The authentication sort is Particular person Accounts.
- The interactive render mode is Auto (Server and WebAssembly).
- The interactivity location is per web page/element.
Step 2: Set up Syncfusion Blazor DataGrid and themes NuGet packages within the Blazor internet app
Set up the Syncfusion.Blazor.Grid and Syncfusion.Blazor.Themes NuGet packages within the {App title}.Shopper venture.
Set up-Bundle Syncfusion.Blazor.Grid -Model 23.2.4 Set up-Bundle Syncfusion.Blazor.Themes -Model 23.2.4
Step 3: Import the namespaces
Then, open the _Imports.razor file within the {App title}.Shopper venture and import the Syncfusion.Blazor and Syncfusion.Blazor.Grids namespaces.
@utilizing Syncfusion.Blazor @utilizing Syncfusion.Blazor.Grids
Step 4: Register the Syncfusion Blazor service
Register the Syncfusion Blazor service within the ~/Program.cs file in each {App title} and {App title}.Shopper initiatives.
.... utilizing Syncfusion.Blazor; .... builder.Providers.AddSyncfusionBlazor();
Step 5: Add stylesheet and script assets
Embrace the stylesheet reference within the <head>tag and the script reference on the finish of the <physique>tag within the ~/Elements/App.razor file. Discuss with the next code instance.
<head> …. <hyperlink href="https://www.syncfusion.com/blogs/submit/_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
</head> .... <physique> .... <script src="https://www.syncfusion.com/blogs/submit/_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" sort="textual content/javascript"></script> </physique>
Step 6: Add Syncfusion Blazor DataGrid element
Add the Syncfusion Blazor DataGrid element within the ~/Pages/Counter.razor file.
@web page "/counter"
@rendermode InteractiveAuto
<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true" AllowGrouping="true">
<GridPageSettings PageSize="5"></GridPageSettings>
<GridColumns>
<GridColumn Subject=@nameof(Order.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Proper" Width="120"></GridColumn>
<GridColumn Subject=@nameof(Order.CustomerID) HeaderText="Buyer Identify" Width="150"></GridColumn>
<GridColumn Subject=@nameof(Order.OrderDate) HeaderText=" Order Date" Format="d" Sort="ColumnType.Date" TextAlign="TextAlign.Proper" Width="130"></GridColumn>
<GridColumn Subject=@nameof(Order.Freight) HeaderText="Freight" Format="C2" TextAlign="TextAlign.Proper" Width="120"></GridColumn>
</GridColumns>
</SfGrid>
@code
{
public Checklist<Order> Orders { get; set; }
protected override void OnInitialized()
{
Orders = Enumerable.Vary(1, 75).Choose(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; }
}
}
Lastly, run the applying utilizing the Ctrl+F5 shortcut key.
Word: For extra particulars, check with the Getting Began with the Blazor internet app documentation.
.NET 8 assist in Blazor Template Studio
The Syncfusion Blazor Template Studio now helps .NET model 8. With this, you possibly can create an internet app with an interplay mode, an interactivity location, and authentication sorts.
Word: For extra particulars, check with the Syncfusion Blazor Template Studio documentation.
GitHub reference
For extra particulars, check with .NET 8 render modes on GitHub.
Conclusion
Thanks for studying! On this weblog, we discovered about totally different .NET 8 options and the way Syncfusion Blazor parts work in .NET 8 with totally different interactive modes, interactive places, and numerous authentication sorts. You’ll be able to take a look at these updates in our 2023 Quantity 3 SP launch.
Check out these options and share your suggestions as feedback on this weblog. You may also attain us via our assist boards, assist portal, or suggestions portal.
