First Steps on 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!

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

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

This First Steps on Mac guide includes the following steps:

  1. Create the ASP.NET Core application
  2. Add the UI for ASP.NET Core NuGet package

Prerequisites

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

Creating the Application

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

    Locating and opening the NuGet package manager menu

  2. Add a new package source.

    Adding the new NuGet source dialog

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

    Adding the credentials and authenticating for NuGet

  4. From the sources drop-down, 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="2019.1.115" /> is added to your .csproj file.

    Selecting and installing the NuGet package

  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.

    7.1 Since the Microsoft template project uses Bootstrap, you can use the Kendo UI SASS Bootstrap v4 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/2019.1.115/styles/kendo.bootstrap-v4.min.css" />
      <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.all.min.js"></script>   
      <script src="https://kendo.cdn.telerik.com/2019.1.115/js/kendo.aspnetmvc.min.js"></script>              
    
  8. 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 created sample page

Video Guide

Next Steps

See Also

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