First Steps with Server-side UI for Blazor

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

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

Step 0 - Download the Components

A pre-requisite is having access to the Telerik UI for Blazor components. The easiest way to get them to your development machine is to use the Progress Control Panel or to download the automated installer from your telerik.com account.

If you are not a customer, you can download a free, fully functional trial and the same options will apply to you as well.

Step 1 - Set Up a Blazor Project

Blazor is still a new 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 create and run basic sample Blazor applications: https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.0&tabs=visual-studio.

Make sure that you have .NET Core 3.1.4 and Visual Studio 2019 installed.

The latest version of Telerik UI for Blazor is 2.15.0 and it supports .NET Core 3.1.4.

You may also find useful the Getting started videos for Telerik UI for Blazor by Telerik.

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

To use Blazor server-side, you need to use the Blazor App type of project with its Blazor Server App flavor. If you have one, go to the Add the Telerik Components to an Existing Project Project section below.

You can use the Visual Studio Extensions we provide to create the project for you, so that you can start using the Telerik components immediately.

If you use VS Code, you can also use our VS Code Extension to create a Telerik-enabled project.

The rest of this article will explain the manual steps if you want to have a better understanding of the underlying process.

Create a Project with the CLI

The next section shows how to create the Blazor through the Visual Studio interface. If you are not running Visual Studio, follow the MSDN tutorial on creating the Blazor project from the command prompt:

• https://docs.microsoft.com/en-us/aspnet/core/blazor/get-started?view=aspnetcore-3.1&tabs=netcore-cli&viewFallbackFrom=aspnetcore-3.0

The rest of this article shows some steps through the Visual Studio interface, as it is the most common IDE used with Blazor. Where such steps exist, there are links and instructions on performing them yourself (e.g., adding a nuget feed through the CLI).

Create a Project with Visual Studio

To create a project manually, follow these steps:

1. Open Visual Studio 2019

2. Create a New Project

3. Choose Blazor App and click Next. Then, choose a name and location for the project and click Create.

   

4. Choose the Blazor Server App project type and click Create.

   

Step 2 - Enable the Telerik Components in an Existing Project

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 let you download and install the components, and will also let you setup our online NuGet feed automatically - make sure to select the "Set up Telerik NuGet package source" checkbox:

If you prefer to do the process yourself, follow the Setup the Telerik Private NuGet Feed article to set it up manually in case you don't have it already.

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

Enable the Components in the Project

To have the project use the Telerik 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 let you download and install the components, and will also let you setup our online NuGet feed automatically - make sure to select the "Set up Telerik NuGet package source" checkbox:

   

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

   You can watch a video tutorial how to add the Telerik components to your project here, or you can follow the text instructions after it.

   1. Right-click on the 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.

      

3. add the telerik-blazor.js file to your main index file - ~/Pages/_Host.cshtml:

   HTML

   <head>
     . . .
     <script src="_content/Telerik.UI.for.Blazor/js/telerik-blazor.js" defer></script>
   
     <!-- For Trial licenses use
       <script src="_content/Telerik.UI.for.Blazor.Trial/js/telerik-blazor.js" defer></script>
     -->
   </head>
   

   To enable the use of static assets in your project, make sure you have the following line to your Server project Startup.cs file:

   C#

   // Startup.cs
   namespace MyBlazorAppName
   {
       public class Startup
       {
           public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
           {
               //more code may be present here
   
               //make sure this is present to enable static files from a package
               app.UseStaticFiles();
   
               //more code may be present here
           }
       }
   }
   

4. Open the ~/Pages/_Host.cshtml and register the Theme stylesheet:

   <head>
     . . .
       <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor/css/kendo-theme-default/all.css" />
   
       <!-- For Trial licenses use
           <link rel="stylesheet" href="_content/Telerik.UI.for.Blazor.Trial/css/kendo-theme-default/all.css" />
         -->
   </head>
   

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

   C#

   namespace MyBlazorAppName
   {
       public class Startup
       {
           public void ConfigureServices(IServiceCollection services)
           {
               //more code may be present here
               services.AddTelerikBlazor();
           }
   
           //more code may be present here
       }
   }
   

6. Add the following to your ~/_Imports.razor file so the project recognizes our components in all files:

   _Imports.razor

   @using Telerik.Blazor
   @using Telerik.Blazor.Components
   

7. Open the main layout file (by default, the ~/Shared/MainLayout.razor file in the Blazor project) and add a <TelerikRootComponent> element at its root level. The layout file should look similar to this (there may be additional elements in your app):

   MainLayout.razor

   @inherits LayoutComponentBase
   
   <TelerikRootComponent>
   
       <div class="sidebar">
           <NavMenu />
       </div>
   
       <div class="main">
           @Body
       </div>
   
   </TelerikRootComponent>
   

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

Step 3 - 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 ~/Components/Pages/Index.razor view:

   RAZOR

   <TelerikButton>Say Hello</TelerikButton>
   

2. Optionally, hook up a click handler that will show a message. The resulting view should look like this:

   RAZOR

   @page "/"
   
   <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, after clicking the button:

   

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

• Get Started with Client-side Blazor
• Telerik Private NuGet Feed
• Getting Started Videos for Blazor