学习时使用的是VS2017+Core2.1了,不再讨论VS2015和core1.1的东西。

配置ASP.NET Core Web应用程序以使用Telerik UI for ASP.NET Core:

第一步:创建ASP.NET Core Web应用程序。

第二步:添加Kendo UI NuGet包。

因为我们是本地安装,所以建立一个源

默认源路径(以安装路径为准):C:\Program Files (x86)\Progress\Telerik UI for ASP.NET Core R2 2018\wrappers\aspnetcore\Binaries\AspNet.Core

其实就做了一件事,就是在.csproj  文件中添加了一行引用代码,当然你可以不用以上操作,直接在该文件中添加一下代码也是可以的。

.csproj 文件的打开方法

修改Startup.cs文件

修改ConfigureServices方法

 public void ConfigureServices(IServiceCollection services)
{
services.Configure<CookiePolicyOptions>(options =>
{
// This lambda determines whether user consent for non-essential cookies is needed for a given request.
options.CheckConsentNeeded = context => true;
options.MinimumSameSitePolicy = SameSiteMode.None;
}); services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1)
.AddJsonOptions(options =>
options.SerializerSettings.ContractResolver = new DefaultContractResolver());
// Add Kendo UI services to the services container
services.AddKendo();
}

需要添加引用:using Newtonsoft.Json.Serialization;

修改Configure方法(这个方法自2018R2开始过时了,可以不用写)

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
... // Configure Kendo UI
app.UseKendo(env);
}

将 Kendo.Mvc.UI 命名空间导入 文件~/Views/_ViewImports.cshtml ,使用指令:@using Kendo.Mvc.UI.

@using KendoUiTest
@using KendoUiTest.Models
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
@addTagHelper *, Kendo.Mvc
@using Kendo.Mvc.UI

复制Kendo UI客户端资源。

手动安装 - 要手动安装资源,请将teles.ui.for.aspnet mvc安装目录中的js和styles 夹复制到wwwroot \ lib \ kendo-ui

我个人更觉得再加一级版本号目录就好了

方便以后手动升级,毕竟肯定要手动升级,新版本放在新目录里,方便测试回滚吧,比较土的方法。

在〜/ Views / Shared / _Layout.cshtml中注册Kendo UI样式和脚本。

重要说明:在默认的.NET Core模板中,jQuery脚本包含在<body>元素的末尾。 要正确加载ASP.NET HtmlHelpers的Telerik UI,请将jQuery脚本和Kendo UI客户端脚本移动到<head>元素,并确保在jQuery之后加载Kendo UI脚本。

_Layout.cshtml文件

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - KendoUiTest</title> <environment include="Development">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="~/css/site.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/2018.2.260/styles/kendo.common-nova.min.css" />
<link rel="stylesheet" href="~/lib/kendo-ui/2018.2.260/styles/kendo.nova.min.css" />
</environment>
<environment exclude="Development">
<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
<link rel="stylesheet" href="~/css/site.min.css" asp-append-version="true" />
<link rel="stylesheet"
href="~/lib/kendo-ui/2018.2.260/styles/kendo.common-nova.min.css"
asp-fallback-href="~/lib/kendo-ui/2018.2.260/styles/kendo.common-nova.min.css"
asp-fallback-test-class="k-common-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="" /> <link rel="stylesheet"
href="~/lib/kendo-ui/2018.2.260/styles/kendo.nova.min.css"
asp-fallback-href="~/lib/kendo-ui/2018.2.260/styles/kendo.nova.min.css"
asp-fallback-test-class="k-theme-test-class"
asp-fallback-test-property="opacity" asp-fallback-test-value="" />
</environment>
<environment include="Development">
<script src="~/lib/jquery/dist/jquery.js"></script> @* Place Kendo UI scripts after jQuery *@
<script src="~/lib/kendo-ui/2018.2.260/js/kendo.all.min.js"></script>
<script src="~/lib/kendo-ui/2018.2.260/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="~/lib/kendo-ui/2018.2.260/js/kendo.all.min.js"
asp-fallback-src="~/lib/kendo-ui/2018.2.260/js/kendo.all.min.js"
asp-fallback-test="window.kendo">
</script>
<script src="~/lib/kendo-ui/2018.2.260/js/kendo.aspnetmvc.min.js"
asp-fallback-src="~/lib/kendo-ui/2018.2.260/js/kendo.aspnetmvc.min.js"
asp-fallback-test="kendo.data.transports['aspnetmvc-ajax']">
</script>
</environment>
</head>
<body> @RenderBody() @RenderSection("Scripts", required: false)
</body>
</html>

通过将以下示例中的代码段添加到〜/ Views / Home / Index.cshtml,演示使用Kendo UI DatePicker组件。

Index.cshtml文件(替换掉默认的代码,否则可能导致样式或js不起作用)

@{
ViewData["Title"] = "Home Page";
}
<h2>Kendo UI DatePicker</h2> @(Html.Kendo().DatePicker()
.Name("datepicker")
)

运行网站,查看效果

测试完成。

关于:Copy Kendo UI Client Resources through NPM and Webpack(通过NPM和Webpack复制Kendo UI客户端资源)

请移步原网站查看:https://docs.telerik.com/aspnet-core/getting-started/getting-started

本文演示如何配置ASP.NET Core项目以在Visual Studio(VS)2017中使用Telerik UI for ASP.NET Core。的更多相关文章

  1. Visual Studio for Mac中的ASP.NET Core

    所以你们都听到了#Build 2017的消息,Mac上的Visual Studio已经被完全发布,是一般的.为了庆祝这个版本,我将在我的Mac上写几篇关于构建一些不同的.net应用的帖子. 正如你已经 ...

  2. 【Asp.Net Core】一、Visual Studio 2015 和 .NET Core 安装

    安装 Visual Studio 和 .NET Core 1.安装 Visual Studio Community 2015,选择 Community 下载并执行默认安装.Visual Studio ...

  3. 006.Adding a controller to a ASP.NET Core MVC app with Visual Studio -- 【在asp.net core mvc 中添加一个控制器】

    Adding a controller to a ASP.NET Core MVC app with Visual Studio 在asp.net core mvc 中添加一个控制器 2017-2-2 ...

  4. Telerik UI for ASP.NET Core概要

    介绍:不介绍了,刚开始研究. 下载:CSDN或者51cto上都有最新的开发版 安装:默认的安装目录是C:\Program Files (x86)\Progress\Telerik UI for ASP ...

  5. Create A .NET Core Development Environment Using Visual Studio Code

    https://www.c-sharpcorner.com/article/create-a-net-core-development-environment-using-visual-studio- ...

  6. 界面开发工具集Telerik UI for ASP.NET AJAX发布R2 2019

    Telerik UI for ASP.NET AJAX拥有构建ASP.NET AJAX和SharePoint应用程序的80+控件,将为任何浏览器和设备构建Web Forms应用程序的时间缩短一半.Te ...

  7. 在Visual Studio 2010/2012中 找不到创建WebService的项目模板

    参考文章: http://blog.sina.com.cn/s/blog_6d545999010152wb.html 在 Visual Studio 2010 或者2012的新建 Web 应用程序或者 ...

  8. Telerik UI for ASP.NET AJAX控件汉化方法

    Telerik UI for ASP.NET AJAX控件功能十分强大,但原版是英文界面的,不方便一些用户使用. 和.NET的其他控件一样,可以通过资源文件来制作多语言版本. 下面看看安装完成后原始的 ...

  9. UI控件Telerik UI for ASP.NET MVC全新发布R2 2019 SP1

    Telerik UI for ASP.NET MVC拥有使用JavaScript和HTML5构建网站和移动应用所需的70+UI部件,来满足开发者的各种需求,提供无语伦比的开发性能和用户体验.它主要是针 ...

随机推荐

  1. Chief Technology Officer

    转自地址:http://www.swoole.com/News/76.html 1)错误都是自上而下 当事情出现混乱的时候,人们总是寻求寄托于Process的制定,很多的管理者,觉察到事情的失控,却不 ...

  2. ret2dir:Rethinking Kernel Isolation(翻译)

    前一段时间在网上找ret2dir的资料,一直没找到比较系统的介绍,于是干脆把这篇经典的论文翻译了,当然,第一次翻译(而且还这么长),很多词汇不知道到底该怎么翻译,而且最近事情也比较多, 翻译得挺烂的, ...

  3. 位运算和enum中的位运算

    1.位逻辑非运算 ~ 位逻辑非运算是单目的,只有一个运算对象.位逻辑非运算按位对运算对象的值进行非运算,即:如果某一位等于0,就将其转变为1:如果某一位等于1,就将其转变为0. 比如,对二进制的100 ...

  4. 详细的KVO总结,包括基本改变,使用案例,注意点.看我就够了!

    概述 KVO全称Key-Value-Observing,也叫键值监听,是一种观察者设计模式.提供了一种机制,当指定的对象的属性被修改后,对象就会收到一个通知.也就是说每次指定的被观察的对象的属性被修改 ...

  5. 【动态规划】Gym - 101147H - Commandos

    裸dp,看代码. #include<cstdio> #include<algorithm> #include<cstring> using namespace st ...

  6. 1.1(Mybatis学习笔记)初识Mybatis

    一.Mybatis下载与使用 下载地址:https://github.com/mybatis/mybatis-3/releases 下载后解压目录: 需要将lib下的jar包和mybatid-x-x- ...

  7. iOS数据库操作(使用FMDB)

    iOS中原生的SQLite API在使用上相当不友好,在使用时,非常不便.于是,就出现了一系列将SQLite API进行封装的库,例如FMDB.PlausibleDatabase.sqlitepers ...

  8. Java下List<Long>转List<String>或者List<Long>转List<Integer>

    说明:很遗憾,没有快速方法,只能遍历然后循环增加进去. 方法: for(String str : list) { int i = Integer.paseInt(str); intList.add(i ...

  9. 使用Spring Boot集成FastDFS

    原文:http://www.cnblogs.com/ityouknow/p/8298358.html#3893468 上篇文章介绍了如何使用Spring Boot上传文件,这篇文章我们介绍如何使用Sp ...

  10. SpringBoot下文件上传与下载的实现

    原文:http://blog.csdn.net/colton_null/article/details/76696674 SpringBoot后台如何实现文件上传下载? 最近做的一个项目涉及到文件上传 ...