本文介紹如何創(chuàng)建ASP.NET Core Angular應(yīng)用程序并向其添加DevExtreme UI組件，您需要 Visual Studio 2017 v15.7 或更高版本以及 .NET Core 2.1 SDK 來執(zhí)行此操作。

DevExtreme v21.1.5最新版下載

1. 打開Visual Studio 2017并使用ASP.NET Core Web應(yīng)用程序模板創(chuàng)建一個新的ASP.NET Core Angular應(yīng)用程序。

2. 打開 ClientApp/package.json 文件并將 devextreme 和 devextreme-angular 包添加到依賴項部分：

package.json

{
...
"dependencies": {
...
"devextreme": "21.1.5",
"devextreme-angular": "21.1.5"
}
}

保存更改，重建應(yīng)用程序，然后等待 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 v3.3.0 開始，該庫不需要注冊。 如果您使用早期版本，請在 tsconfig.json 文件中注冊 JSZip。

5. 打開 ClientApp/src/app/app.module.ts 文件并導(dǎo)入包含單個DevExtreme UI 組件的模塊或包含所有 DevExtreme UI 組件和相關(guān)實用程序的模塊：

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 文件并將其中的表替換為以下代碼，此代碼創(chuàng)建 DevExtreme DataGrid UI 組件并將其綁定到 FetchDataComponent 提供的示例數(shù)據(jù)：

fetch-data.component.html

<dx-data-grid [dataSource]="forecasts"></dx-data-grid>

運行應(yīng)用程序并導(dǎo)航到 Fetch 數(shù)據(jù)頁面，您應(yīng)該會看到一個顯示天氣預(yù)報的 DataGrid。

故障排除

Error E1046: 在數(shù)據(jù)對象中找不到 [FieldName] 鍵字段

在 ASP.NET Core 中，在序列化為 JSON 的過程中，屬性名稱會轉(zhuǎn)換為小寫字母。 如果列數(shù)據(jù)字段使用 UpperCamelCase，則會出現(xiàn)錯誤 E1046。

應(yīng)用以下解決方案當中的一個來解決此問題：

• 禁用 JSON 序列化程序中的轉(zhuǎn)換

打開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);
}

重要提示：此解決方案會影響整個應(yīng)用程序，如果控制器由非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 | 下載試用

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和下一代移動應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress技術(shù)交流群4：715863792      歡迎一起進群討論