Telerik (Kendo UI) in ASP.NET Core MVC (connect Kendo js files using NPM and Webpack)

Компьютер, программы

→

.NET Core

Telerik (Kendo UI) в ASP.NET Core MVC (подключаем Kendo js файлы используя NPM и Webpack)

посмотрели 8449 раз

обновлено: 13 May 2020

План (5 шагов)

Шаг 1.

Создаем новое ASP.NET Core MVC приложение

Шаг 2.

Скачиваем Telerik (Kendo UI) с помощью NuGet утилиты в Visual Studio

Шаг 3.

В файле Startup.cs подключаем Kendo

Шаг 4.

Подключаем Kendo js файлы используя NPM и Webpack

Шаг 5.

Покажем Kendo DropDownList во Views/Home/Index.cshtml

Шаг 6.

Запускаем пример

Шаг 7.

Скачать готовый пример ...

Шаг 1. Создаем новое ASP.NET Core MVC приложение

Создаем новое приложение ASP.NET Core MVC ...
или
Скачать новое приложение:

MyCoreWebApplication.zip ...

Шаг 2. Устанавливаем package Telerik.UI.for.AspNet.Core в проект Visual Studio

Вариант 1

Устанавливаем package Telerik.UI.for.AspNet.Core с помощью Nuget в Visual Studio 2017

Вариант 2

Устанавливаем package .nupkg файл (Telerik.UI.for.AspNet.Core.2018.3.911.nupkg) с компьютера в проект Visual Studio 2017

Шаг 3. В файле Startup.cs подключаем Kendo

services.AddKendo(); // подключение Kendo
app.UseStaticFiles(); // чтобы наше Web приложение могло бы отдавать статические файлы клиенту

using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Builder;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Http;
using Microsoft.Extensions.DependencyInjection;

namespace WebApplication2
{
     public class Startup
     {
          // This method gets called by the runtime. Use this method to add services to the container.
          // For more information on how to configure your application, visit https://go.microsoft.com/fwlink/?LinkID=398940
          public void ConfigureServices(IServiceCollection services)
          {
               services.AddMvc();
               services.AddKendo();
          }

          // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
          public void Configure(IApplicationBuilder app, IHostingEnvironment env)
          {
               app.UseStaticFiles();

               if (env.IsDevelopment())
               {
                    app.UseDeveloperExceptionPage();
               }

               app.UseMvc(routes =>
               {
                    routes.MapRoute(
                         name: "default",
                         template: "{controller=Home}/{action=Index}/{id?}");
               });
          }
     }
}

Шаг 4. Подключаем Kendo js файлы используя NPM и Webpack

Шаг 1.
Создаем файл package.json

Путь:
D:/MyCoreWebApplication/CoreWebApplication/

Файл package.json

json

{
     "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": "2019.1.115"
     },
     "devDependencies": {
          "webpack": "^4.12.0",
          "webpack-cli": "^3.0.8"
     }
}

Шаг 2.
Создаем файл webpack.config.js

Путь:
D:/MyCoreWebApplication/CoreWebApplication/

Файл webpack.config.js

JavaScript

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'
          }),
     ],
}

Шаг 3.
Создаем файл main.js

Путь:
D:/MyCoreWebApplication/CoreWebApplication/

Файл main.js

JavaScript

import $ from 'jquery';
window.jQuery = $; window.$ = $;

import "@progress/kendo-ui";
import "@progress/kendo-ui/js/kendo.aspnetmvc";
import "@progress/kendo-theme-default/dist/all.css";

Внимание! Чтобы использовать NPM команды нужно установить Node.js ...

В командной строке по пути D:/MyCoreWebApplication/CoreWebApplication/
запускаем

Command Prompt (Win Console)

npm install
npm run build

На экране мы увидим:

У нас создастся новый файл:
D:/MyCoreWebApplication/CoreWebApplication/wwwroot/bundle.js

Шаг 5. Покажем Kendo DropDownList во Views/Home/Index.cshtml

@using Kendo.Mvc.UI

@{
     Layout = null;
}

<!DOCTYPE html>

<html>
<head>
     <meta name="viewport" content="width=device-width" />
     <title>Index</title>
</head>

<script type="text/javascript" src="/bundle.js"></script>

<body>
     Hello!

     @(Html.Kendo().DropDownList()
     .Name("StreetID")
     .OptionLabel("Выберите Улицу")
     .DataValueField("StreetID")
     .DataTextField("StreetName")
     .AutoBind(false))

</body>
</html>

Шаг 6. Run the example

Скачать готовый пример

MyKendoCoreWebApplication.zip ...

Нужно только в командной строке по пути D:/MyCoreWebApplication/CoreWebApplication/
запустить:

Command Prompt (Win Console)

npm install
npm run build

потом скомпилировать проект и запустить

← Previous topic
Entity Framework in the ASP.NET Core MVC application. Using Code First (we write c# code, and the tables in the database are created by ourselves)

Next topic →
Authentication is login/register/logout in the ASP.NET Core MVC application