First Steps in Telerik UI for ASP.NET Core with VS for Windows

This tutorial demonstrates how to start working with Telerik UI for ASP.NET Core. You will implement the Telerik UI DatePicker for ASP.NET Core in your project by using its dedicated HtmlHelper or TagHelper. In this guide, you will download and implement the components by using NuGet and Visual Studio 2022 for Windows.

The approach demonstrated in this guide is applicable both for new projects and for existing projects where you want to implement Telerik UI controls.

If you want to start a new project from a template, you can use the Telerik UI for ASP.NET Core Visual Studio extensions and create a new pre-configured application that has all necessary scripts, styles, and editor templates.

In this tutorial, you will:

1. Check the prerequisites.

2. Create an ASP.NET Core application.

   If you already have an existing app that you want to use, skip this step.

3. Install a license key.

4. Add the Telerik NuGet Feed to Visual Studio.

5. Install the Telerik UI for ASP.NET Core NuGet package.

6. Reference Kendo.Mvc.UI.

7. Include the client-side resources.

8. Add a component.

How about a free Telerik UI onboarding course? Check out the Video Onboarding article and learn how to take advantage of the Telerik and Kendo UI Video Courses.

Prerequisites

• .NET Core SDK
• Visual Studio 2022 or later
• Windows 10 or higher
• Telerik account—if you don't have an account yet, you can create one for free.

Creating the Application

1. Open Visual Studio 2022 for Windows and select Create a new project.

2. In the search box, enter Model-View-Controller, select the ASP.NET Core Web App (Model-View-Controller) C# template, and then select Next.

   

3. Enter MyTelerikProject as a project name, and then select Next.

   Using this project name guarantees that the namespace from the code snippets in this tutorial will match your project.

4. Select the .NET target framework of your choice from the dropdown box, and then select Create.

Installing a License Key

Starting with Telerik UI for ASP.NET Core 2025 Q1 release, you must activate the UI components by providing a license key file. Previous versions require a script key instead of a license key file.

To download and install your Telerik license key:

1. Go to the License Keys page in your Telerik account.
2. Click the Download License Key button.
3. Save the telerik-license.txt file to:
   • (on Windows) %AppData%\Telerik\telerik-license.txt, for example, C:\Users\...\AppData\Roaming\Telerik\telerik-license.txt
   • (on Mac or Linux) ~/.telerik/telerik-license.txt, for example, /Users/.../.telerik/telerik-license.txt

This will make the license key available to all Telerik .NET apps that you develop on your local machine.

The Telerik License Key article provides additional details on installing and updating your Telerik license key in different scenarios. Automatic license key maintenance is more effective and recommended in the long run.

Adding the Telerik NuGet Feed to Visual Studio

If you have already configured the Telerik NuGet feed in Visual Studio, jump to Installing the NuGet Package.

In this tutorial, you will use the Telerik NuGet feed to download the UI for ASP.NET Core components. This NuGet feed is private and requires you to authenticate with a NuGet API key.

To generate your NuGet API key:

1. Go to the API Keys page in your Telerik account.

2. Click Generate New Key +.

3. In the Key Note field, add a note that describes the API key.

4. Click Generate Key.

5. Select Copy and Close. Once you close the window, you can no longer copy the generated key. For security reasons, the API Keys page displays only a portion of the key.

6. Store the generated NuGet API key as you will need it in the next steps.

Next, add the Telerik NuGet feed to Visual Studio:

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.

   

5. Whenever Visual Studio displays a dialog to enter credentials for nuget.telerik.com, use api-key as the username and your NuGet API key as the password.

Installing the NuGet Package

Once you configure Visual Studio to access the Telerik NuGet server, you can add NuGet package with the Telerik UI components to the project:

1. Open the NuGet Package Manager.

   

2. From the Package source drop-down, select the Telerik NuGet source.

3. Select the Browse tab, and then enter Telerik.UI.for.AspNet.Core in the search field.

4. Select the project's checkbox and then select Install. As a result, a line similar to <PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2025.4.1111" /> is added to your .csproj file.

   

Adding a Reference to Kendo.Mvc.UI

1. Register the Kendo UI service in the services container.

   • For applications using .NET 6 and the minimal hosting model, open the Program.cs file and register the Kendo UI service.
   C#

   var builder = WebApplication.CreateBuilder(args);
   
   // Add Kendo UI services to the services container.
   builder.Services.AddKendo();

   • For applications using .NET 5 or earlier, open the Startup.cs file and register the Kendo UI services in the ConfigureServices method.
   C#

   public void ConfigureServices(IServiceCollection services)
   {
   	// Add the Kendo UI services to the services container.
   	services.AddKendo();
   }

2. Import the Kendo.Mvc.UI namespace in ~/Views/_ViewImports.cshtml through @using Kendo.Mvc.UI. If you intend to use the Telerik UI ASP.NET Core Tag Helpers, add them with @addTagHelper *, Kendo.Mvc.

   C#

       @using MyTelerikProject
       @using MyTelerikProject.Models
       @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
       @addTagHelper *, Kendo.Mvc
       @using Kendo.Mvc.UI

Including the Client-Side Resources

To enable the Telerik UI for ASP.NET Core components, you must add several client-side dependencies to the application, like scripts and a theme file.

The installed Telerik UI for ASP.NET Core NuGet package and the required client-side assets must have identical versions.

Before adding a Telerik UI component, you must include the theme, the jQuery script, and the required Kendo UI scripts:

1. Go to ~\Views\Shared\_Layout.cshtml and add the theme of your choice to the <head> of the document. Since the ASP.NET Core Web App template uses Bootstrap, you can use the Telerik UI Bootstrap theme to match it:

   HTML

   <head>
   	...
   	<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
   	<link rel="stylesheet" href="~/css/site.css" />
   
   	@* Add the Telerik UI Bootstrap Main theme: *@
   	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/12.2.3/bootstrap/bootstrap-main.css" />
   	...
   </head>

2. The ASP.NET Core Web App template comes with a jQuery script reference at the end of _Layout.cshtml file. Locate the jquery.min.js script line in the <body> of the document and move it to the <head>. Alterantively, use the jQuery script hosted on the jQuery CDN.

   HTML

   <head>
   	...
   	<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
   	<link rel="stylesheet" href="~/css/site.css" />
   	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/12.2.3/bootstrap/bootstrap-main.css" />
   
   	@* Add the jQuery script from the jQuery CDN: *@
   	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   	...
   </head>

3. Add the required Kendo UI script files in the <head> tag after the jQuery script reference:

   HTML

   <head>
   	...
   	<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
   	<link rel="stylesheet" href="~/css/site.css" />
   	<link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/12.2.3/bootstrap/bootstrap-main.css" />
   
   	@* Add the jQuery script from the jQuery CDN: *@
   	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   
   	@* Add the Kendo UI scripts: *@
   	<script src="https://kendo.cdn.telerik.com/2025.4.1111/js/kendo.all.min.js"></script>
   	<script src="https://kendo.cdn.telerik.com/2025.4.1111/js/kendo.aspnetmvc.min.js"></script>
   </head>

• The kendo.all.min.js and kendo.aspnetmvc.min.js scripts must be loaded after the jquery.min.js script.
• jQuery must be loaded only once. Ensure there are no duplicate references elsewhere in the _Layout.
• Starting with version 2023.3.1010, the Kendo UI bundles do not include the jQuery library in their js directories and you can use any available jQuery source you prefer (https://jquery.com/download/).

If you prefer to include the client-side resources from a local source instead of CDNs, refer to the Local Client-Side Resources article.

Adding a Telerik UI Component

The default casing for JSON strings in ASP.NET Core is camelCase. The Telerik UI components that are data-bound depend on PascalCase formatted response from the server. If the JSON serialization isn't configured properly, the UI components will display wrong data. To find out how to configure the application to return the data in Pascal-case, refer to the JSON Serialization article.

Define the Telerik UI DatePicker component by adding the snippet from the following example to ~/Views/Home/Index.cshtml.

	<div class="text-center">
		<h2>Telerik UI DatePicker for ASP.NET Core</h2>
		@(Html.Kendo().DatePicker()
			.Name("my-picker")
		)
	</div>

	@addTagHelper *, Kendo.Mvc

	<div class="text-center">
		<h2>Telerik UI DatePicker for ASP.NET Core</h2>
		<kendo-datepicker name="my-picker"/>
	</div>

Build and run the application.

Congratulations! You created a page that uses the DatePicker component.

Next Steps

• Overview of the UI for ASP.NET Core installation methods
• How to update UI for ASP.NET Core to a new version
• Create a New Telerik UI for ASP.NET Core Application through Visual Studio Extension

See Also

• Using the UI for ASP.NET Core CDN Services
• Switch from Trial to Commercial License
• Migrating from MVC to Core MVC
• MS - Upgrade from ASP.NET Framework to ASP.NET Core