Introducing ASP.NET Core Blazor / Razor Components

Ajith R
September 3, 2020 UPDATED

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.

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

The Blazor application compiles the C# codes and Razor files into a .NET assembly.
The client-side web browser downloads the assembly files.
The WebAssembly will load the downloaded assembly files in the client-side.
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.

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 new application — *`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

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

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.

Share this post:

Ajith R

Ajith is the Product Manager for Syncfusion Web Platforms. He has designed and developed the core architecture for Syncfusion JavaScript and Blazor components. He is passionate about web technology and has been active in web development since 2013.

Comments (14)

Dew Drop – April 11, 2019 (#2936) | Morning Dew

April 11, 2019 at 7:55 am

[…] Introducing Syncfusion’s ASP.NET Core Blazor / Razor Components (Ajith R.) […]

Stilgar

April 13, 2019 at 2:57 pm

How does the JS for the components run on the server when running in Server-Side Blazor mode?

Ajith R

May 3, 2019 at 10:28 am

Hi STILGAR,

Thanks for your comments and sorry for the delay.

Our Blazor components property initialization has been done in the server-side and the components will be rendered in client-side by using jsinterop and SignalR.

Please let us know if you need any further assistance on this.

Regards,
Ajith R

My Homepage

May 7, 2019 at 8:20 pm

… [Trackback]

[…] Informations on that Topic: blog.syncfusion.com/post/introducing-syncfusions-asp-net-core-blazor-razor-components.aspx […]

Arty

May 14, 2019 at 8:46 am

Hello!
Experimenting with your components.
I use the dialog component EjsDialog, I try to set the window title with the code, but it is not displayed. If I fill in the header attribute in the template, then everything is fine. And when I set Header property in the code – there is title blank.
Perhaps this is some kind of bug. You have no examples in the examples to change the window title in the code using the Header property.

Rajendran R

May 20, 2019 at 12:11 am

Hi Arty,

Based on shared information, we were unable to reproduce the issue in our end. So, we requested some additional details in your forum.

https://www.syncfusion.com/forums/144612/the-title-of-the-dialogue-is-not-specified-from-the-code

Kindly share the details in the forum to follow up further.

Regards,
Rajendran R.

Rajendran R

May 22, 2019 at 6:11 am

Hi Arty,

The Blazor Dialog provides the following ways to set its header from code.

1. If you want to set dialog’s header on page initialization itself, set by overriding “OnAfterRender” method. please find the code snippet below.

@functions
{
EjsDialog EJ2Dialog;

protected override void OnAfterRender()
{
this.EJ2Dialog.Header = “Title set from code”;
}
}

2. If you want to set dialog’s header dynamically through event, set using “StateHasChanged” and “DataBind” method of Dialog component. Please find the code snippet below.

@functions
{
EjsDialog EJ2Dialog;

public void SetHeader()
{
this.EJ2Dialog.Header = “Set Header on Button click”;
StateHasChanged();
this.EJ2Dialog.DataBind();
}
}

Note: Upgrade your nuget package reference to latest version.

We have prepared the sample for your requirement and attached the sample in this link.
Sample: Dialog-1920486527

Regards
Rajendran R

Mukesh

May 28, 2019 at 6:45 am

{ Blazor + Syncfusion } is definitely a game changer in JavaScript world.

Ahmet

June 22, 2019 at 8:52 am

Hi,
Is there a chance for Syncfusion Blazor components to be rewritten with C# in the future.

Ajith R

June 24, 2019 at 5:14 am

Hi Ahmet,

Thanks for your comments.

Currently we do not have plan to rewrite the components in C#. We are working to provide native control experience with our current component set itself. We will decide about rewriting based on the customers demand in future.

Regards,
Ajith R