Telerik UI for ASP.NET Core 入门指南：使用Visual Studio扩展创建项目-优快云博客

Telerik UI for ASP.NET Core 入门指南：使用Visual Studio扩展创建项目

【免费下载链接】kendo-ui-core An HTML5, jQuery-based widget library for building modern web apps. 项目地址: https://gitcode.com/gh_mirrors/ke/kendo-ui-core

前言

Telerik UI for ASP.NET Core是一套功能强大的UI组件库，它基于Kendo UI框架构建，为ASP.NET Core开发者提供了丰富的界面控件。本文将详细介绍如何通过Visual Studio扩展快速创建并设置一个包含Telerik UI组件的ASP.NET Core项目。

准备工作

在开始之前，请确保您的开发环境满足以下要求：

已安装.NET Core SDK（推荐使用最新稳定版）
已安装Visual Studio 2017或更高版本
Windows 10或更高版本操作系统
有效的Telerik账户（可免费注册）

安装Visual Studio扩展

首先关闭所有正在运行的Visual Studio实例
下载Telerik UI for ASP.NET Core的Visual Studio扩展安装包
双击TelerikUI.ASP.NET.Core.VSPackage.vsix文件完成安装

安装完成后，您可以在Visual Studio中使用"创建新Telerik项目"向导快速搭建项目。

创建新项目

项目初始化

在Visual Studio中选择"创建新项目"
在项目类型筛选器中选择"Telerik"分类
选择"Telerik ASP.NET Core MVC应用程序"模板
为项目命名（如TelerikAspNetCoreApp）并点击"创建"

项目设置

在项目创建向导中，您需要进行以下设置：

选择目标框架版本（推荐使用最新的ASP.NET Core版本）
选择UI组件渲染方式：
- HTML Helpers：传统的HTML辅助方法
- Tag Helpers：更现代的标签辅助方法（推荐）
选择Telerik UI版本（建议选择最新稳定版）
选择项目模板（如"Grid and Menu"）
选择默认主题（如Bootstrap或Material）

项目结构解析

项目创建完成后，您会看到以下主要结构：

Models文件夹：包含数据模型定义
Controllers文件夹：包含控制器逻辑
Views文件夹：包含视图文件
wwwroot文件夹：包含静态资源

核心组件：Grid数据网格

项目模板已自动设置了一个功能完整的Grid组件，让我们深入了解其实现原理：

数据模型

在Models/OrderViewModel.cs中定义了网格将显示的数据结构：

public class OrderViewModel
{
    public int OrderID { get; set; }
    public decimal? Freight { get; set; }
    public DateTime? OrderDate { get; set; }
    public string ShipName { get; set; }
    public string ShipCity { get; set; }
}

控制器逻辑

Controllers/GridController.cs中包含处理网格数据请求的逻辑：

public ActionResult Orders_Read([DataSourceRequest] DataSourceRequest request)
{
    var result = Enumerable.Range(0, 50).Select(i => new OrderViewModel
    {
        OrderID = i,
        Freight = i * 10,
        OrderDate = new DateTime(2016, 9, 15).AddDays(i % 7),
        ShipName = "ShipName " + i,
        ShipCity = "ShipCity " + i
    });

    return Json(result.ToDataSourceResult(request));
}

视图实现

在Views/Home/Index.cshtml中，网格通过以下方式呈现：

HTML Helper方式

@(Html.Kendo().Grid<TelerikAspNetCoreApp.Models.OrderViewModel>()
    .Name("grid")
    .Columns(columns => {
        columns.Bound(p => p.OrderID).Filterable(false);
        columns.Bound(p => p.Freight);
        columns.Bound(p => p.OrderDate).Format("{0:MM/dd/yyyy}");
        columns.Bound(p => p.ShipName);
        columns.Bound(p => p.ShipCity);
    })
    .Pageable()
    .Sortable()
    .Scrollable()
    .Filterable()
    .HtmlAttributes(new { style = "height:550px;" })
    .DataSource(dataSource => dataSource
        .Ajax()
        .PageSize(20)
        .Read(read => read.Action("Orders_Read", "Grid"))
)

Tag Helper方式

<kendo-grid name="grid" height="550">
    <columns>
        <column field="OrderID" title="Order ID">
            <filterable enabled="false"></filterable>
        </column>
        <column field="Freight" title="Freight" />
        <column field="OrderDate" title="Order Date" format="{0:MM/dd/yyyy}" />
        <column field="ShipName" title="Ship Name" />
        <column field="ShipCity" title="Ship City" />
    </columns>
    <scrollable enabled="true" />
    <sortable enabled="true" />
    <pageable enabled="true" />
    <filterable enabled="true" />
    <datasource type="DataSourceTagHelperType.Ajax" page-size="20">
        <transport>
            <read url="@Url.Action("Orders_Read", "Grid")" />
        </transport>
    </datasource>
</kendo-grid>

添加新组件：DatePicker日期选择器

要在项目中添加新的Telerik UI组件非常简单，以DatePicker为例：

HTML Helper实现

<div class="text-center">
    <h2>Telerik UI DatePicker for ASP.NET Core</h2>
    @(Html.Kendo().DatePicker()
        .Name("my-picker")
    )
</div>

Tag Helper实现

<div class="text-center">
    <h2>Telerik UI DatePicker for ASP.NET Core</h2>
    <kendo-datepicker name="my-picker"/>
</div>

主题定制

Telerik UI for ASP.NET Core提供了多种主题选择，您可以通过修改_Layout.cshtml中的CSS引用轻松切换主题：

Bootstrap主题

<link href="https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/bootstrap/bootstrap-main.css" rel="stylesheet" />

Default主题

<link href="https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/default/default-main.css" rel="stylesheet" />

Material主题

<link href="https://kendo.cdn.telerik.com/themes/{{ site.themesCdnVersion }}/material/material-main.css" rel="stylesheet" />

许可证设置

要使用Telerik UI组件，您需要添加许可证文件：

从Telerik账户获取许可证文件
将文件命名为telerik.licensing.json
放置在项目根目录下

进阶学习建议

探索Telerik UI提供的其他组件（如Chart、Scheduler等）
学习如何将Grid绑定到真实数据库
了解如何实现CRUD（增删改查）操作
研究组件的事件处理和自定义模板

常见问题解答

Q: 如何将Telerik UI添加到现有项目中？ A: 可以通过NuGet包管理器或CDN方式添加，具体步骤请参考官方文档。

Q: 主题切换后样式没有变化怎么办？ A: 请确保清除浏览器缓存，并检查CSS引用路径是否正确。

Q: 网格数据显示异常如何处理？ A: 检查控制器返回的数据格式是否正确，以及前端的数据绑定设置是否匹配。

通过本文的指导，您应该已经成功创建了一个包含Telerik UI组件的ASP.NET Core项目，并了解了基本的设置和使用方法。接下来，您可以继续探索Telerik UI提供的丰富功能，构建更加强大的Web应用程序。

【免费下载链接】kendo-ui-core An HTML5, jQuery-based widget library for building modern web apps. 项目地址: https://gitcode.com/gh_mirrors/ke/kendo-ui-core

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考