「B/S端开发」如何将DevExtreme添加到ASP.NET Core Angular应用
本文介绍如何创建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 欢迎一起进群讨论
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列(二):开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!
2020-09-28 WPF示例应用程序展示——图表功能和股票市场演示
2017-09-28 MyEclipse WebSphere开发教程:安装和更新WebSphere 6.1, JAX-WS, EJB 3.0(二)