Introducing Syncfusion’s ASP.NET Core Blazor / Razor Components

Like everyone else, we are excited about the upcoming Microsoft ASP.Net Core 3.0 framework. We are particularly eager to try Blazor /Razor Components, which have the potential to turn web development more towards strongly-typed C# and WebAssembly. Syncfusion is thrilled to announce that a preview release of UI controls for ASP.NET Core Blazor /Razor Components is now available. In this post, we will provide a brief introduction to Blazor /Razor Components.

Introduction to Blazor

Blazor is a next-generation single-page application (SPA) for building client-side web apps with .NET. It supports writing C# code instead of using JavaScript for a client-side web application. The WebAssembly is used to build the .NET C# code in a web browser without any additional plugins.

Blazor runs .NET code in the browser with WebAssembly.

A Blazor app processes the following functionalities when it is built and run in the web browser:

1. The Blazor application compiles the C# codes and Razor files into a .NET assembly.
2. The client-side web browser downloads the assembly files.
3. The WebAssembly will load the downloaded assembly files in the client-side.
4. Blazor handles the DOM manipulation and triggers the browser API.

Blazor is the experimental client-side hosting model for Razor Components.

Introduction to Razor Components (Server-side Blazor)

Razor Components is a new web framework to build interactive web UI with .NET. It is designed to run client-side in the web browser on a Blazor application.

Now, .NET Core 3.0 provides support for hosting Razor Components from server-side by using an ASP.NET Core app. The SignalR connection handles UI updates from server to client and client to server.

Razor Components runs .NET code on the server and interacts with the DOM in the client over a SignalR connection.

Syncfusion ASP.NET Core Blazor / Razor Components

The Syncfusion UI controls for ASP.NET Core Razor Components is a complete suite of over 60+ UI controls for the Blazor framework that has been built on top of our popular Essential JS 2 JavaScript framework. We have put in a great deal of effort to ensure that the wrapper components behave exactly like native Razor Components from an application developer’s perspective. Application developers will be able to write all their code in C# and will not have to write a single line of JavaScript.

We could have taken the approach of building native Razor Components from scratch using C#, but the end result would have been little different from what we have achieved by building on Essential JS 2. Our current approach has enabled us to ship over 60 components in the very first version, and the framework will only grow richer over time as Essential JS 2 itself expands. We believe that the goal of the Blazor framework and WebAssembly itself is not to kill JavaScript, but rather to provide application developers the option to write all their application code in their favorite language, and our components help accomplish that.

Rendering a Syncfusion UI control in ASP.NET Core Razor Components

Now, we’ve learned about Blazor /Razor Components with their basic behavior. Let’s try out the Syncfusion DataGrid control with the server-side hosting model of ASP.NET Core Razor Components using the .NET Core CLI for practice:

• Install the required software, .NET Core SDK 3.0 Preview, to start the implementation.
• Create a new Razor Components application by running the following command line from command prompt.

dotnet new razorcomponents -o EJ2Application

Creating a ASP.NET Core Razor Components application

• This creates a new ASP.NET Core Razor Components application in the EJ2Application folder. Navigate to the application from the command prompt and open the application in Visual Studio Code or any code editor.

cd EJ2Application

Navigate to the application folder

• Now, add the Syncfusion.EJ2.AspNet.Core.RazorComponents NuGet package to the new application and use the following command line to restore the packages.

dotnet add package Syncfusion.EJ2.AspNet.Core.RazorComponents -v 17.1.0.34-*

Installing Syncfusion ASP.NET Core Razor Components NuGet package

• Open the ~/Components/_ViewImports.cshtml file and import the *Syncfusion.EJ2.RazorComponents * at the end.

@addTagHelper *, Syncfusion.EJ2.RazorComponents

• Add the required client-side resources as CDN references in the <head> element of the ~/Pages/index.cshtml file.

<head> 
..... 
..... 
<link href="https://cdn.syncfusion.com/ej2/material.css" rel="stylesheet" />
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
<script src="https://cdn.syncfusion.com/ej2/dist/ejs.introp.min.js"></script>
</head>

• Create a folder named Grid ** inside **~/Components/Pages/ and add the *Default.razor * file for rendering the DataGrid component.
• The Razor Components application itself has the WeatherForecastService for data binding. It can be validated in the link <localhost>/fetchdata once the application is run in the web browser. We are using the same service to bind the data to the Syncfusion DataGrid component.

@page "/Grid/Default"

@using EJ2Application.Services
@inject WeatherForecastService ForecastService 
@using Syncfusion.EJ2.RazorComponents.Grids 

<h2>Syncfusion DataGrid in Razor Components</h2> 

<EjsGrid id="Grid" DataSource="@forecasts" AllowPaging="true" AllowSorting="true"> 
<GridColumns> 
<GridColumn Field=@nameof(WeatherForecast.Date) HeaderText="Date" Format="yMd" Type="date" Width="130"></GridColumn> 
<GridColumn Field=@nameof(WeatherForecast.TemperatureC) HeaderText="Temp. (C)" Width="120"></GridColumn> 
<GridColumn Field=@nameof(WeatherForecast.TemperatureF) HeaderText="Temp. (F)" Width="150"></GridColumn> 
<GridColumn Field=@nameof(WeatherForecast.Summary) HeaderText="Summary" Width="130"></GridColumn> 
</GridColumns> 
</EjsGrid> 

@functions { 
WeatherForecast[] forecasts; 

protected override async Task OnInitAsync() { 
forecasts = await ForecastService.GetForecastAsync(DateTime.Now); 
} 
}

• Now, use the following command line to run the application and it will run in a specific <localhost> port. For example: http://localhost:5000.

dotnet run

Running the application

• Finally, navigate to the link <localhost>/Grid/Default and the final output of the Synfusion DataGrid in Razor Components will look like the following.

The Final output of Syncfusion DataGrid in Razor Components

This application is available in the GitHub repository for reference.

Summary

In this blog, we have learned about Blazor /Razor Components, and rendering a Syncfusion UI control in ASP.NET Core Razor Components. Blazor is still an experimental project. So it is not yet ready for production. We are eagerly waiting to integrate the complete support of Blazor / Razor Components in the Syncfusion UI controls. Currently, we have provided most of the basic supports in our components. We will implement more features in our upcoming Volume 2, 2019, release. Feel free to download and test our preview version of Razor Components (demos, documentation, GitHub) and share your feedback in the support incident page or feedback page.

The post Introducing Syncfusion’s ASP.NET Core Blazor / Razor Components appeared first on Syncfusion Blogs.