Edit this page

Getting Started with Telerik UI for ASP.NET Core

This article demonstrates how to configure an ASP.NET Core project to use Telerik UI for ASP.NET Core.

Prerequisites

  1. Download Visual Studio 2015.
  2. Download Visual Studio 2015 Update 3.
  3. Download NET Core 1.0.0 - VS 2015 Tooling Preview 2.
  4. (Optional) Download .NET SDK Core for Windows.

Configuration

To configure an ASP.NET Core project to use Telerik UI for ASP.NET MVC:

  1. Create an ASP.NET MVC web site.
  2. Add the Kendo UI NuGet package.

Create ASP.NET Core Web Sites

Important

If you are configuring an existing project, skip this step.

Below are listed the steps for you to follow when creating an ASP.NET Core web site.

  1. Select File > New Project.

  2. Choose Templates > Visual C# > Web > ASP.NET Core Web Application (.NET Core).

  3. Set a name and location for the project.

  4. Select ASP.NET Core Templates > Web Application from the project templates.

  5. Click OK to create the project.

Add NuGet Packages

Important

Before you continue, set up the Telerik NuGet Private Feed. Store the password in clear text because the .NET Core tooling does not support encryption.

  1. Open the NuGet Package Manager.

    Figure 1. The NuGet package manager

    NuGet package manager

  2. Choose the Telerik package source and search for Telerik.UI.for.AspNet.Core.

  3. Install the Telerik.UI.for.AspNet.Core package. This should add a line to you project.json similar to the one shown below.

    Example
        "dependencies": {
            ...
            "Telerik.UI.for.AspNet.Core": "2017.1.118"
        }
    
  4. Open Startup.cs by using a text editor (IDE) and update it in the way demonstrated in the following examples.

    Locate the ConfigureServices method and add a call to services.AddKendo at the end.

    Example
        public void ConfigureServices(IServiceCollection services)
        {
            ...
            // Maintain property names during serialization. See:
            // https://github.com/aspnet/Announcements/issues/194
            services
                .AddMvc()
                .AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
    
            // Add Kendo UI services to the services container
            services.AddKendo();
        }
    

    Locate the Configure method and add a call to app.UseKendo at the end.

    Example
        public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
        {
            ...
    
            // Configure Kendo UI
            app.UseKendo(env);
        }
    
  5. Import the Kendo.Mvc.UI namespace in ~/Views/_ViewImports.cshtml through @using Kendo.Mvc.UI.

  6. Copy the Kendo UI client-side resources. You can use either of the following approaches:

    • Manual installation—To manually install the resources, copy the js and styles folders from the telerik.ui.for.aspnetmvc archive to wwwroot\lib\kendo-ui. The archive is located in Downloads > UI for ASP.NET MVC of your www.telerik.com account.

      Figure 2. Kendo UI resources

      Kendo UI resources

    • Bower package installation—For more information on how to achieve this, refer to the Kendo UI Professional Bower package installation.

  7. Register the Kendo UI styles and scripts in ~/Views/Shared/_Layout.cshtml.

    Example
        <head>
        ...
    
        <environment names="Development">
            ...
    
            <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.common-nova.min.css" />
            <link rel="stylesheet" href="~/lib/kendo-ui/styles/kendo.nova.min.css" />
        </environment>
        <environment names="Staging,Production">
            ...
    
            <link rel="stylesheet"
                  href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.common-nova.min.css"
                  asp-fallback-href="~/lib/kendo-ui/styles/kendo.common-nova.min.css"
                  asp-fallback-test-class="k-common-test-class"
                  asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
    
            <link rel="stylesheet"
                   href="https://kendo.cdn.telerik.com/2017.1.118/styles/kendo.nova.min.css"
                  asp-fallback-href="~/lib/kendo-ui/styles/kendo.nova.min.css"
                  asp-fallback-test-class="k-theme-test-class"
                  asp-fallback-test-property="opacity" asp-fallback-test-value="0" />
        </environment>
        </head>
        <body>
    
        ...
    
        <environment names="Development">
            ...
    
            @* Place Kendo UI scripts after jQuery *@
            <script src="~/lib/kendo-ui/js/kendo.all.min.js"></script>
            <script src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"></script>
        </environment>
        <environment names="Staging,Production">
            ...
    
            @*  Place Kendo UI scripts after jQuery *@
            <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.all.min.js"
                    asp-fallback-src="~/lib/kendo-ui/js/kendo.all.min.js"
                    asp-fallback-test="window.kendo">
            </script>
            <script src="https://kendo.cdn.telerik.com/2017.1.118/js/kendo.aspnetmvc.min.js"
                    asp-fallback-src="~/lib/kendo-ui/js/kendo.aspnetmvc.min.js"
                    asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
            </script>
        </environment>
    
        @RenderSection("scripts", required: false)
        </body>
    
  8. Use a Kendo UI widget by adding the snippet from the following example to ~/Views/Home/Index.cshtml.

    Example
            <h2>Kendo UI DatePicker</h2>
    
            @(Html.Kendo().DatePicker()
                    .Name("datepicker")
                    .Deferred()
            )
    
            @* All initialization scripts are rendered to the bottom of the page, see _Layout.cshtml *@
            @section scripts {
                @Html.Kendo().DeferredScripts()
            }
    
            <!--_-->
    

    Now that all is done, you can see the sample page.

    Figure 3. The end result—a sample page

    Sample page

See Also