当前位置: 首页 > 工具软件 > DevExtreme > 使用案例 >

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

谷梁镜
2023-12-01

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

 类似资料: