Create a Blazor App with Syncfusion UI Components
Blazor is a powerful framework from Microsoft that allows developers to build interactive web UIs using C# instead of JavaScript. It runs directly in the browser via WebAssembly or on the server through SignalR. Blazor enables you to create full-stack web apps using .NET end to end.
While Blazor provides a productive framework for web development, creating modern, feature-rich user interfaces can still require significant effort. That‘s where Syncfusion comes in. Syncfusion offers an extensive suite of 70+ high-performance UI components for Blazor that enable you to build powerful line-of-business applications faster than ever before.
In this post, we‘ll walk through the process of creating a Blazor app from scratch and enhancing it with several Syncfusion components. By the end, you‘ll see how easy it is to add sophisticated UI elements like data grids, charts, and schedulers to your Blazor apps. Let‘s get started!
Setting Up a Blazor App
First, make sure you have the latest version of Visual Studio installed along with the ASP.NET Core workload. Then open Visual Studio and select "Create a new project". Choose "Blazor App" as the project template, give your project a name, and click Create.
Visual Studio will scaffold out a basic Blazor application for you. Before we start adding Syncfusion components, let‘s fire up the app and see what it looks like. Press F5 to launch the app in debug mode. You should see the default Blazor app home page:
Not too exciting yet, but we‘ll change that quickly! Stop the debugger and let‘s add some Syncfusion magic to this app.
Adding Syncfusion Components
To use Syncfusion components in your Blazor app, you first need to install the necessary NuGet packages. Syncfusion provides different packages for each of their control suites (Grids, Charts, Inputs, etc.).
For this example, we‘ll add the Grid, Charts, and Scheduler packages. Right-click your project in the Solution Explorer and select "Manage NuGet Packages". Search for and install the following packages from Syncfusion:
- Syncfusion.Blazor.Grid
- Syncfusion.Blazor.Charts
- Syncfusion.Blazor.Schedule
Once the packages are installed, we need to add the Syncfusion namespace and component registrations. Open the ~/_Imports.razor file and add the following lines:
@using Syncfusion.Blazor
@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.Charts
@using Syncfusion.Blazor.ScheduleNext, open the ~/_Host.cshtml file and add references to the Syncfusion scripts and styles in the <head> section:
<link href="_content/Syncfusion.Blazor/styles/bootstrap4.css" rel="stylesheet" />
<script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"></script>Finally, add the Syncfusion bundle registration in your service configuration. Open the ~/Startup.cs file and add this line to the ConfigureServices method:
services.AddSyncfusionBlazor();We‘re now ready to start using Syncfusion components in our Blazor app!
Displaying Data with the Syncfusion Grid
One of the most powerful components offered by Syncfusion is the DataGrid (or Grid for short). The Grid allows you to display and manipulate large volumes of data with built-in support for paging, sorting, filtering, grouping, and much more.
Let‘s add a Grid to our app to display a list of employees. First, create a new "Models" folder in your project and add a file named Employee.cs with the following code:
public class Employee
{
public int EmployeeId { get; set; }
public string FirstName { get; set; }
public string LastName { get; set; }
public string Email { get; set; }
public DateTime DateOfBirth { get; set; }
public decimal Salary { get; set; }
}Next, open the Index.razor file in the Pages folder and replace its contents with this code:
@page "/"
<SfGrid DataSource="@Employees">
<GridColumns>
<GridColumn Field=@nameof(Employee.EmployeeId) HeaderText="ID" Width="100"></GridColumn>
<GridColumn Field=@nameof(Employee.FirstName) HeaderText="First Name"></GridColumn>
<GridColumn Field=@nameof(Employee.LastName) HeaderText="Last Name"></GridColumn>
<GridColumn Field=@nameof(Employee.Email) HeaderText="Email" Width="200"></GridColumn>
<GridColumn Field=@nameof(Employee.DateOfBirth) HeaderText="Date of Birth" Format="d"></GridColumn>
<GridColumn Field=@nameof(Employee.Salary) HeaderText="Salary" Format="C"></GridColumn>
</GridColumns>
</SfGrid>
@code {
public List<Employee> Employees { get; set; }
protected override void OnInitialized()
{
Employees = GetData();
}
public List<Employee> GetData() {...}
} The <SfGrid> tag renders the Syncfusion DataGrid, which is bound to a collection of Employee objects. The <GridColumns> section defines the columns to display, including the field to bind to, the header text, formatting, and width.
The code section retrieves the employee data, in this case from a GetData method that returns a hard-coded collection. In a real app, you would fetch the data from a database or API.
Run the app and behold your glorious employee Grid!
That‘s all it takes to get an advanced data grid up and running in your Blazor app. With the Syncfusion Grid, you get professionally designed components with advanced capabilities out of the box. But we‘re just getting started!
Visualizing Data with Syncfusion Charts
Data is often easier to understand when visualized graphically. Syncfusion‘s Charts component makes it simple to render interactive JavaScript charts in your Blazor apps. With support for over 35 chart types, you can create stunning dashboards or analytical tools.
Let‘s add a simple bar chart to visualize the salary distribution of our employees. Open the Index.razor file and add the following code:
<h2>Salary Distribution</h2>
<SfChart Width="600px" Height="400px">
<ChartPrimaryXAxis ValueType="Syncfusion.Blazor.Charts.ValueType.Category"></ChartPrimaryXAxis>
<ChartSeriesCollection>
<ChartSeries DataSource="@Employees" XName="FirstName" YName="Salary" Type="ChartSeriesType.Column">
</ChartSeries>
</ChartSeriesCollection>
</SfChart>This code renders a column chart with the employee names on the X-axis and their salaries on the Y-axis. The <SfChart> tag defines the overall chart, while the <ChartSeries> tag specifies the data binding and appearance of the bars.
Refresh the app and marvel at your shiny new chart:
The Syncfusion Charts component makes it dead simple to create professional-grade charts. You can easily customize every aspect of the chart‘s appearance and behavior. Charts also have built-in support for user interactions like zooming, panning, tooltips, and drill down.
Adding a Calendar with the Scheduler Component
Finally, let‘s add a calendar view to our app so employees can manage their events and appointments. Syncfusion‘s Scheduler component combines the functionality of a calendar with advanced scheduling features like resource views, recurrence, and drag-and-drop.
Add the following code to your Index.razor page:
<h2>Appointment Calendar</h2>
<SfSchedule TValue="AppointmentData" Width="800px" Height="550px">
<ScheduleEventSettings DataSource="@DataSource"></ScheduleEventSettings>
<ScheduleViews>
<ScheduleView Option="View.Day"></ScheduleView>
<ScheduleView Option="View.Week"></ScheduleView>
<ScheduleView Option="View.Month"></ScheduleView>
</ScheduleViews>
</SfSchedule>
@code {
public List<AppointmentData> DataSource { get; set; }
protected override void OnInitialized()
{
DataSource = new List<AppointmentData>
{
new AppointmentData {
Id = 1,
Subject = "Meeting",
StartTime = new DateTime(2020, 7, 10, 10, 0, 0),
EndTime = new DateTime(2020, 7, 10, 12, 30, 0)
},
...
};
}
public class AppointmentData
{
public int Id { get; set; }
public string Subject { get; set; }
public DateTime StartTime { get; set; }
public DateTime EndTime { get; set; }
}
}Here we define a collection of AppointmentData objects which represent the events on the calendar. The Scheduler binds to this collection and renders the events. We specify the views we want to make available (day, week, and month) in the <ScheduleViews> section.
Check out the results in your browser:
Users can easily switch between views, drag and drop events, and double-click to create new appointments. The Scheduler provides an Outlook-like experience with minimal code. You can customize every aspect of the Scheduler‘s appearance and extend it with features like resources, timezones, and multi-day events.
Conclusion
We‘ve only scratched the surface of what‘s possible with Syncfusion‘s UI components for Blazor. In just a few minutes, we added an advanced data grid, interactive chart, and full-featured scheduler to our app. Imagine what you could build with the other 65+ components in Syncfusion‘s toolkit!
Syncfusion‘s components are professionally designed, optimized for performance, and easy to customize. They abstract away the complexity of UI development so you can focus on your app‘s core functionality. Syncfusion also provides excellent documentation, samples, and support.
Best of all, Syncfusion offers a free community license for companies or individuals with less than $1 million in annual revenue. So you can use their components in your apps for free!
I encourage you to explore the Syncfusion Blazor components further and see how they can turbocharge your Blazor development. With Syncfusion and Blazor, you can build modern, responsive web apps faster than ever. Happy coding!
