ASP。NET Core时间轴概述

时间线是一部分Telerik UI for ASP。网络核心，一个具有 110+ 组件的专业级UI库，用于构建现代和功能丰富的 应用程序。想要试用它，可以注册一个30天的免费试用期。

下载免费试用

Telerik UI Timeline TagHelper和HtmlHelper。网络核心are server-side wrappers for the Kendo UI Timeline widget.

Timeline小部件按时间顺序显示每年的事件及其数据集合。

您可以滚动事件并折叠/展开它们。事件顺序可以是垂直的，也可以是水平的，您可以自定义它们的模板，以及响应事件和使用API控制小部件行为。您还可以控制事件呈现日期的格式。如果您提供了一个操作列表，它们将作为描述和图像之后的链接呈现。

• Timeline HtmlHelper的演示页面

• Timeline TagHelper的演示页面

初始化时间轴

下面的示例演示如何定义Timeline。请注意控制器和模型代码的选项卡，它们显示如何向小部件提供数据。

@ (Html.Kendo () .Timeline < MyApp.Models.TimelineEventModel > () . name(“时间轴”).DataDateField .DataDescriptionField(“EventDate”)(“描述”).DataSubTitleField(副标题).DataTitleField .DataImagesField(“标题”)(“图像”).DataActionsField .Orientation(“行动”)(“垂直”)/ /定义小部件的布局.AlternatingMode() / /呈现事件两边的轴在垂直模式.CollapsibleEvents() / /开始所有事件倒在垂直模式.DataSource (dt = > dt。读取("GetTimelineData"， "Timeline"))

< keno - Timeline name="Timeline" orientation="vertical" datadatefield="EventDate" datatitlefield="Title" datasubtitlefield="Subtitle" datadescriptionfield="Description" dataactionsfield="Actions" dataimagesfield="Images" alternatingmode ="true"可折叠事件="true">                

public部分类Timeline: BaseController {public JsonResult GetTimelineData() {List events = new List();事件。添加(新的TimelineEventModel(){标题= "巴塞罗那\u0026特内里费"，副标题= " 2015年5月15日"，描述= "第一次事件描述。"，事件日期=新系统。DateTime(2015 4 15)、图像=新列表< TimelineEventImageModel >(){新TimelineEventImageModel () {src = " https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Barcelona-and-Tenerife/Arc-de-Triomf,巴塞罗那,-Spain_Liliya-Karakoleva.JPG ?宽度= 500,身高= 500 "}},行动=新列表< TimelineEventActionModel >(){新TimelineEventActionModel(){文本=“更多关于巴塞罗那的信息”,url = " https://en.wikipedia.org/wiki/Barcelona "}}});事件。添加(新的TimelineEventModel(){标题=“美国东海岸巡回赛”，副标题=“2018年2月27日”，描述=“第二次赛事描述”，赛事日期=新系统。DateTime(2018, 1,27)， Images = new List() {new TimelineEventImageModel() {src =" https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/United-States/Boston-Old-South-Church_Ivo-Igov.JPG?width=500&height=500"}}， Actions = new List() {new TimelineEventActionModel() {text ="更多关于纽约市的信息"，url="https://en.wikipedia.org/wiki/New_York_City"}}});事件。添加(新的TimelineEventModel() {Title = "马耳他，一个Кnights的国家"，Subtitle = "我今年的第二次旅行"，Description = "第三次事件描述。"，EventDate =新系统。DateTime(2015, 5,25)， Images = new List() {new TimelineEventImageModel() {src =" https://demos.telerik.com/aspnet-mvc/tripxpert/Images/Gallery/Malta/Bibliotheca-National-Library_Marie-Lan-Nguyen.JPG?width=500&height=500"}}， Actions = new List() {new TimelineEventActionModel() {text =" More info about Malta"， url="https://en.wikipedia.org/wiki/Malta"}}}); return Json(events); } }

公共类TimelineEventModel{公共字符串Title{获取;设置;} public string字幕{get;设置;} public string描述{get;设置;} public DateTime EventDate {get;设置;} public List Images {get;设置; } public List Actions { get; set; } } public class TimelineEventImageModel { public string src { get; set; } // this field name must be "src" } public class TimelineEventActionModel { public string text { get; set; } // this field name must be "text" public string url { get; set; } // this field name must be "url" }

功能和特性

• 取向
• 行动
• 图片
• 模板

事件

有关时间轴事件的完整示例，请参阅在ASP中使用时间轴的事件的演示。网络核心．

方法提供事件处理程序JavaScript函数名，或由在模板中指定内联函数．

按处理程序名称处理事件

下面的示例演示如何通过使用处理程序名称订阅事件。

@(Html.Kendo().Timeline() .Name("Timeline") .Events(ev => {ev. change ("onChange");ev.Navigate(“onNavigate”);ev.DataBound(“onDataBound”);ev.ActionClick(“onActionClick”);}) .DataDateField(“EventDate”).DataDescriptionField(“描述”).DataSubTitleField .DataTitleField(“副标题”)(“标题”).DataImagesField .DataActionsField(“图像”)(“行动”).DataSource (dt = > dt。Read("GetTimelineData"， "Timeline")) //参见本文第一个示例中的示例数据源)<脚本>函数onChange(e) {console.log(" onChange: " + e.d aitem . title);}函数onNavigate(e) {console.log(" onNavigate: " + e.action);}函数onActionClick(e) {console.log(" onActionClick: " + e.element.text());}函数onDataBound(e) {console.log(" onDataBound: " + e.sender. datasource .view().length);} > < /脚本