ASP。网络核心ScrollView概述
滚动视图的一部分Telerik UI为ASP。网络核心专业级UI库与 110 + 组件来构建现代和功能丰富的 应用程序。尝试注册一个免费试用。
Telerik UI ScrollView TagHelper HtmlHelper ASP。网络核心are server-side wrappers for the Kendo UI ScrollView widget.
滚动视图显示一个水平的内容或图像集合视图内置导航。手势,它可以通过拖动滚动箭头点击或页面点击或自来水。滚动视图的关键特性包括数据源绑定,可定制的模板,内置的寻呼机,可调整的反弹效应和滚动速度。
初始化滚动视图
从HTML
- 使用它的
项目()方法。 - 为每个页面添加HTML元素作为滚动视图的内容项目的一部分。
<时尚> h1 {margin-top: 30%;text-align:中心;}< /风格> @ (Html.Kendo () .ScrollView () . name(“滚动视图”).ContentHeight (“100%”) . items (x = > {x.Add () .Content (“< h1 > < / h1 >”);x.Add () .Content (“< h1 >两个< / h1 >”);x.Add () .Content (“< h1 > 3 < / h1 >”);}).HtmlAttributes(新{风格= "高度:748 px;宽度:1022 px;max-width: 100%;”}) )< kendo-scrollview name = "滚动视图" content-height =“100%”风格= "高度:600 px;宽度:890 px;max-width: 100%;”> One
Two
Three
从数据源
- 创建一个剑道为jQuery UI模板。
- 使用
TemplateId ()方法通过它并提供数据源。
确保提供的模板页大小数据的来源。如果serverPaging启用,滚动视图将请求的数据提前,所以可用之前是必需的,从而提高用户体验。滚动视图使用虚拟化时绑定到一个数据源,它只有三页——目前,上,下。
@ (Html.Kendo () .ScrollView () . name(“滚动视图”).ContentHeight .TemplateId (“100%”) (“employee-template”) .DataSource (d = > d.Custom () .Type (odata) .Transport (t = > t。读(r = > r.Url (" https://demos.telerik.com/kendo-ui/service/Northwind.svc/Employees "))) .ServerPaging(真正的).PageSize (1) .HtmlAttributes(新{风格= "高度:600 px;宽度:890 px;max-width: 100%;”}))< kendo-scrollview name = "滚动视图" content-height =“100%”模板id =“employee-template”风格= "高度:600 px;宽度:890 px;max-width: 100%;”> 下面的例子演示了如何获取数据从控制器动作。
@ (Html.Kendo () .ScrollView () . name(“滚动视图”).EnablePager (false) .ContentHeight .TemplateId (“100%”) (“scrollview-template”) .DataSource(数据源= >数据源.Custom () .Type (“aspnetmvc-ajax”) .Transport(运输= >运输.Read(= >读过。操作(“GetScrollViewData”、“家”))). schema (s = > s.Data .Total(“数据”)(“总”)).ServerPaging(真正的).PageSize (1) .HtmlAttributes(新{风格= "高度:200 px;宽度:300 px”})) <脚本id = " scrollview-template " type = " text / x-kendo-template " > < p风格= "边境:2 px固体蓝色;颜色:红色;" > # =数据。脚本SomeField # < / p > < / >< kendo-scrollview name = "滚动视图" enable-pager =“false”content-height =“100%”模板id = " scrollview-template " > <数据源定制类型=“aspnetmvc-ajax server-paging = " true "页面大小= " 1 " > <交通> <读取url = " .action (“GetScrollViewData”、“家”)" / > < /运输> <模式数据=总=“总”>“数据”< /模式> < /数据源> < / kendo-scrollview > <脚本id = " scrollview-template " type = " text / x-kendo-template " > < p风格= "边境:2 px固体蓝色;颜色:红色;" > # =数据。脚本SomeField # < / p > < / >公共类HomeController:控制器{公共ActionResult指数(){返回视图();}(HttpPost)公共ActionResult GetScrollViewData ([DataSourceRequest] DataSourceRequest请求){IEnumerable < MyModel > =可列举的数据。范围(1、5).Select (x = >新MyModel {SomeField =“物品”+ x + +请求“页”。页面});返回Json (data.ToDataSourceResult(请求));}}公开课MyModel{公共字符串SomeField{得到;设置;}}如果你设置页大小选择一个更大的值,您将需要使用一个循环的模板。
<脚本id = " scrollview-template " type = " text / x-kendo-template " > #为(var = 0;我< data.length;我+ +){# < p风格= "边境:2 px固体蓝色;颜色:红色;“> # =数据[我]。SomeField # < / p > #} # > < /脚本功能和特性
事件
对基本ScrollView事件的一个完整的示例,请参考演示使用滚动视图的事件。
引用现有的实例
参考现有Telerik UI滚动视图实例,使用jQuery.data ()配置选项。一旦你有了一个小部件,使用滚动视图客户端API控制其行为。
/ /以下后你Telerik UI ScrollView ASP。网络核心宣言。<脚本> $(函数()的(){/ /滚动视图用于客户端实例。var scrollview = $ (" # scrollview ") . data (“kendoScrollView”);});> < /脚本