Introducing the Telerik UI for Blazor Early Preview
Tags: dotnet, blazor
Published: 2019-01-17 16:19:47

---
title: Introducing the Telerik UI for Blazor Early Preview
published: true
tags: dotnet, blazor 
canonical_url: https://www.telerik.com/blogs/introducing-the-telerik-ui-for-blazor-early-preview
---

Progress Software and the Telerik brand has a long history of supporting the .NET community with products like Telerik UI for [ASP.NET](http://ASP.NET) AJAX, UI for [ASP.NET](http://ASP.NET), and UI for [ASP.NET](http://ASP.NET) Core. This is why we’re proud to announce the early preview release of Telerik UI for Blazor!

1. What is Blazor
2. What is Razor Components
3. Blazor Recommended Reading
4. Built from the Ground-Up - 100% Native .NET
5. Experiment With Us
6. Telerik UI for Blazor Early Preview

## What is Blazor

Blazor is a new framework by the Microsoft [ASP.NET](http://ASP.NET) team that introduces a next generation component model that allows developers to write Single Page Applications (SPA) without JavaScript. If Blazor sounds new to you that’s because it has only been in development less than a year, and as an experimental project. Initially the Blazor framework targeted the **Mono WebAssembly runtime** (the .NET runtime compiled to `wasm`), thus allowing .NET to run on the client’s browser inspiring the name “Blazor” (Browser + Razor).

![](https://i.imgur.com/dhrE75J.jpg)

In this configuration the application’s resources including `.dll` files are delivered to the client and executed the **Mono WebAssembly runtime**. While the WebAssembly deployment of Blazor is sill in active development a server-side deployment option was introduced called Razor Components.

### Blazor Component Model

The Blazor component model is refreshingly simple in its design. Components can contain markup (HTML) and logic (C#) in a single Razor (cshtml) file. The component is capable of handling data binding, events, and dependency injection all without JavaScript.

The Counter Component below demonstrates the basic composition of a Blazor component.

![](https://i.imgur.com/MOXoKaQ.jpg)

The counter component uses a basic HTML button to increment a counter field which is displayed within a paragraph tag. Because Blazor operates as a single page application all of the interactions in the component happen on the client. Updates to the browser’s Document Object Model (DOM) are handled by the Blazor framework though data binding.

## What is Razor Components

Recently Microsoft has announced plans to support the framework when running server-side in a mode called Razor Components. Even more recently, an announcement was made that the same component model will be backwards compatible with [ASP.NET](http://ASP.NET) Core (MVC) and Razor Pages. All of these cutting edge news and bits dropping around Blazor has our team at Telerik excited for the future of [ASP.NET](http://ASP.NET) development. Much like Blazor running on WebAssembly, Razor Components allows developers to write Single Page Applications (SPA) without JavaScript.

![](https://i.imgur.com/i1smLgn.jpg)

The key difference between Blazor and Razor Components is the way the application is deployed. Instead of Blazor running via WebAssembly on the client, the Blazor framework runs on the server as an executable. In this mode, [ASP.NET](http://ASP.NET) Core hosts the application and provides a communication channel using SignalR technology. Using SignalR the application sends UI updates and receives changes and events as binary packets of data over a web socket connection. Since only the changes are sent over the connection, the payload is small and efficient.

Since Razor Components utilizes the Blazor framework, components can be used in both deployment types.

## Blazor Recommended Reading

If all of this is new to you, and it’s most likely that it is, then we have some blog posts to catch you up on all things Blazor. The following articles should bring you up to speed, or if you’re biting your nails to check out what’s below, we’ve included the TLDR as well.

- [Blazor – A New Framework for Browser-based .NET Apps (DevReach 2018)](https://www.youtube.com/watch?v=BnH2h_RJ-d8&t=0s&list=PLvmaC-XMqeBYiMKlRATiIuxKF5Czb_aW7&index=8)
- [What’s Coming in .NET Core 3.0](https://msdn.microsoft.com/en-us/magazine/mt848631.aspx)
- [Blazor Q&A with Microsoft’s Daniel Roth](https://dev.to/progresstelerik/blazor-qa-with-microsofts-daniel-roth-3d48)
- [Goodbye JavaScript, Hello WebAssembly](https://dev.to/progresstelerik/goodbye-javascript-hello-webassembly-6oc-temp-slug-9525238)
- [A Breakdown of Blazor Project Types](https://dev.to/progresstelerik/a-breakdown-of-blazor-project-types-2b4g-temp-slug-848040)
- [Razor Components for a JavaScript-Free Front-end in 2019](https://dev.to/progresstelerik/razor-components-for-a-javascript-free-frontend-in-2019-1f6o)

### TLDR

**Razor Components** , is what originally started as **Blazor Server-Side** in early 2018. Blazor is a .NET (SPA) framework that is generally associated with .NET running on Web Assembly. However, Blazor is capable of running under multiple scenarios including server-side as Razor Components.

- **Razor** is a popular template markup syntax for .NET
- (Browser + Razor) **Blazor** is a .NET based web framework which can **run on the client using WebAssembly** or as:    
  - **Razor Components** : The Blazor framework **running on the server via SignalR**
  - Razor Components via “ **circuits** ” - Razor Components running in [ASP.NET](http://ASP.NET) Core / Razor Pages
- All Blazor hosting models, both client and server-side, utilize C# APIs **instead of JavaScript**
- Razor Components is expected to **ship in [ASP.NET](http://ASP.NET) Core 3.0**

## Built from the Ground-Up - 100% Native .NET

Telerik UI for Blazor will **not** wrap existing jQuery/JavaScript products in C# and pretend it’s something new. With Telerik UI for Blazor we are starting from scratch and writing components with .NET whenever possible. Alternatively we could have decided to wrap existing jQuery components, as short-term path, however we feel that the wrapper programming model is a leaky abstraction that would “bleed back” into the .NET API layer. In addition, we feel that a native .NET approach is a long term investment that will fetch larger gains in the long run. Consider this a modern day tortoise vs. hare story.

We can’t express enough how important both the JavaScript and .NET ecosystems are to us. We have UI libraries for developers of all skill types, however a segment of .NET community has expressed the need for front-end web tooling that does not require JavaScript and we’re happy to have the opportunity to serve this community through Blazor.

## Experiment With Us

Blazor is an exciting prospect for .NET developers because it allows us to create full-stack .NET web application. We have received countless feedback items asking for our support this next generation platform.

Initially we’re offering Telerik UI For Blazor as an early preview release. This development model closely resembles the effort being made by Microsoft with Blazor as we aim to release small sets of functionality in hopes to gain feedback and knowledge about how our customers use the product. During the experimental phase Telerik UI for Blazor will be a **free trial** for all and we hope that you will continue sharing with us your use cases, experience, road-blocks, and bugs.

After downloading Telerik UI for Blazor you will receive an email with instructions on how to share your feedback, wishes and Blazor experiments with us.

## Telerik UI for Blazor Early Preview

The initial offering will be small with just a few popular UI components including the **Data Grid** , **Tab Set** , and **Buttons**. Through customer feedback we plan to expand the number of components and rage of APIs. We believe that building to our customers needs and recommendations is the path to success.

### Prerequisites

1. 

Install the Blazor SDK by following the [steps outlined on the Blazor website](https://blazor.net/docs/get-started.html)

2. 

Download the [Telerik UI for Blazor NuGet package](https://www.telerik.com/download-trial-file/v2-b/ui-for-blazor) directly

3. 

(optional) [Use the Telerik NuGet feed as a package source](https://docs.telerik.com/aspnet-mvc/getting-started/nuget-install#the-telerik-private-nuget-feed)

### Your First Blazor Project

We recommend starting with the “Blazor (Server-side in [ASP.NET](http://ASP.NET) Core)” project type when using the New Project dialog. This project type is also known as **“Razor Components” and will eventually ship with [ASP.NET](http://ASP.NET) Core 3.0**. However, Telerik UI for Blazor will work on all Blazor project types.

![](https://i.imgur.com/7l0z7qr.jpg)

With the new project created, we’ll need to install our Telerik UI for Blazor NuGet dependency. Before adding the package, be sure to navigate to the project that contains the application’s UI. This will be either `<project>.App` or `<project>.Client` depending of the template you chose.

1. 

Install the `Telerik.UI.for.Blazor` NuGet package. This will add the component library to your application.

2. 

Register the components in the application. In the root of the application, locate the `_ViewImports.cshtml` file and add the following code.

```
@using Kendo.Blazor

@addTagHelper *,Kendo.Blazor
```

1. We’ll also need to reference the style sheet needed for the components. Locate the `index.html` file in the `/wwwroot` folder and add the following line.

```
<link href="//kendo.cdn.telerik.com/2019.1.115/styles/kendo.material-v2.min.css" rel="stylesheet">

```

Notice we’re not referencing any JavaScript files, that’s because there aren’t any JavaScript dependencies. You’re now ready to start testing Telerik UI for Blazor.

### Blazor Data Grid

The Telerik UI for Blazor Data Grid has quite a few features in this preview. The data grid in this release is capable of: data binding, sorting, paging, [themes](http://themebuilder.telerik.com), templates, and in-cell editing, which only supports `int`, `string` and `DateTime` fields.

Let’s see these features in action by replacing the hand coded table in the **Fetch Data** example with the Telerik Data Grid. First take a moment to run and explore the Fetch Data example at `localhost/fetchdata`.

Locate the code for Fetch Data under the `/Pages` folder. Replace the entire `table` element with a `KendoGrid` component. _Telerik UI for Blazor components use the **Kendo** namespace as it is a familiar reference to our existing front-end libraries and shares CSS code with those libraries._

```
else
{
  <KendoGrid Data=@forecasts Pageable=true PageSize=5 Sortable=true>
    <KendoGridColumn Field=@nameof(WeatherForecast.Date)>
      <Template>
        @($"{(context as WeatherForecast).Date:d}")
      </Template>
    </KendoGridColumn>
    <KendoGridColumn Field=@nameof(WeatherForecast.TemperatureC) />
    <KendoGridColumn Field=@nameof(WeatherForecast.TemperatureF) />
    <KendoGridColumn Field=@nameof(WeatherForecast.Summary) />
  </KendoGrid>
}

```

The `KendoGrid` component binds the `Data` property to `forecasts` which is an array of the `WeatherForecast` object. The grid also has the `Pageable`, `PageSize`, and `Sortable` properties enabled. Inside of the `KendoGrid` component, we define child components for each field we would like displayed in the grid. Because this is all C# code, we can set the Field property with C#'s `nameof` operator giving us type safety. In addition, templates can be used to display custom formats, images, and even other UI components. Here a template is used to format the `Date` field.

![](https://i.imgur.com/JnF5seI.gif)

### Blazor Tab Set

The other major component included in this release is the `KendoTabSet`. The `KendoTabSet` supports multiple tab positions: Top (default), Bottom, Left, and Right. We can use Blazor’s `bind` attribute to demonstrate the tab positions at run-time. Locate the `index.cshtml` page under the `/pages` folder. Replace the page’s content with the following code.

```
@using Kendo.Blazor.Components.TabStrip

<h1>Hello, world!</h1>
<select bind=@tabPosition>
  <option value=@KendoTabPosition.Top>Top</option>
  <option value=@KendoTabPosition.Left>Left</option>
  <option value=@KendoTabPosition.Right>Right</option>
  <option value=@KendoTabPosition.Bottom>Bottom</option>
</select>

<KendoTabStrip TabPosition=@tabPosition>
  <KendoTab Title="Sofia">
    <h2>22<span>ºC</span></h2>
    <p>Sunny weather in Sofia</p>
  </KendoTab>
  <KendoTab Title="New York">
    <h2>24<span>ºC</span></h2>
    <p>Partly Cloudy weather in New York</p>
  </KendoTab>
  <KendoTab Title="Paris">
    <h2>21<span>ºC</span></h2>
    <p>Rainy weather in Paris</p>
  </KendoTab>
</KendoTabStrip>

@functions {
  KendoTabPosition tabPosition = KendoTabPosition.Top;
}

```

In this example we start by creating a simple `select` list element with all of the `KendoTabStrip` position values, `KendoTabPosition.<value>`. Most importantly, `KendoTabPosition` is a standard C# enum type so we get strongly typed values and intellisense here. Next a `KendoTabStrip` component is created with several `KendoTab` components that display some weather forecast data. The `TapPosition` property is bound to both the `select` element and `KendoTabStrip` through the a simple backing field `tabPosition` declared in `@function`.

Because `select` is using the `bind` attribute, it automatically updates the `tabPosition` value when the option is changed, this allows us to modify the position at run-time.

![](https://i.imgur.com/kVkwnss.gif)

## Summary

We’re excited to be part of the next generation of [ASP.NET](http://ASP.NET) applications by supporting Blazor. [Telerik UI for Blazor Early Preview is available for free today](https://www.telerik.com/download-trial-file/v2-b/ui-for-blazor). The package currently includes Data Grid, Tab Set, and Button components written from the gound up to take advantage of Blazor without JavaScript dependencies (there’s no jQuery this time folks). Throughout the year Microsoft will be working on Blazor (aka Razor Components) as part of [ASP.NET](http://ASP.NET) Core 3.0. We plan on keeping Telerik UI for Blazor up to date as the project progresses and look forward to hearing your feedback, see what you’ve built, and know what components you need for your next app.

## Sign Up for Release Webinars

Seeing is believing, so register to see all the new features – WEBINARS ARE COMING UP FAST! It will help you to follow along easily if you [download the latest release here](https://www.telerik.com/support/whats-new).

### Telerik

Date/Time: Friday, January 18th @ 11:00 am - 12 pm EST [Register Now](https://www.telerik.com/campaigns/wb-jan-2019-release-r1)

### Kendo UI

Date/Time: Tuesday, Jan 22, 11:00 AM ET - 12:00 PM ET [Register Now](https://www.telerik.com/campaigns/kendo-ui/wb-jan-2019-release-r1)