Getting Started

New to Telerik UI for ASP.NET Core? Download free 30-day trial

First Steps on VS for Windows

This article presents a use case scenario that demonstrates how to start working with the UI for ASP.NET Core. You will implement the Kendo UI DatePicker for ASP.NET Core in your project by using the Telerik UI DatePicker HtmlHelper or TagHelper. In this guide, we use Visual Studio 2019 for Windows.

To configure an ASP.NET Core web application to use Telerik UI for ASP.NET Core, you can apply either of the following approaches:

To get up and running with the project:

  1. Meet the requirements
  2. Create the ASP.NET Core application
  3. Add the Telerik NuGet Feed to Visual Studio
  4. Add the UI for ASP.NET Core NuGet package
  5. Add a reference to Kendo.Mvc.UI
  6. Include the Telerik UI for ASP.NET Core client-side resources
  7. Add a Telerik UI component

Meet the Requirements

Telerik UI for ASP.NET Core requires .NET Core. To install .NET core, follow the instructions on Microsoft's .NET Core documentation site.

Create the Application

  1. Open Visual Studio 2019 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.

    Download Progress Control Panel

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

  4. Select the .NET 5.0 target framework, and then select Create.

Add the Telerik NuGet Feed to Visual Studio

Telerik maintains a NuGet Feed with official UI for ASP.NET Core releases and service packs. These packages are available for registered users.

The next step is to add the Telerik NuGet Feed to Visual Studio:

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

Add the Telerik NuGet Feed for Trial License Users

The easiest way to add the Telerik NuGet feed to Visual Studio if you are a trial user is to install the UI for ASP.NET Core free trial:

  1. Download the UI for ASP.NET Core free trial installer. You need to create a free account if don't have one.

  2. Run the installer.

  3. Select the option Set up Telerik NuGet package source to automatically add the Telerik NuGet feed.

    NuGet checkbox in Progress Trial Installer

To activate your UI for ASP.NET Core trial license, you must complete the installation procedure. Otherwise, the Telerik.UI.for.AspNet.Core NuGet packages will not appear in the NuGet Package Manager.

Add the Telerik NuGet Feed for Users with Commercial License

The easiest way to add the Telerik NuGet feed to Visual Studio if you have purchased a commercial license is to use the Progress Control Panel:

  1. Download the Progress Control Panel from the Overview page of your Telerik account.

    Download Progress Control Panel

  2. Run the Progress Control Panel exe.

  3. On the Login screen, check the set up Telerik NuGet package source option.

    Set Up Nuget on Progress Control Panel Login

  4. If you miss to set up the NuGet Feed on login, go to the Progress Control Panel options and scroll to NUGET SETTINGS. Enter your Telerik credentials and click the Save and Close button.

    Set Up Nuget on Progress Control Panel options

You need a commercial license that includes UI for ASP.NET Core. Otherwise, the Telerik.UI.for.AspNet.Core NuGet packages will not appear in the NuGet Package Manager. If you don't have the required license, follow the instructions in the trial license section.

Add the NuGet Package

  1. Open the NuGet Package Manager.

    Locating and opening the NuGet package manager menu

  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="2021.2.616" /> is added to your .csproj file.

    Selecting and installing the NuGet package

Add a Reference to Kendo.Mvc.UI

  1. Open the Startup.cs file and register the Kendo UI services in the ConfigureServices method.

    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.

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

Include the Telerik UI for ASP.NET Core Client-Side Resources

Note

  • The CDN links and/or package versions have to point to the same UI for ASP.NET Core version that your project references.
  • The Kendo UI scripts have to be placed after jQuery.

Before you can use 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 the Microsoft project uses Bootstrap, you can use the Kendo UI SASS Bootstrap v4 theme to match it:

    <head>
...
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />

@* Add the Kendo Bootstrap v4 theme: *@
<link href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />
...
</head>

  2. The Microsoft ASP.NET Core Web Application template comes with a jQuery script reference at the end of _Layout.cshtml file. Find the jquery.min.js script line in the <body> of the document and remove it.

  3. Add the jQuery script hosted on the Telerik CDN:

    <head>
...
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />

@* Add the the jQuery script from the Telerik CDN: *@
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>
...
</head>

  4. Add the Kendo UI scripts. The Kendo UI script files required by UI for ASP.NET Core must be loaded in the <head> tag after the jQuery script:

    <head>
...
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link href="https://kendo.cdn.telerik.com/2021.2.616/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/jquery.min.js"></script>

@* Add the Kendo UI scripts: *@
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.all.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2021.2.616/js/kendo.aspnetmvc.min.js"></script>
</head>

Note

  • The kendo.all.min.js and kendo.aspnetmvc.min.js script must to be loaded after the jquery.min.js script.
  • jQuery must be loaded only once. Make sure there are no duplicate references elsewhere in the _Layout.

Add a Telerik UI Component

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

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

    <div class="text-center">
        <h2>Kendo UI DatePicker</h2>
        <kendo-datepicker name="my-picker"/>
    </div>

Now you are ready to run the web app.

Congratulations! You created a page that uses the Telerik UI DatePicker.

Sample page

Next Steps

See Also

In this article
Related articles
Not finding the help you need? Improve this article