Telerik UI for ASP。网络核心?下载30天免费试用

VS for Windows的第一步

本教程演示如何开始使用用于ASP的Telerik UI。净的核心。您将为ASP实现Telerik UI DatePicker。网络核心in your project by using its dedicated HtmlHelper or TagHelper. In this guide, you will download and implement the components by using NuGet and Visual Studio 2019 for Windows.

本指南中演示的方法既适用于新项目,也适用于想要实现Telerik UI控件的现有项目。

如果您想从模板开始一个新项目,您可以这样做在ASP中使用Telerik UI。网络核心Visual Studio extensions并创建一个新的预配置应用程序,其中包含所有必要的脚本、样式和编辑器模板。

在本教程中,您将:

  1. 检查先决条件

  2. 创建一个ASP。网络核心application

    如果您已经有一个想要使用的现有应用程序,请跳过此步骤。

  3. 添加Telerik NuGet Feed到Visual Studio

  4. 添加ASP的UI。网络核心NuGet package

  5. 添加对Kendo.Mvc.UI的引用

  6. 包括用于ASP的Telerik UI。NET核心客户端资源

  7. 添加一个Telerik UI组件

免费的Telerik UI入职课程怎么样?查看新员工培训视频文章和学习如何利用Telerik虚manbets登录拟教室

先决条件

对于。net Core 3.1版本或更高版本,需要Visual Studio 2019。

创建应用程序

  1. 打开Visual Studio 2019 for Windows并选择创建一个新项目

  2. 在搜索框中输入模型-视图-控制器,选择ASP。NET核心Web App(模型-视图-控制器)c#模板,然后选择下一个

    用户界面为ASP。网络核心创建一个新项目

  3. 输入MyTelerikProject作为项目名称,然后选择下一个

    使用此项目名称可确保本教程中的代码片段中的名称空间与您的项目匹配。

  4. 选择net从下拉框中选择目标框架,然后选择创建

添加Telerik NuGet Feed到Visual Studio

Telerik为ASP维护一个NuGet Feed和官方UI。NET核心版本和服务包。这些软件包适用于拥有有效试用或商用许可证的注册用户。

下一步是添加Telerik NuGet Feed到Visual Studio:

如果您已经在Visual Studio中配置了Telerik NuGet提要,请跳转到添加NuGet包

为试用License用户添加Telerik NuGet提要

如果您是一个试用用户,将Telerik NuGet提要添加到Visual Studio的最简单方法是为ASP安装UI。NET Core免费试用:

  1. 下载用户界面为ASP。网络核心free trial安装程序。如果没有,你需要创建一个免费的帐户。

  2. 运行安装程序。

  3. 选择选项设置Telerik NuGet包源自动添加Telerik NuGet feed

    用户界面为ASP。网络核心NuGet checkbox in Progress Trial Installer

激活你的UI为ASP。网络核心trial license, you must complete the installation procedure. Otherwise, theTelerik.UI.for.AspNet.CoreNuGet包将不会出现在NuGet包管理器中。

为商用License用户添加Telerik NuGet提要

如果您已经购买了商业许可证,将Telerik NuGet提要添加到Visual Studio的最简单的方法是使用进度控制面板:

  1. 下载进度控制面板概述您的页面Telerik帐户

    用户界面为ASP。网络核心Download Progress Control Panel

  2. 运行“进度控制面板exe”。

  3. 在“登录”界面,查看设置Telerik NuGet包的源代码选择。

    用户界面为ASP。网络核心Set Up Nuget on Progress Control Panel Login

  4. 如果您在登录时错过设置NuGet提要,请转到进度控制面板选项并滚动到NUGET设置.输入Telerik凭据并单击保存并关闭按钮。

    用户界面为ASP。网络核心Set Up Nuget on Progress Control Panel options

您需要一个商业许可证,其中包括用于ASP的UI。净的核心。否则,Telerik.UI.for.AspNet.CoreNuGet包将不会出现在NuGet包管理器中。如果您没有所需的许可证,请按照试用许可部分

添加NuGet包

  1. 打开NuGet包管理器。

    用户界面为ASP。网络核心Locating and opening the NuGet package manager menu

  2. 包的来源下拉菜单,选择Telerik NuGet源代码。

  3. 选择浏览键,然后输入Telerik.UI.for.AspNet.Core在搜索字段中。

    如果这是您第一次使用Telerik NuGet提要,您必须为Telerik帐户输入凭据。

  4. 选择项目的复选框,然后选择安装.结果,一条线类似< PackageReference包括= " Telerik.UI.for.AspNet。Core版本="2022.3.1109" /> . Core版本="2022.3.1109添加到您的.csproj文件。

    用户界面为ASP。网络核心Selecting and installing the NuGet package

添加kendo . mv . ui的引用

  1. 在服务容器中注册Kendo UI服务。万博体育手机版网址

    • 对于使用。net 5或更早版本的应用程序,请打开Startup.cs文件并注册Kendo UI服务万博体育手机版网址Configure万博体育手机版网址Services方法。

      public void Configure万博体育手机版网址Services(IServiceCollection services){//添加Kendo UI服务到服务容器万博体育手机版网址services.AddKendo ();}
    • 对于使用。net 6和最小托管模型,打开Program.cs文件和注册Kendo UI服务。

      var构建器= WebApplication.CreateBuilder(args);//添加Kendo UI服务到服万博体育手机版网址务容器。builder.万博体育手机版网址Services.AddKendo ();
  2. 导入Kendo.Mvc.UI名称空间在~ / / _ViewImports.cshtml观点通过@using Kendo.Mvc.UI.如果您打算使用Telerik UI ASP。NET核心标签助手,添加它们@addTagHelper *,剑道。Mvc

    @using MyTelerikProject。模型@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers @addTagHelper *,剑道。Mvc @using Kendo.Mvc.UI

包括用于ASP的Telerik UI。NET核心客户端资源

为ASP实现Telerik UI。网络核心in an application, you must provide not only the NuGet package with the components, but also the client-side resources like scripts and CSS files.

  • CDN链接和/或包版本必须指向ASP的相同UI。项目引用的NET Core版本。
  • 剑道UI脚本必须放在jQuery脚本。

在使用Telerik UI组件之前,必须包含主题、jQuery脚本和Kendo UI脚本:

  1. ~ \ Views \ \ _Layout.cshtml共享然后把你选择的主题添加到< >头文件的。因为微软项目使用Bootstrap,你可以使用剑道UI SASS Bootstrap主题来匹配它:

    < >头…  @*添加剑道引导主题:*@ …> < /头
  2. 微软ASP。网络核心网络Application template comes with a jQuery script reference at the end of _Layout.cshtml file. Find thejquery.min.js的脚本行<身体>并将其删除。

  3. 添加jQuery托管在Telerik CDN上的脚本:

    < >头…   @*从Telerik CDN中添加jQuery脚本:*@ …> < /头
  4. 添加剑道UI脚本。ASP UI所需的剑道UI脚本文件。NET Core必须加载在< >头标记在jQuery脚本:

    < >头…    @*添加Kendo UI脚本:*@   
  • kendo.all.min.js而且kendo.aspnetmvc.min.js脚本必须在jquery.min.js脚本。
  • jQuery只能加载一次。确保在其他地方没有重复的引用_Layout

如果希望包括来自本地源而不是cdn的客户端资源,请参阅本地客户端资源篇文章。

添加一个Telerik UI组件

通过添加以下示例中的片段来利用Telerik UI DatePicker组件~ / / Home / Index.cshtml观点

网络核心

@(Html.Kendo().DatePicker() .Name("my-picker") )

NET Core

. NET

现在可以运行web应用程序了。

恭喜你!方法创建了一个页面Telerik UI DatePicker

用户界面为ASP。网络核心Sample page

在ASP中JSON字符串的默认大小写。NET Core是camelCase。数据绑定的Telerik UI组件依赖于来自服务器的PascalCase格式的响应。如果JSON序列化没有正确配置,UI组件将显示错误的数据。要了解如何配置应用程序以返回pascal情况下的数据,请参阅JSON序列化篇文章。

下一个步骤

另请参阅

在本文中
Baidu
map