Edit this page

Including Client-Side Resources in ASP.NET Core Projects

This article demonstrates how to include the client-side resources 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:

Manual Installation

To manually install the resources:

  1. Copy the js and styles folders from the telerik.ui.for.aspnetmvc archive to wwwroot\lib\kendo-ui. The archive is located in Downloads > Telerik UI for ASP.NET Core of your www.telerik.com account.

    Figure 2. 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": "2018.2.620"
        },
        "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:

    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