Telerik UI for ASP.NET Core First Steps with VS for Mac

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

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

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 UI for ASP.NET Core NuGet package
5. Add a license file to your app

Meeting the Requirements

• Follow the instructions from the official .NET Core documentation site.
• Make sure that you have an active trial or commercial license for the product by downloading the installer from the Telerik UI for ASP.NET Core product page. You will need the active trial or commercial license for making downloads from YourAccount and for working with your NuGet Feed.

Creating the Application

1. Open Visual Studio for Mac 2022 and select New.
2. Select Web Application(Model-View-Controller) .NET Core > App and click Next.
3. Select the target framework of the project and click Next.
4. Set a name and location for the project and click Create.
   

Adding the NuGet Package

1. Open the NuGet Package Manager.

   

2. Add a new package source.

   

3. In the Add Package Source popup, add a Telerik Source with the https://nuget.telerik.com/v3/index.json Location URL, enter your credentials (telerik.com email and password), and click OK.

   

4. From the drop-down list with sources, select the Telerik Source. Search for and select Telerik.UI.for.AspNet.Core. Click Add Package to install it. As a result, a line similar to <PackageReference Include="Telerik.UI.for.AspNet.Core" Version="2024.1.319" /> is added to your .csproj file.

   If the package for Telerik UI for ASP.NET Core is not visible in your NuGet feed, then either you do not have an active trial or commercial license for the product, or your current trial or commercial license has expired. Download it from the Telerik UI for ASP.NET Core product page.

   

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

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

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

7. Include the client-side resources in ~\Views\Shared\_Layout.cshtml.

   • 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.
   • As of R3 2023 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/).

   7.1 Since the Microsoft template project uses Bootstrap, you can use the Kendo UI SASS Bootstrap theme to match it.

   7.2 The Microsoft template comes with a jQuery script reference in the body. Find it and move it to the head.

   7.3 After jQuery, copy and paste the scripts from this snippet. Make sure that the versions match the installed Kendo.Mvc.dll.

     <link rel="stylesheet" href="https://kendo.cdn.telerik.com/themes/7.2.1/bootstrap/bootstrap-main.css" />
     <script src="https://kendo.cdn.telerik.com/2024.1.319/js/kendo.all.min.js"></script>   
     <script src="https://kendo.cdn.telerik.com/2024.1.319/js/kendo.aspnetmvc.min.js"></script>              
   

If you prefer to include the client-side resources from a local source instead of CDNs, consider the following article:

Local Client-side Resources

1. 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("datepicker")
           )
       </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.

   

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.

Adding Your License File

Using any client-side assets from the Kendo UI CDN or the @progress/kendo-ui NPM package requires you to add a Kendo UI for jQuery license file to your application. A missing license file triggers a banner, a watermark, and causes a warning message in the browser's console.

To generate your license file and add it to your application, follow the instructions in the Adding a License File article.

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
• How to update UI for ASP.NET Core to a new version
• Switch from Trial to Commercial License

See Also

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