First Steps on VS for Windows

Welcome to the First Steps on Windows guide on getting started with Progress^® Telerik^® UI for ASP.NET Core with Visual Studio!

The guide creates a use-case scenario which demonstrates how to start working with the suite and implements the Kendo UI DatePicker for ASP.NET Core in your project by using the Telerik UI DatePicker HtmlHelper or TagHelper. For its purposes, the guide uses Visual Studio for Windows 2019.

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

• (Demonstrated in this guide) Create the application from scratch and manually add the necessary setup.
• Use the Telerik UI for ASP.NET Core Visual Studio extensions and create an application that has all necessary scripts, styles, and editor templates.

To get up and running with the project:

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

Meeting the Requirements

Follow the instructions from the official .NET Core documentation site.

Creating the Application

1. Open Visual Studio for Windows 2019 and select Create a New Project.
2. Select ASP.NET Core Web Application and click Next.
3. Set a name and location for the project and click Create.
4. Select Web Application (Model-View-Controller) and click Create.

Add the Telerik NuGet Feed to Visual Studio

• Add the Telerik NuGet Feed for Trial License Users
• Add the Telerik NuGet Feed for Users with Commercial License

Note that when the Nuget Feed is added to Visual Studio through the Progress Trial Installer or through the Progress Control Panel, steps 2 and 3 from the Add the UI for ASP.NET Core NuGet package section will be set up automatically.

Add the Telerik NuGet Feed for Trial License Users

1. If you don't have an active license, download an UI for ASP.NET CORE trial. During the installation of the components, you can setup the Telerik NuGet feed to be added automatically - check the "Set up Telerik NuGet package source" checkbox:

   

Add the Telerik NuGet Feed for Users with Commercial License

1. If you have an active commercial UI for ASP.NET Core license, you can automatically set up the NuGet Feed through the Progress Control Panel. Download the Progress Control Panel from the Overview page of your Telerik account.

   

2. When logging in the Progress Control Panel, check the "set up Telerik NuGet package source" option.

   

   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 Save and Close button.

   

Adding the NuGet Package

1. Open the NuGet Package Manager.

   

2. Add a new package source to https://nuget.telerik.com/nuget.

   

3. From the package source drop-down, select Telerik Source and add your credentials (telerik.com email and password) as prompted.

   

4. Click the Browse tab and search for Telerik.UI.for.AspNet.Core to install it. As a result, a line similar to <PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2020.3.915" /> is added to your .csproj file.

   

Adding 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 MyASPNETCoreProject
   @using MyASPNETCoreProject.Models
   @addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
   @addTagHelper *, Kendo.Mvc
   @using Kendo.Mvc.UI
   

Including the Telerik UI for ASP.NET Core client-side resources

1. Include the client-side resources.

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

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

   7.2 The Microsoft ASP.NET Core Web Application template comes with a jQuery script reference at the end of _Layout.cshtml file. Find it and remove it. The Kendo UI script files required by UI for ASP.NET Core must be loaded in the <head> tag after the jQuery script.

   7.3 Copy and paste the scripts from the snippet bellow to the <head> tag in the _Layout. The content of the <head> tag with the theme file and the script files included should look as shown in the snippet below. kendo.all.min.js and kendo.aspnetmvc.min.js script files have to be loaded after the jquery.min.js script. jQuery should be loaded only once in the <head> tag. Make sure there are no duplicate references elsewhere in the _Layout.

   <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>@ViewData["Title"] - TelerikAspNetCoreApp</title>
   
   <link href="https://kendo.cdn.telerik.com/2020.3.915/styles/kendo.bootstrap-v4.min.css" rel="stylesheet" type="text/css" />
   
   <script src="https://kendo.cdn.telerik.com/2020.3.915/js/jquery.min.js"></script>
   <script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.all.min.js"></script>
   <script src="https://kendo.cdn.telerik.com/2020.3.915/js/kendo.aspnetmvc.min.js"></script>
   </head>             
   

2. Use a Kendo UI widget 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>
   

   As a result, the following sample page is created.

   

Next Steps

• Use data-bound widgets
• Ways to download and install UI for ASP.NET Core (overview)
• Create your own custom bundles
• Explore the helper script dependencies

See Also

• Installing UI for ASP.NET Core with Bower
• Installing UI for ASP.NET Core by Using the CDN Services
• Installing UI for ASP.NET Core with NPM
• Installing UI for ASP.NET Core with NuGet