Getting Started

New to Telerik UI for Blazor? Download free 30-day trial

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. You will create a new application from scratch, learn how to add the UI for Blazor components to a project, and finally, add a UI component to a view.

This step-by-step tutorial starts with the basics. If you are already familiar with the Telerik NuGet Feed and Blazor in general, you may prefer the Telerik UI for Blazor workflow article.

Prerequisites

  • To successfully complete the steps in this tutorial, make sure that you have installed a current Visual Studio version.

  • To learn more about the compatibility of the Telerik UI for Blazor components with different browser and .NET versions, see the system requirements.

  • This online documentation covers the latest version of Telerik UI for Blazor, which is 4.5.0. If needed, download the offline PDF documentation for the required older product version.

Step 0: Download Telerik UI for Blazor

  • If you have already purchased a Telerik UI for Blazor license, continue with the next step and create a new project.

  • If you are new to UI for Blazor and haven't purchased a license yet, you must download and install the trial version of the UI for Blazor components—this will activate your free trial and allow you to use the components. During the installation, select the Set up Telerik NuGet package source checkbox and the installer will configure the Telerik online NuGet feed automatically. You will use this feed later in the tutorial.

Trial users must complete the installation of the components. Otherwise their trial license will not be active and they cannot successfully complete the tutorial.

Step 1: Create a New Project

  1. Open Visual Studio and select Create a new project.

  2. Select the Blazor Server App project type, enter a name for your project, and then click Next.

  3. Select the desired framework and click Create.

Step 2: Add the Telerik NuGet Feed to Visual Studio

In this tutorial, you will use the Telerik NuGet feed to download the UI for Blazor components. This NuGet feed is private and requires you to authenticate with your Telerik user name and password:

  1. In Visual Studio and go to Tools > NuGet Package Manager > Package Manager Settings.

  2. Select Package Sources and then click the + button to add a new package source.

  3. Enter a Name for the new package source, for example, telerik.com.

  4. Add the https://nuget.telerik.com/v3/index.json URL as a Source. Click OK.

    Add the Telerik NuGet Feed in Visual Studio

For alternative download options, check the Workflow article.

Step 3: Install the Telerik UI for Blazor Components

  1. Right-click the Blazor Server project in the solution and select Manage NuGet Packages.

    Manage NuGet Packages

  2. Install the Telerik Blazor NuGet package:

    1. Select the telerik.com Package source that you added earlier. As this is a private NuGet feed, you must authenticate with your Telerik account user name and password.
    2. Select the Browse tab, find the NuGet package, and click Install. Commercial license holders should install Telerik.UI.for.Blazor. Trial users should install Telerik.UI.for.Blazor.Trial.

    Add Telerik Blazor Package to the project

Step 4: Enable the Blazor UI Components

To enable the Telerik UI for Blazor components, you must add several client-side dependencies to the application:

1. Add the telerik-blazor.js file to your main index file:

  • ~/Pages/_Host.cshtml for .NET 3.x and .NET 7
  • ~/Pages/_Layout.cshtml for .NET 6

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>

2. To enable the use of static assets in your project, add the app.UseStaticFiles(); line to the startup file of your Blazor Server project (by default, this line is already present):

  • Use Startup.cs for .NET 3.x
  • Use Program.cs for .NET 6 and .NET 7

C#

var app = builder.Build();

// ...

//To enable static files from a package, make sure this is present.
app.UseStaticFiles();

// ...

app.Run();

namespace MyBlazorAppName
{
    public class Startup
    {
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            // ...

            //To enable static files from a package, make sure this is present.
            app.UseStaticFiles();

            // ...
        }
    }
}

3. To select the appearance and color scheme for the Telerik Blazor components, add the theme stylesheet as a static asset or from a CDN.

  • Use the ~/Pages/_Host.cshtml index file for .NET 3.x and .NET 7
  • Use the ~/Pages/_Layout.cshtml index file for .NET 6
<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>

4. In the startup file of your Blazor Server project, register the Telerik Blazor Service:

  • Use Startup.cs for .NET 3.x
  • Use Program.cs for .NET 6 and .NET 7

C#

// ...

var builder = WebApplication.CreateBuilder(args);

// ...

builder.Services.AddTelerikBlazor();

// ...

var app = builder.Build();

namespace MyBlazorAppName
{
    public class Startup
    {
        public void ConfigureServices(IServiceCollection services)
        {
            // ...
            services.AddTelerikBlazor();
        }

        // ...
    }
}

5. In the ~/_Imports.razor file, add the @using directives below. This configures the project to recognize the Telerik components in all files. You can register one or both icon namespaces, depending on the icon type you will be using.

_Imports.razor

@using Telerik.Blazor
@using Telerik.Blazor.Components
@using Telerik.FontIcons
@using Telerik.SvgIcons

6. Next to your main layout file (by default, the ~/Shared/MainLayout.razor file in the Blazor project), add a Razor component called TelerikLayout.razor with the following content:

@inherits LayoutComponentBase

<TelerikRootComponent>
    @Body
</TelerikRootComponent>

7. In the main layout file (by default, the ~/Shared/MainLayout.razor file in the Blazor project), add @layout TelerikLayout as the first line in the file. This will ensure that the TelerikRootComponent wraps all the content in the MainLayout.

@layout TelerikLayout
@inherits LayoutComponentBase

@* @Body and other code will be present here depending on your project *@

Alternatively, the TelerikRootComponent can reside directly in the MainLayout, but it must wrap all the other content, otherwise popups may display at the wrong position. Placing the TelerikRootComponent in a separate Razor file helps for a better separation of concerns.

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

Step 5: Add a Component to a View

The final step in this tutorial is to use a Telerik UI for Blazor component in a view and run it in the browser.

  1. In the ~/Components/Pages/Index.razor view, add a TelerikButton component.

    RAZOR

    <TelerikButton>Say Hello</TelerikButton>

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

    RAZOR

    @page "/"

<TelerikButton OnClick="@SayHelloHandler" ThemeColor="primary">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

Well done! Now you have you first Telerik UI for Blazor component running in your Blazor app.

Next Steps

Video Tutorial

If you prefer video instructions, you can also check the video tutorial below.

See Also

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