学习时使用的是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. 利用navigator对象判断设备类型

    function getTerminalType() { //获取navigator对象 var o = navigator.userAgent, t = ""; if (/\bi ...

  2. CF984 C. Finite or not?【数论/GCD】

    [链接]:CF [题意]:n组样例,对于每组样例,给你三个数p q b,问你p/q在b进制下是不是一个有限小数,是的话输出Finite,否则输出Infinite. [分析]:b的过程是对q约分,那么只 ...

  3. 【我要学python】愣头青之初安装就打了一记耳光

    pycharm安装好后创建项目出现interpreter field is empty,导致pycharm无法使用. 这是因为python没有安装好,重新自定义安装一次即可 下载地址:https:// ...

  4. hihocoder Popular Products(STL)

    Popular Products 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 Given N lists of customer purchase, your tas ...

  5. IO 概括

    # 一.概览 Java 的 I/O 大概可以分成以下几类: - 磁盘操作:File- 字节操作:InputStream 和 OutputStream- 字符操作:Reader 和 Writer- 对象 ...

  6. []End of 2017OI

    今年大概到此为止了,现在这个算是做一个简短的阶段性总结吧 今年打的第一场大概是省赛,当时整个人处于(迷茫,不知道选物理还是选信息+备战中考+持续摸鱼OI颓废)的状态,KMP都不会导致签到题都没有分,然 ...

  7. SpingMVC实现操作的第一方式

    (一) 使用SpringMVC框架的步骤 (1):在web.xml中配置前端控制器 (2):在Spring-servlet.xml中配置 配置处理器映射器HandlerMapping(处理器Handl ...

  8. <摘录>字节对齐(强制对齐以及自然对齐)

    struct {}node; 32为的x86,window下VC下sizeof(node)的值为1,而linux的gcc下值为0: 一.WINDOWS下(VC--其实GCC和其原理基本一样,象这种问题 ...

  9. sql-server-on-linux-how-i-think-they-did-it : Anthony Nocentino's Blog

    http://www.sqlservercentral.com/blogs/anthony-nocentinos-blog/2016/11/21/sql-server-on-linux-how-i-t ...

  10. Using Dtrace OEL 6.X and Oracle® Solaris 11.3 DTrace (Dynamic Tracing) Guide

    http://www.hhutzler.de/blog/using-dtrace/ https://docs.oracle.com/cd/E53394_01/html/E53395/gkyaz.htm ...