彩票走势图

B/S端界面控件DevExtreme ASP.NET MVC入门级教程:将数据绑定到控件 - CLR对象

翻译|使用教程|编辑:龚雪|2022-05-11 10:10:48.367|阅读 123 次

概述:本系列文章将为大家介绍如何实现和应用模板,本节主要介绍如何将数据绑定到控件,欢迎下载产品体验!

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

所有使用数据集合操作的DevExtreme ASP.NET MVC控件都有DataSource()方法,与其他控制方法不同,DataSource()在DevExtreme JavaScript API中没有直接对应物,尽管它的用途类似于DevExtreme数据层中的 Store。您可以使用 DataSource() 方法来配置来自不同来源的数据访问:

  • CLR 对象
  • 控制器
  • JSON 格式的只读数据
  • 数据
  • OLAP 多维数据集

数据绑定控件(PivotGrid 除外)也具有 DataSourceOptions() 方法,它公开了一个构建器,用于配置初始排序、过滤、分组和其他数据整形操作,构建器的方法具有本节中描述的 JavaScript API 对应项。

DevExtreme v21.2正式版下载

CLR 对象

您可以将DevExtreme ASP.NET MVC 控件绑定到 CLR 对象的集合:Array、List 或 IEnumerable。

这些集合…

  • 可以来自控制器(通过 Model 或 ViewData);
  • 可以嵌入到 Razor 文件中(直接在 HTML 帮助器声明中或在 @functions 块中)。

集合作为 ArrayStore 传递给客户端,请注意,集合数据应该是 JSON 可序列化的。

示例:将控件绑定到数组

Razor C#


@(Html.DevExtreme().Chart()
.DataSource(new[] {
new { Day = "Monday", Oranges = 3 },
new { Day = "Tuesday", Oranges = 2 },
new { Day = "Wednesday", Oranges = 3 },
new { Day = "Thursday", Oranges = 4 },
new { Day = "Friday", Oranges = 6 },
new { Day = "Saturday", Oranges = 11 },
new { Day = "Sunday", Oranges = 4 }
})
)


Razor VB


@(Html.DevExtreme().Chart() _
.DataSource({
New With {.Day = "Monday", .Oranges = 3},
New With {.Day = "Tuesday", .Oranges = 2},
New With {.Day = "Wednesday", .Oranges = 3},
New With {.Day = "Thursday", .Oranges = 4},
New With {.Day = "Friday", .Oranges = 6},
New With {.Day = "Saturday", .Oranges = 11},
New With {.Day = "Sunday", .Oranges = 4}
})
)


示例:将控件绑定到模型

本示例代码展示了如何将 MultiView 控件绑定到 Model。

View

Razor C#


@model List<DevExtreme.MVC.Demos.Models.Store>

@(Html.DevExtreme().MultiView()
.DataSource(Model)
)


Razor VB


@ModelType List(Of DevExtreme.MVC.Demos.Models.Store)

@(Html.DevExtreme().MultiView() _
.DataSource(Model)
)


Model

C#


namespace DevExtreme.MVC.Demos.Models.SampleData {
public partial class SampleData {
public static Store[] Stores = new[] {
new Store {
ID = 1,
CompanyName = "SuprMart",
Address = "702 SW 8th Street",
City = "Bentonville",
},
new Store {
ID = 2,
CompanyName = "El'Depot",
Address = "2455 Paces Ferry Road NW",
City = "Atlanta",
},
new Store {
ID = 3,
CompanyName = "K&S Music",
Address = "1000 Nicllet Mall",
City = "Minneapolis",
}
};
}
}


VB


Namespace DevExtreme.MVC.Demos.Models.SampleData
Partial Public Class SampleData
Public Shared Stores As Store() = {
New Store With {
.ID = 1,
.CompanyName = "SuprMart",
.Address = "702 SW 8th Street",
.City = "Bentonville"
},
New Store With {
.ID = 2,
.CompanyName = "El'Depot",
.Address = "2455 Paces Ferry Road NW",
.City = "Atlanta"
},
New Store With {
.ID = 3,
.CompanyName = "K&S Music",
.Address = "1000 Nicllet Mall",
.City = "Minneapolis"
}
}
End Class
End Namespace


Controller

C#


using DevExtreme.MVC.Demos.Models.SampleData;

namespace DevExtreme.MVC.Demos.Controllers {
public class MultiViewController : Controller {
public ActionResult Overview() {
return View(SampleData.Stores);
}
}
}


VB


Imports DevExtreme.MVC.Demos.Models.SampleData

Namespace DevExtreme.MVC.Demos.Controllers
Public Class MultiViewController
Inherits Controller
Public Function Overview() As ActionResult
Return View(SampleData.Stores)
End Function
End Class
End Namespace


DataSource 方法重载接受 string[] 键参数,因此您的代码如下所示:

C#


.DataSource(Model.YourCollection, "KeyFieldName")


VB


.DataSource(Model.YourCollection, "KeyFieldName")


DevExtreme | 下载试用

DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。


DevExpress技术交流群6:600715373      欢迎一起进群讨论

DevExpress企业定制服务

标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn

文章转载自:慧都网

为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP