DevExtreme初级入门教程（Angular篇）：如何将DevExtreme添加到ASP.NET Core Angular应用

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 componentimport { 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 | 下载试用

DevExpress技术交流群4：715863792      欢迎一起进群讨论