# Adding Telerik UI for ASP.NET MVC through Local Files

This article explains how to manually configure an ASP.NET MVC application to use the Telerik UI controls. You will learn how to add the required `Kendo.Mvc.dll` assembly, which provides the UI helpers for ASP.NET MVC, by using local files. The process also includes specifying the required namespaces and adding necessary client-side resources, such as a theme file and Kendo UI scripts, which are essential for proper control functionality and appearance.

The approach described in this tutorial is applicable to either new or existing projects. An alternative approach that automatically adds the namespaces and the `Kendo.Mvc.dll` assembly to the project is the [Setup with Telerik NuGet](https://www.telerik.com/aspnet-mvc/documentation/getting-started/setup-with-nuget).

## Prerequisites

* Telerik UI for ASP.NET MVC requires the <a href="https://dotnet.microsoft.com/download/dotnet-framework" target="_blank">.NET Framework</a>.

* [Visual Studio](https://www.visualstudio.com/downloads/) 2012 or later.

  For Visual Studio 2017 or later, you must install the **ASP.NET & web development** workload. See Microsoft's <a href="https://learn.microsoft.com/en-us/visualstudio/install/install-visual-studio?view=vs-2019#step-4---choose-workloads" target="_blank">Install Visual Studio workloads</a> documentation for guidance.

* [Telerik account](https://www.telerik.com/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](https://www.telerik.com/aspnet-mvc/documentation/getting-started/manual-setup#installing-a-license-key).

To create the application:

1. Open Visual Studio 2019 for Windows. In the toolbar, select **File** > **New** > **Project**.
2. Search for and select **ASP.NET Web Application C#** and click **Next**.
3. Set a name and location for the project and click **Create**.
4. Select the **MVC** template and click **Create**.

## Installing a License Key

> tip 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](https://www.telerik.com/aspnet-mvc/documentation/installation/activating-your-license/legacy-licensing) instead of a license key file.

To download and install your Telerik license key:

1. Go to the <a href="https://www.telerik.com/account/your-licenses/license-keys" target="_blank">License Keys page</a> 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](https://www.telerik.com/aspnet-mvc/documentation/installation/activating-your-license/setting-up-your-license) article provides additional details on installing and updating your Telerik license key in different scenarios. [Automatic license key maintenance](https://www.telerik.com/aspnet-mvc/documentation/installation/activating-your-license/setting-up-your-license#automatic-installation) is more effective and recommended in the long run.

## Downloading and Referencing the Kendo.Mvc.dll Assembly

The `Kendo.Mvc.dll` assembly contains the UI for ASP.NET MVC HtmlHelpers. Follow the steps below to download and reference it in the project:

1. Log in to your [Telerik account](https://www.telerik.com/login/v2/telerik).

2. Download the installation file:

   * If you are new to UI for ASP.NET MVC and have not purchased a license yet, you can [Start a Free Trial](https://www.telerik.com/try/ui-for-asp.net-mvc) by downloading and installing the UI for ASP.NET MVC components.  Once the installation completes, your free trial will be activated and you can continue with the next step.

   * If you have already purchased a license, continue with the next step.

3. Go to the [Telerik UI for ASP.NET MVC download page](https://www.telerik.com/account/product-download?product=KENDOUIMVC) and download the `telerik.ui.for.aspnetmvc.2026.4.1111.zip` file.

4. Open the downloaded bundle and extract the `Kendo.Mvc.dll` from the `\wrappers\aspnetmvc\Binaries\Mvc5\` folder to the `bin` folder of your project.

5. Right-click `References` in the Visual Studio Solution Explorer, browse to the `bin` folder, select the `Kendo.Mvc.dll`, and add it as reference to the project.

## Adding the Kendo.Mvc.UI Namespace

Add the `Kendo.Mvc.UI` namespace to the `~/Views/Home/Index.cshtml` view.

```Razor
@using Kendo.Mvc.UI
```

## Including the Client-Side Resources

To enable the Telerik UI for ASP.NET MVC components, you must add several [client-side](https://www.telerik.com/aspnet-mvc/documentation/installation/adding-client-side-resources/getting-started-copy-client-resources) dependencies to the application, like scripts and a [theme file](https://www.telerik.com/aspnet-mvc/documentation/styles-and-layout/sass-themes/overview)

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](https://www.telerik.com/aspnet-mvc/documentation/styles-and-layout/sass-themes/overview#built-in-themes) to match it:

   ```HTML
   <head>
   	...
   	@Styles.Render("~/Content/css")
   	@Scripts.Render("~/bundles/modernizr")

   	@* Add the Telerik UI Bootstrap Main theme: *@
   	<link href="https://cdn.jsdelivr.net/npm/@progress/kendo-theme-bootstrap@14.9.0/dist/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://cdn.jsdelivr.net/npm/@progress/kendo-theme-bootstrap@14.9.0/dist/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://cdn.jsdelivr.net/npm/@progress/kendo-theme-bootstrap@14.9.0/dist/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://cdn.jsdelivr.net/npm/@progress/kendo-ui@2026.4.1111/umd/kendo.all.min.js"></script>
   	<script src="https://cdn.jsdelivr.net/npm/@progress/kendo-ui@2026.4.1111/umd/kendo.aspnetmvc.min.js"></script>
   </head>
   ```

   > The installed Telerik UI for ASP.NET MVC NuGet package and the required [client-side assets](https://www.telerik.com/aspnet-mvc/documentation/installation/adding-client-side-resources/getting-started-copy-client-resources) 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://cdn.jsdelivr.net/npm/@progress/kendo-theme-bootstrap@14.9.0/dist/bootstrap-main.css" rel="stylesheet" type="text/css" />
   	<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
   	<script src="https://cdn.jsdelivr.net/npm/@progress/kendo-ui@2026.4.1111/umd/kendo.all.min.js"></script>
   	<script src="https://cdn.jsdelivr.net/npm/@progress/kendo-ui@2026.4.1111/umd/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](https://www.telerik.com/aspnet-mvc/documentation/styles-and-layout/sass-themes/compatibility).
> * 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](https://www.telerik.com/aspnet-mvc/documentation/installation/adding-client-side-resources/using-local-files) article.

## Adding a Telerik UI Component

To define a [Grid component](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/overview), 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 and 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>
   ```

3. 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;
   ```

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

![UI for ASP.NET MVC Sample page](https://www.telerik.com/aspnet-mvc/documentation/assets/14dbad97dea063276bf9b1bcfc0a54d4/sample-page.png)

## Next Steps

* [Explore the Telerik UI for ASP.NET MVC fundamentals](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/helper-basics/fundamentals-mvc)
* [Grid Overview](https://www.telerik.com/aspnet-mvc/documentation/html-helpers/data-management/grid/overview)
* [Integrate Telerik UI for ASP.NET MVC in Visual Studio](https://www.telerik.com/aspnet-mvc/documentation/vs-integration/introduction)

## See Also

* [Collected Examples on ASP.NET MVC](https://github.com/telerik/kendo-examples-asp-net-mvc)
* [Collected Examples on ASP.NET Web Technologies](https://github.com/telerik/kendo-examples-asp-net)
* [Collected Examples on Telerik UI for ASP.NET MVC](https://github.com/telerik/ui-for-aspnet-mvc-examples)