First Steps with Client-side UI for Blazor

This article explains how to get the Telerik UI for Blazor components in your Client-side Blazor project and start using them quickly. The process consists of the following steps:

  1. Set Up a Blazor Project
  2. Add the Telerik NuGet Feed to Visual Studio
  3. Add the Telerik Components to Your Project
  4. Add a Telerik Component to a View

Set Up a Blazor Project

Blazor is still an experimental technology, so you need to ensure you can run its vanilla version first. To do that, follow the MSDN tutorial and make sure that you can run the basic sample Blazor application: https://docs.microsoft.com/en-us/aspnet/core/client-side/spa/blazor/get-started. You may need to install the Blazor VS Extensions in order to get the necessary app templates.

Make sure that you have the latest bits installed (.NET Core 3.0 and Visual Studio 2019 Preview channel are required).

Using Official Visual Studio 2019

The official (RTM) version of Visual Studio 2019 does not fully support Blazor at the moment, and you must use the Visual Studio 2019 Preview channel: https://visualstudio.microsoft.com/vs/preview/.

Once you have the vanilla Blazor application running, continue to the next steps.

Add the Telerik NuGet Feed to Visual Studio

Telerik UI for Blazor is distributed through our private NuGet feed.

If you don't have an active license, start a UI for Blazor trial. The file this will download will install the msi package. While you can use it as an offline feed, we recommend that you use our online feed.

Follow the Setup the Telerik Private NuGet Feed article to set it up in case you don't have it already.

Once you have added the Telerik NuGet feed, continue with this tutorial.

Add the Telerik Components to Your Project

For client-side Blazor, we recommend the usage of Blazor (ASP.NET Hosted) project. If you have one, go to the Add to Existing Project section below.

If you don't have a Blazor project set up, first you need to create one:

  1. Open Visual Studio 2019

  2. Create a New Project

  3. Choose ASP.NET Core Web Application and click Next. Then, choose a name and location for the project and click Create.

    Create new ASP.NET Core Web Application

  4. Choose the Blazor (ASP.NET Hosted) project type and click Create.

    Select Blazor Project Type

Add to Existing Project

To get access to the UI for Blazor components, follow these steps:

  1. If you don't have an active license, start a UI for Blazor trial. The file this will download will install the msi package. While you can use it as an offline feed, we recommend that you use our online feed.

  2. Install the Telerik.UI.for.Blazor NuGet package to your Blazor project:

    1. Right-click on the Client project in the solution and select Manage NuGet Packages:

    2. Choose the telerik.com feed, find the Telerik.UI.for.Blazor package and click Install (make sure to use the latest version). If you don't have a commercial license, you will only see Telerik.UI.for.Blazor.Trial. Use that instead.

      Add Telerik Blazor Package to Client Project

  3. Open the ~/wwwroot/index.html file in the client web application and register the Theme stylesheet (make sure to use the correct version that matches the official Kendo UI for jQuery release number):

    HTML

    <link rel="stylesheet" href="https://unpkg.com/@progress/kendo-theme-default@latest/dist/all.css" />
    
  4. add the telerik-blazor.min.js file to your main index file - wwwroot/index.html:

    HTML

    <head>
      . . .
      <script src="https://kendo.cdn.telerik.com/blazor/1.2.0/telerik-blazor.min.js" defer></script>
    </head>
    

    Make sure that the version in the URL matches the version of the Telerik UI for Blazor package.

  5. Open the ~/Startup.cs file in the client web application and register the Telerik Blazor service:

    C#

     namespace MyBlazorAppName.Client
     {
         public class Startup
         {
             public void ConfigureServices(IServiceCollection services)
             {
                 //more code may be present here
                 services.AddTelerikBlazor();
             }
    
             //more code may be present here
         }
     }
    
  6. Open the Client .csproj file and ensure that the following switch is present. At the moment the IL Linker needs to be disabled because of an issue in Mono.

    .csproj

    <PropertyGroup>
        <!-- there may be other elements here -->
        <BlazorLinkOnBuild>false</BlazorLinkOnBuild>
    </PropertyGroup>
    

Now your project can use the Telerik UI for Blazor components.

Add a Telerik Component to a View

The final step is to actually use a component on a view and run it in the browser. For example:

  1. Add a Button component to the ~/Pages/Index.cshtml view:

    CSHTML

    @using Telerik.Blazor.Components.Button
    
    <TelerikButton>Say Hello</TelerikButton>
    
  2. Optionally, hook up a click handler that will show a message. The resulting view should look like this:

    CSHTML

    @page "/"
    @using Microsoft.AspNetCore.Components
    @using Telerik.Blazor.Components.Button
    
    <TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton>
    
    <br />
    
    @helloString
    
    @code {
       MarkupString helloString;
    
       void SayHelloHandler()
       {
           string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
           helloString = new MarkupString(msg);
       }
    }
    
  3. Run the app in the browser by pressing F5. You should see something like this:

    App in the browser

Now you have the Telerik components running in your Blazor app.

Next, you can explore the live demos and the rest of the documentation.

See Also

In this article
Not finding the help you need? Improve this article