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.
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:
Blazor is the experimental client-side hosting model for Razor Components.
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.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.
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:
Razor Components application by running the following command line from command prompt.dotnet new razorcomponents -o EJ2Application
Creating a ASP.NET Core Razor Components applicationASP.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 folderNuGet 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@addTagHelper *, Syncfusion.EJ2.RazorComponents
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> 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);
}
} <localhost> port. For example: http://localhost:5000.dotnet run
Running the application<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 ComponentsThis application is available in the GitHub repository for reference.
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.