DevExtreme ASP.NET MVC入门指南 - 将数据绑定到控件(CLR对象)

所有使用数据集合操作的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线上公开课、中文教程资讯请上中文网获取