First Steps with Client-side UI for Blazor
This article explains how to get the Telerik UI for Blazor components in your Client-side (WebAssembly) Blazor project and start using them quickly. The process consists of the following steps:
- Set Up a Blazor Project
- Add the Telerik Blazor Components to an Existing Project
- Add a Telerik Component to a View
If you are familiar with the Telerik NuGet Feed and Blazor in general, you may want to follow the shorter, more technical article with the same information: What You Need. The current article is designed as a step-by-step tutorial from the basics for new users.
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.
Alternatively, you can also access the .nupkg
files from our private NuGet feed or by creating a local feed from your installation.
Step 1 - Set Up a Blazor Project
Make sure that you have .NET Core 3.1.x or .NET 5, and Visual Studio 2019 installed.
The latest version of Telerik UI for Blazor is 2.22.0
and it supports .NET Core 3.1.11 and .NET 5
.
For a client-side Blazor App
, we recommend the usage of Blazor (ASP.NET Hosted)
project.
If you have one, go to the Add the Telerik Blazor Components to an Existing Project section below.
There are three ways to create the project:
Create a Project with the Telerik VS Extensions
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, you can create the Blazor project from the command prompt - see the dotnet new
command and the arguments related to Blazor apps:
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:
Open Visual Studio 2019
Create a New Project
-
Choose
Blazor App
and clickNext
. Then, choose a name and location for the project and clickCreate
. -
Choose the
Blazor WebAssembly App
project type, select theASP.NET Core hosted
checkbox, and clickCreate
.
Step 2 - Add the Telerik Blazor Components to 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:
-
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:
-
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.
-
Right-click on the
Client
project in the solution and selectManage NuGet Packages
: -
Choose the
telerik.com
feed, find theTelerik.UI.for.Blazor
package and clickInstall
(make sure to use the latest version). If you don't have a commercial license, you will only seeTelerik.UI.for.Blazor.Trial
. Use that instead.
-
-
add the
telerik-blazor.js
file to your main index file -wwwroot/index.html
: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 } } }
-
Open the
~/wwwroot/index.html
file in the client web application 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>
-
Open the
~/Program.cs
file in the client web application and register the Telerik Blazor service:C#
using Microsoft.AspNetCore.Components.WebAssembly.Hosting; using Microsoft.Extensions.DependencyInjection; using System.Threading.Tasks; using System.Net.Http; using System; namespace ClientBlazorProject.Client // make sure this matches your actual WASM project namespace { public class Program { public static async Task Main(string[] args) { // sample host builder for a WASM app, yours may differ var builder = WebAssemblyHostBuilder.CreateDefault(args); builder.RootComponents.Add<App>("app"); builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) }); // there may be more code here // register the Telerik services builder.Services.AddTelerikBlazor(); // there may be more code here // sample host builder for a WASM app, yours may differ await builder.Build().RunAsync(); } } }
-
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
-
Next to your main layout file (by default, the
~/Shared/MainLayout.razor
file in the Blazor project), add a razor component calledTelerikLayout.razor
with the following content:TelerikLayout.razor
@inherits LayoutComponentBase <TelerikRootComponent> @Body </TelerikRootComponent>
-
Open the main layout file (by default, the
~/Shared/MainLayout.razor
file in the Blazor project) and add the following line at its first line:MainLayout.razor
@layout TelerikLayout @* more code will be present here depending on your project *@
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:
-
Add a Button component to the
~/Pages/Index.razor
view:RAZOR
<TelerikButton>Say Hello</TelerikButton>
-
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); } }
-
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 Steps
Next, you can explore the live demos and the rest of the documentation. You can also find the entire demos project in the demos
folder of your local installation - it is fully runnable and you can inspect, modify and copy the code from it. The project targets the latest official .NET version, and its readme file provides more details on running the project and using older versions of the framework.
Many applications have a data grid component, and you can get started with the fully featured Telerik Grid in the Grid Overview article.
You can also explore the List of Components and pick the ones you are interested in.