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 run the basic sample Blazor application: https://docs.microsoft.com/en-us/aspnet/core/razor-components/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 (ASP.NET Core 3.0 and Visual Studio 2019 Preview channel are required).

Using Official Visual Studio 2019

You can also use the official VS 2019 installation and enable the .NET Core 3.0 Preview in order to use Blazor. To do that:

  1. Open Tools > Options in the menu bar.
  2. Open the Projects and Solutions node. Open the .NET Core tab.
  3. Check the box for Use previews of the .NET Core SDK. Select OK.

Once you have the 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 Razor Components type of 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 Razor Components 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.min.js file to your main index file - ~/Pages/_Host.cshtml:

    HTML

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

    Make sure that the version in the URL matches the version of the Telerik Blazor package used in your project.

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

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 Microsoft.AspNetCore.Components
@using Telerik.Blazor.Components.Button

<TelerikButton OnClick="@SayHelloHandler" Primary="true">Say Hello</TelerikButton>

<br />

@helloString

@functions {
   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