Including Client-Side Resources in ASP.NET Core Projects

This article demonstrates how to include the client-side resources required by UI for ASP.NET Core in an ASP.NET Core project and use Visual Studio 2017.

To include the Kendo UI client-side resources you can use either of the following approaches:

The UI for ASP.NET Core suite is a set of server-side wrappers over the Kendo UI for jQuery client-side widgets. This means that the same set of web assets are required in order to run them. You can find more details on the files you will need in the Getting Started with Progress® Kendo UI® and Getting Starged with Kendo Themes articles.

Important

The CDN links and/or package versions have to point to the same UI for ASP.NET Core version which your project references.

Manual Installation

To manually install the resources:

  1. Go to your www.telerik.com account and navigate to Downloads > Telerik UI for ASP.NET Core. Download the telerik.ui.for.aspnetmvc archive. Copy the js and styles folders from the archive to your project under wwwroot\lib\kendo-ui.

    Figure 1. Kendo UI resources

    Kendo UI resources

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

    Important

    In the default .NET Core template, the jQuery scripts are included at the end of the <body> element. To properly load the Telerik UI for ASP.NET HtmlHelpers, move the jQuery scripts and the Kendo UI client-side scripts to the <head> element and make sure that the Kendo UI scripts are loaded after the jQuery ones.

    Example
    <head>
        ...
    
        <environment include="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 exclude="Development">
            ...
    
            <link rel="stylesheet"
                href="https://kendo.cdn.telerik.com/2017.2.621/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.2.621/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>
    
        <environment include="Development">
            ...
    
            <script src="~/lib/jquery/dist/jquery.js"></script>
    
            @* 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 exclude="Development">
            ...
    
            <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.2.0.min.js"
                    asp-fallback-src="~/lib/jquery/dist/jquery.min.js"
                    asp-fallback-test="window.jQuery"
                    crossorigin="anonymous"
                    integrity="sha384-K+ctZQ+LL8q6tP7I94W+qzQsfRV2a+AfHIi9k8z8l9ggpc8X+Ytst4yBo/hH+8Fk">
            </script>
    
            @* Place Kendo UI scripts after jQuery *@
            <script src="https://kendo.cdn.telerik.com/2017.2.621/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.2.621/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>
    
        ...
    </head>
    

Bower Package Installation

Refer to the article on Bower package installation.

Important

ASP.NET Core v2.1 no longer supports Bower. For more information on the alternative approach for copying Kendo UI scripts, refer to the section on copying client resources through NPM and Webpack.

Copying Kendo UI Client Resources through NPM and Webpack

  1. If the project is created through Create New Project Wizard, remove the bower.json file. Otherwise, skip this step.
  2. Add package.json in the following way:

    Example
    {
        "name": "ApplicationName",
        "version": "1.0.0",
        "description": "",
        "main": "main.js",
        "scripts": {
            "build": "webpack"
        },
        "keywords": [],
        "author": "",
        "license": "ISC",
        "dependencies": {
            "css-loader": "^1.0.0",
            "jquery": "^3.2.1",
            "popper.js": "^1.12.6",
            "style-loader": "^0.21.0",
            "@progress/kendo-theme-default": "^2.54.1",
            "@progress/kendo-ui": "2017.2.621"
        },
        "devDependencies": {
            "webpack": "^4.12.0",
            "webpack-cli": "^3.0.8"
        }
    }
    
  3. Add webpack.config.js in the following way:

    Example
    const path = require('path');
    const webpack = require('webpack');
    
    module.exports = {
        entry: './main.js',
        output: {
            filename: 'bundle.js',
            path: path.resolve(__dirname, 'wwwroot')
        },
        module: {
            rules: [
                {
                    test: /\.css$/,
                    use: [{ loader: 'style-loader' }, { loader: 'css-loader' }]
                }
            ]
        },
        plugins: [
            new webpack.ProvidePlugin({
                $: 'jquery',
                jQuery: 'jquery'
            }),
        ],
    }
    
  4. Create a main.js file with the following content.

    Important

    As both jQuery and $ are used throughout the application, in the global scope jQuery is assigned to both variables.

    Example
    jQuery = $ = require("jquery");
    
    import "@progress/kendo-ui";
    import "@progress/kendo-ui/js/kendo.aspnetmvc";
    import "@progress/kendo-theme-default/dist/all.css";
    window.jQuery = window.$ = kendo.jQuery;
    
  5. Open the Command prompt and navigate to the folder of the project.

  6. Run the following commands:

    Example
    npm install
    npm run build
    
  7. In ~/Views/Shared/_Layout.cshtml, replace the Kendo UI CDN scripts with the script that references bundle.js.

    Example
    <script src="~/bundle.js"></script>
    

See Also

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