New to Telerik UI for ASP.NET MVC? Start a free 30-day trial

Adding Telerik UI with NuGet

This article demonstrates how to add Telerik UI components to an ASP.NET MVC Web Application by using the Telerik NuGet server. You will add the Telerik UI NuGet package and the required client-side resources manually, and then implement the Kendo UI Grid in your project by using the Telerik UI Grid HTML Helper.

To get up and running with the project:

1. Check the prerequisites
2. Create an ASP.NET MVC Web Application
3. Install a license key.
4. Add the Telerik NuGet Feed to Visual Studio
5. Install the Telerik UI for ASP.NET MVC NuGet package
6. Include the client-side resources
7. Add a component.
8. Build and run the application

Prerequisites

• Telerik UI for ASP.NET MVC requires the .NET Framework.

• Visual Studio 2012 or later.

  For Visual Studio 2017 or later, you must install the ASP.NET & web development workload. See Microsoft's Install Visual Studio workloads documentation for guidance.

• To download the Telerik UI NuGet packages, you need a Telerik account.

Creating the Application

If you already have an existing project and you want to add Telerik UI for ASP.NET MVC to the application, skip this section and continue with installing a license key.

1. Open Visual Studio 2019 for Windows and select Create a new project.
2. Select ASP.NET Web Application (.NET Framework) and click Next.
3. Set a name and location for the project and click Create.
4. Select MVC and click Create.

Installing a License Key

Starting with Telerik UI for ASP.NET MVC 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 install the NuGet package.

In this tutorial, you will use the Telerik NuGet feed to download the UI for ASP.NET MVC 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. Right-click the solution and select Manage NuGet Packages for Solution....

   

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

3. Click the Browse tab, search for Telerik.UI.for.AspNet.Mvc5 and install it.

   

When you use the NuGet package manager to install Telerik.UI.for.AspNet.Mvc5, you save time. It performs the following steps in the background:

• Adds a reference to the Kendo.Mvc.dll assembly that contains the Telerik UI for ASP.NET MVC helpers.
• Updates the web.config file to indicate the Kendo.Mvc.UI namespace where the helpers are located.

Including the Client-Side Resources

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

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

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

   HTML

   <head>
   	...
   	@Styles.Render("~/Content/css")
   	@Scripts.Render("~/bundles/modernizr")
   
   	@* Add the Telerik UI Bootstrap Main theme: *@
   	<link href="https://kendo.cdn.telerik.com/themes/12.2.3/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
   	...
   </head>

2. The ASP.NET Web Application template comes with a jQuery script reference at the end of _Layout.cshtml file. Locate the @Scripts.Render("~/bundles/jquery") 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 href="https://kendo.cdn.telerik.com/themes/12.2.3/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/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 href="https://kendo.cdn.telerik.com/themes/12.2.3/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
   	<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 installed Telerik UI for ASP.NET MVC NuGet package and the required client-side assets must have identical versions.

4. Finally, add the bootstrap.min.js script available in ASP.NET Web Application template. The <head> tag must contain the following sylesheets and scripts:

   HTML

   
   	@Styles.Render("~/Content/css")
   	@Scripts.Render("~/bundles/modernizr")
   	<link href="https://kendo.cdn.telerik.com/themes/12.2.3/bootstrap/bootstrap-main.css" rel="stylesheet" type="text/css" />
   	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   	<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>
   	
   	@* Add the bootstrap.min.js script: *@
   	<script src="@Url.Content("~/Scripts/bootstrap.min.js")"></script>
   </head>

Always observe the following rules when adding client-side resources to your project:

• Register the Kendo UI script files (kendo.all.min.js and kendo.aspnetmvc.min.js) after the jquery.min.js script.
• The jQuery script must be loaded only once. It must be placed only in the <head> tag of the _Layout.cshtml file. Ensure there are no duplicate jQuery references elsewhere in the _Layout file.
• The Telerik UI for ASP.NET MVC version and the version of the included Telerik UI theme must be mutually compatible. For more information, refer to the compatibility table.
• The Kendo.Mvc.dll and the referenced Kendo UI scripts must have identical versions.

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

To define a Grid component, follow the next steps:

1. Create a model in the Models folder of the application.

   C#

   public class Product
   {
   	public int ProductID { get; set; }
   	public string ProductName { get; set; }
   	public Nullable<decimal> UnitPrice { get; set; }
   	public bool Discontinued { get; set; }
   }

2. Open the ~/Views/Home/Index.cshtml view (if using ASPX, the Index.aspx file).

3. Define a Telerik UI Grid HtmlHelper.

   Razor

       <div class="text-center">
   		<h2>Kendo UI Grid</h2>
   		@(Html.Kendo().Grid<TelerikMvcApp1.Models.Product>()
   			.Name("grid")
   			.Columns(columns =>
   			{
   				columns.Bound(c => c.ProductID).Width(100);
   				columns.Bound(c => c.ProductName).Width(300);
   				columns.Bound(c => c.UnitPrice).Width(100);
   				columns.Bound(c => c.Discontinued).Width(200);
   			})
   			.DataSource(dataSource => dataSource
   				.Ajax()
   				.Read(read => read.Action("Select", "Home"))
   			)
   		)
   	</div>

4. Open the HomeController.cs and import the Kendo.Mvc.UI and the Kendo.Mvc.Extensions namespaces so that you can use Kendo.Mvc.UI.DataSourceRequest and the ToDataSourceResult() extension method in the next step.

   C#

   using Kendo.Mvc.Extensions;
   using Kendo.Mvc.UI;
   using TelerikMvcApp1.Models;

5. In the HomeController.cs, add a new Action method that returns the Grid data as JSON. The Grid makes Ajax requests to this Action method.

   C#

   public ActionResult Select([DataSourceRequest]DataSourceRequest request)
   {
   	var data = Enumerable.Range(1, 10)
   		.Select(index => new Product
   		{
   			ProductID = index,
   			ProductName = "Product #" + index,
   			UnitPrice = index * 10,
   			Discontinued = false
   		});
   
   	return Json(data.ToDataSourceResult(request), JsonRequestBehavior.AllowGet);
   }

Building and Running the Application

Press CTRL+F5 to build and run the application. As a result, the following sample page is created.

Next Steps

• Explore the Telerik UI for ASP.NET MVC fundamentals
• Grid Overview
• Integrate Telerik UI for ASP.NET MVC in Visual Studio

See Also

• Collected Examples on ASP.NET MVC
• Collected Examples on ASP.NET Web Technologies
• Collected Examples on Telerik UI for ASP.NET MVC