DevExtreme ASP.NET MVC入门指南 - 将数据绑定到控件(CLR对象)
所有使用数据集合操作的DevExtreme ASP.NET MVC控件都有DataSource()方法，与其他控制方法不同，DataSource()在DevExtreme JavaScript API中没有直接对应物，尽管它的用途类似于DevExtreme数据层中的 Store。您可以使用 DataSource() 方法来配置来自不同来源的数据访问：
- CLR 对象
- 控制器
- JSON 格式的只读数据
- 数据
- OLAP 多维数据集
数据绑定控件（PivotGrid 除外）也具有 DataSourceOptions() 方法，它公开了一个构建器，用于配置初始排序、过滤、分组和其他数据整形操作，构建器的方法具有本节中描述的 JavaScript API 对应项。
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 NamespaceController
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 NamespaceDataSource 方法重载接受 string[] 键参数，因此您的代码如下所示：
C#
.DataSource(Model.YourCollection, "KeyFieldName")VB
.DataSource(Model.YourCollection, "KeyFieldName")DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序。从Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和响应式UI小部件集合，可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
DevExpress技术交流群6：600715373 欢迎一起进群讨论