学习时使用的是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. HDU 2280 Tetris Comes Back

    状态压缩,$dp$,预处理. 设$dp[i][j]$为前$i-1$行填满,第$i$行为状态$j$的最小需要$1$种类的数量.预处理好每种状态能推出哪些状态,并且记录下所需花费就可以了. #pragma ...

  2. 洛谷——P1358 扑克牌

    题目描述 组合数学是数学的重要组成部分,是一门研究离散对象的科学,它主要研究满足一定条件的组态(也称组合模型)的存在.计数以及构造等方面的问题.组合数学的主要内容有组合计数.组合设计.组合矩阵.组合优 ...

  3. SPOJ NETADMIN - Smart Network Administrator(二分)(网络流)

    NETADMIN - Smart Network Administrator #max-flow The citizens of a small village are tired of being ...

  4. POJ2349 Arctic Network(Prim)

    Arctic Network Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 16968   Accepted: 5412 D ...

  5. 13、Django实战第13天:分页列表功能

    我们看课程 机构列表页是需要分页的 为了完成分页功能,我们需要用到Django的一个开源开发库django-pure-pagination workon mxonline pip install dj ...

  6. 【树状数组】bzoj2789 [Poi2012]Letters

    处理数组A,A[i]表示字符串a的第i个字符排序后应去的位置,队列可. 对于多次出现的字符,其在a中的顺序和在b中的顺序应该是一一对应的. #include<cstdio> #includ ...

  7. Metesploit使用随笔

    平时在工作中真正用到metesploit机会不多,偶尔也会用来做漏洞验证,但是每次使用的时候都需要花点时间回忆一下具体是怎么用的,因此索性记下来方便自己,以使用Nessus扫描YS的某个硬件设备发现的 ...

  8. Word调整表格大小

    在Word文档中创建表格后,用户往往需要根据输入的内容调整表格的行高和列宽,有时也需要对整个表格的大小进行调整. 在选择的表格上右击,选择快捷菜单中的“自动调整”—“根据内容调整表格”命令,Word将 ...

  9. Delphi 使窗体Showmodal后可以操作其他窗体

    对话框ShowModal之后不能操作其它窗口,实际上是因为Windows Disable了其它窗口.所以当你需要在模态对话框中访问其它已经可见的窗口时,需要用EnableWindow API来激活对应 ...

  10. 关于JS中原型链中的prototype与_proto_的个人理解与详细总结

    一直认为原型链太过复杂,尤其看过某图后被绕晕了一整子,今天清理硬盘空间(渣电脑),偶然又看到这图,勾起了点回忆,于是索性复习一下原型链相关的内容,表达能力欠缺逻辑混乱别见怪(为了防止新人__(此处指我 ...