本文演示如何配置ASP.NET Core项目以在Visual Studio(VS)2017中使用Telerik UI for ASP.NET Core。
学习时使用的是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。的更多相关文章
- Visual Studio for Mac中的ASP.NET Core
所以你们都听到了#Build 2017的消息,Mac上的Visual Studio已经被完全发布,是一般的.为了庆祝这个版本,我将在我的Mac上写几篇关于构建一些不同的.net应用的帖子. 正如你已经 ...
- 【Asp.Net Core】一、Visual Studio 2015 和 .NET Core 安装
安装 Visual Studio 和 .NET Core 1.安装 Visual Studio Community 2015,选择 Community 下载并执行默认安装.Visual Studio ...
- 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 ...
- Telerik UI for ASP.NET Core概要
介绍:不介绍了,刚开始研究. 下载:CSDN或者51cto上都有最新的开发版 安装:默认的安装目录是C:\Program Files (x86)\Progress\Telerik UI for ASP ...
- 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- ...
- 界面开发工具集Telerik UI for ASP.NET AJAX发布R2 2019
Telerik UI for ASP.NET AJAX拥有构建ASP.NET AJAX和SharePoint应用程序的80+控件,将为任何浏览器和设备构建Web Forms应用程序的时间缩短一半.Te ...
- 在Visual Studio 2010/2012中 找不到创建WebService的项目模板
参考文章: http://blog.sina.com.cn/s/blog_6d545999010152wb.html 在 Visual Studio 2010 或者2012的新建 Web 应用程序或者 ...
- Telerik UI for ASP.NET AJAX控件汉化方法
Telerik UI for ASP.NET AJAX控件功能十分强大,但原版是英文界面的,不方便一些用户使用. 和.NET的其他控件一样,可以通过资源文件来制作多语言版本. 下面看看安装完成后原始的 ...
- UI控件Telerik UI for ASP.NET MVC全新发布R2 2019 SP1
Telerik UI for ASP.NET MVC拥有使用JavaScript和HTML5构建网站和移动应用所需的70+UI部件,来满足开发者的各种需求,提供无语伦比的开发性能和用户体验.它主要是针 ...
随机推荐
- MySQL 使用硬链接配合truncate 删除2.2T的表
1 创建tmp 表并 rename 表 mysql> rename table ep to ep_bak; Query OK, 0 rows affected (0.07 sec) mysql& ...
- strcmp()函数-比较字符串的大小、字符串排序
1.比较字符串的大小: 用法:strcmp(字符串1,字符串2),若字符串1>字符串2 则返回1,字符串1<字符串2 则返回 -1,相等返回0. 比较两个字符串的算法是:逐个比较两个串中对 ...
- HDU 多校1.12
- Linux命令之ip
ip [ OPTIONS ] OBJECT { COMMAND | help } 这一条命令几乎包含了所有使用方法,其中 对象OBJECT={ link | addr | addrlabel | ro ...
- oracle 替换其中部分内容
update TABLE_NAME set field =REPLACE(field ,substr(field ,0,1) ,'P') where field is not null ;
- 线程同步CriticalSection
孙鑫 第十五/十六课之四 线程同步CriticalSection 说明 在使用多线程时,一般很少有多个线程完全独立的工作.往往是多个线程同时操作一个全局变量来获取程序的运行结果.多个线程同时访问同一个 ...
- HashSet如何排序
方法一: 把HashSet保存在ArrayList里,再用Collections.sort()方法比較 private void doSort(){ final HashSet<Integer& ...
- 建立Spring项目的基础
1.新建web项目 2.在lib下添加这五个包 3.新建applicationContext.xml(一定在src目录下)
- jquery--动态篇
jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置css的display为none属性.但是通过css直接修改是静态的布局,如果在代码执行的时候,一般是通过js控制元素的st ...
- Shiro+SpringMVC 实现更安全的登录(加密匹配&登录失败超次数锁定帐号)
原文:http://blog.csdn.net/wlwlwlwl015/article/details/48518003 前言 初学shiro,shiro提供了一系列安全相关的解决方案,根据官方的介绍 ...