所有使用數(shù)據(jù)集合操作的DevExtreme ASP.NET MVC控件都有DataSource()方法，與其他控制方法不同，DataSource()在DevExtreme JavaScript API中沒有直接對(duì)應(yīng)物，盡管它的用途類似于DevExtreme數(shù)據(jù)層中的 Store。您可以使用 DataSource() 方法來配置來自不同來源的數(shù)據(jù)訪問：

• CLR 對(duì)象
• 控制器
• JSON 格式的只讀數(shù)據(jù)
• 數(shù)據(jù)
• OLAP 多維數(shù)據(jù)集

數(shù)據(jù)綁定控件（PivotGrid 除外）也具有 DataSourceOptions() 方法，它公開了一個(gè)構(gòu)建器，用于配置初始排序、過濾、分組和其他數(shù)據(jù)整形操作，構(gòu)建器的方法具有本節(jié)中描述的 JavaScript API 對(duì)應(yīng)項(xiàng)。

DevExtreme v21.2正式版下載

CLR 對(duì)象

您可以將DevExtreme ASP.NET MVC 控件綁定到 CLR 對(duì)象的集合：Array、List 或 IEnumerable。

這些集合…

• 可以來自控制器（通過 Model? 或 ViewData?）；
• 可以嵌入到 Razor 文件中（直接在 HTML 幫助器聲明中或在 @functions 塊中）。

集合作為 ArrayStore 傳遞給客戶端，請(qǐng)注意，集合數(shù)據(jù)應(yīng)該是 JSON 可序列化的。

示例：將控件綁定到數(shù)組

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[] 鍵參數(shù)，因此您的代碼如下所示：

C#

.DataSource(Model.YourCollection, "KeyFieldName")

VB

.DataSource(Model.YourCollection, "KeyFieldName")

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動(dòng)應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論