Blazor WebAssembly Succinctly®
CHAPTER 5
Add Syncfusion
The Syncfusion controls allow us to easily implement advanced functionality with a minimum amount of code. The Syncfusion controls are contained in a NuGet package. In this chapter, we will cover the steps to obtain that package and configure it for our application.
Note: See the latest system requirements for using Syncfusion here.
Install NuGet packages
Figure 44: NuGet Packages
Right-click the Solution node and select Manage NuGet Packages for Solution.
Figure 45: Install NuGet Packages
Select the Browse tab and install the following NuGet packages:
- Syncfusion.Blazor (in the Client, Server, and Shared projects)
- Microsoft.AspNetCore.Mvc.NewtonsoftJson (in the Server project)
Additional configuration
In the Client project, open the _Imports.razor file and add the following.
Code Listing 29: _Imports.razor
@using Syncfusion.Blazor @using Syncfusion.Blazor.Inputs @using Syncfusion.Blazor.Popups @using Syncfusion.Blazor.Data @using Syncfusion.Blazor.DropDowns @using Syncfusion.Blazor.Layouts @using Syncfusion.Blazor.Calendars @using Syncfusion.Blazor.Navigations @using Syncfusion.Blazor.Lists @using Syncfusion.Blazor.Grids @using Syncfusion.Blazor.Buttons @using Syncfusion.Blazor.Notifications |
Open the Program.cs file in the Client project and add the following using statement.
Code Listing 30: Server Project Startup.cs Using Statement
using Syncfusion.Blazor; |
Add Syncfusion license
Navigate to this link to get a free (30-day trial) Syncfusion license.
Add the following code to the Main method, before the builder.Build().RunAsync(); line.
Code Listing 31: Startup.cs AddSyncfusionBlazor
//Register Syncfusion license Syncfusion.Licensing.SyncfusionLicenseProvider.RegisterLicense( "{{ ENTER SYNCFUSION LICENSE HERE }}" ); // Add Syncfusion builder.Services.AddSyncfusionBlazor(); |
Replace {{ ENTER SYNCFUSION LICENSE HERE }} with the Syncfusion license you obtained in the previous step.
Finally, add the following to the <head> element of the wwwroot/index.html page in the Client project.
Code Listing 32: Index.html
<link href="_content/Syncfusion.Blazor/styles/material.css" rel="stylesheet" /> <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js" type="text/javascript"></script> |
Serialization
The help desk ticket object, which we will create in later steps, contains a nested collection of HelpDeskTicketDetail objects. We need to add special code that uses the Microsoft.AspNetCore.Mvc.NewtonsoftJson assembly (added earlier) to properly serialize and deserialize the objects.
In the Program.cs file in the Server project, delete the following code.
Code Listing 33: AddControllersWithViews Before
builder.Services.AddControllersWithViews(); |
Replace it with the following code.
Code Listing 34: Updated AddControllersWithViews
builder.Services.AddControllersWithViews() .AddNewtonsoftJson( options => options.SerializerSettings.ReferenceLoopHandling = Newtonsoft.Json.ReferenceLoopHandling.Ignore ); |
- 80+ high performance Blazor components.
- Lightweight and user friendly.
- Stunning Built-in themes with customization.