本文介紹如何創建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 歡迎一起進羣討論