Getting Started

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. 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 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.0 and Visual Studio 2019 Preview installed. You must use the Preview version of Visual Studio for working with Blazor apps.

The latest version of Telerik UI for Blazor is 1.5.0 and it supports .NET Core 3 Preview 8.

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

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

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 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 Preview

  2. Create a New Project

  3. Choose Blazor App 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 Server App 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 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 the project

  3. Open the ~/Pages/_Host.cshtml and register the Theme stylesheet (note the escaping for the @ symbol):

    HTML

    <link rel="stylesheet" href="https://unpkg.com/@@progress/kendo-theme-default@@latest/dist/all.css" />

  4. 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#

    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();
        }
    }
}

  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. 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

@using Telerik.Blazor.Components.RootComponent

<TelerikRootComponent>

    <div class="sidebar">
        <NavMenu />
    </div>

    <div class="main">
        @Body
    </div>

</TelerikRootComponent>

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 ~/Components/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 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
Related articles
Not finding the help you need? Improve this article