「B/S端开发」如何将DevExtreme添加到ASP.NET Core Angular应用 ASP.NETASP.NET Core AngularDevExtreme
本文介绍如何创建ASP.NET Core Angular应用程序并向其添加DevExtreme UI组件，您需要 Visual Studio 2017 v15.7 或更高版本以及 .NET Core 2.1 SDK 来执行此操作。
1. 打开Visual Studio 2017并使用ASP.NET Core Web应用程序模板创建一个新的ASP.NET Core Angular应用程序。
2. 打开 ClientApp/package.json 文件并将 devextreme 和 devextreme-angular 包添加到依赖项部分：
package.json
{
...
"dependencies": {
...
"devextreme": "21.1.5",
"devextreme-angular": "21.1.5"
}
}
保存更改，重建应用程序，然后等待 Visual Studio 下载依赖项。
3. 引用预定义主题样式表（下面代码中的 dx.light.css）。
对于 .NET Core SDK 2.1，更改 ClientApp/.angular-cli.json 文件如下：
.angular-cli.json
{
"apps": [
{
...
"styles": [
"../node_modules/devextreme/dist/css/dx.light.css",
...
]
}
]
}
对于 .NET Core SDK 2.2 及更高版本，对 ClientApp/angular.json 文件进行以下更改：
angular.json
{
"projects": {
"ApplicationName": {
...
"architect": {
"build": {
...
"options": {
...
"styles": [
...
"node_modules/devextreme/dist/css/dx.light.css"
]
}
}
}
}
}
}
4. 仅 .NET Core SDK 2.2 及更高版本：DevExtreme 需要JSZip库。 从 JSZip v3.3.0 开始，该库不需要注册。 如果您使用早期版本，请在 tsconfig.json 文件中注册 JSZip。
5. 打开 ClientApp/src/app/app.module.ts 文件并导入包含单个DevExtreme UI 组件的模块或包含所有 DevExtreme UI 组件和相关实用程序的模块：
app.module.ts
// Imports an individual UI component
import { DxDataGridModule } from "devextreme-angular";
// Imports all the DevExtreme UI components
// import { DevExtremeModule } from "devextreme-angular";
@NgModule({
...
imports: [
...
DxDataGridModule,
// DevExtremeModule,
...
]
})
6. 打开 ClientApp/src/app/fetch-data/fetch-data.component.html 文件并将其中的表替换为以下代码，此代码创建 DevExtreme DataGrid UI 组件并将其绑定到 FetchDataComponent 提供的示例数据：
fetch-data.component.html
<dx-data-grid [dataSource]="forecasts"></dx-data-grid>
运行应用程序并导航到 Fetch 数据页面，您应该会看到一个显示天气预报的 DataGrid。
故障排除
Error E1046: 在数据对象中找不到 [FieldName] 键字段
在 ASP.NET Core 中，在序列化为 JSON 的过程中，属性名称会转换为小写字母。 如果列数据字段使用 UpperCamelCase，则会出现错误 E1046。
应用以下解决方案当中的一个来解决此问题：
- 禁用 JSON 序列化程序中的转换
打开Startup.cs文件，修改ConfigureServices方法如下：
using Newtonsoft.Json.Serialization;
// ...
public void ConfigureServices(IServiceCollection services) {
// ...
services.AddMvc() // or `.AddRazorPages`, `.AddControllers`, `.AddControllersWithViews`
.AddJsonOptions(options => options.SerializerSettings.ContractResolver = new DefaultContractResolver());
}
从 ASP.NET Core 3 开始，您可以使用 System.Text.Json 替代 Newtonsoft.Json：
public void ConfigureServices(IServiceCollection services) {
// ...
services.AddMvc() // or `.AddRazorPages`, `.AddControllers`, `.AddControllersWithViews`
.AddJsonOptions(options => options.JsonSerializerOptions.PropertyNamingPolicy = null);
}
重要提示：此解决方案会影响整个应用程序，如果控制器由非DevExtreme组件使用，则不推荐使用。
- 序列化 API 控制器中的对象
修改DevExtreme UI组件绑定的API控制器（OrdersController）如下图：
using Newtonsoft.Json;
using Newtonsoft.Json.Serialization;
// ...
[HttpGet]
public object Get(DataSourceLoadOptions loadOptions) {
var loadResult = DataSourceLoader.Load(SampleData.Orders, loadOptions);
var json = JsonConvert.SerializeObject(loadResult, new JsonSerializerSettings {
ContractResolver = new DefaultContractResolver()
});
return Content(json, "application/json");
}
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合，使您可以利用现代Web开发堆栈（包括React，Angular，ASP.NET Core，jQuery，Knockout等）构建交互式的Web应用程序。从Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和响应式UI小部件集合，可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
DevExpress技术交流群4：715863792 欢迎一起进群讨论