「B/S端开发」如何将DevExtreme添加到ASP.NET Core Angular应用
yuyutoo 2024-10-26 16:12 9 浏览 0 评论
本文介绍如何创建ASP.NET Core Angular应用程序并向其添加DevExtreme UI组件,您需要 Visual Studio 2017 v15.7 或更高版本以及 .NET Core 2.1 SDK 来执行此操作。
DevExtreme Complete Subscription官方最新版免费下载试用,历史版本下载,在线文档和帮助文件下载-慧都网
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 | 下载试用
DevExtreme拥有高性能的HTML5 / JavaScript小部件集合,使您可以利用现代Web开发堆栈(包括React,Angular,ASP.NET Core,jQuery,Knockout等)构建交互式的Web应用程序。从Angular和Reac,到ASP.NET Core或Vue,DevExtreme包含全面的高性能和响应式UI小部件集合,可在传统Web和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。
相关推荐
- 全局和隐式 using 指令详解(全局命令)
-
1.什么是全局和隐式using?在.NET6及更高版本中,Microsoft引入了...
- 请停止微服务,做好单体的模块化才是王道:Spring Modulith介绍
-
1、介绍模块化单体是一种架构风格,代码是根据模块的概念构成的。对于许多组织而言,模块化单体可能是一个很好的选择。它有助于保持一定程度的独立性,这有助于我们在需要的时候轻松过渡到微服务架构。Spri...
- ASP.NET程序集引用之痛:版本冲突、依赖地狱等解析与实战
-
我是一位多年后端经验的工程师,其中前几年用ASP.NET...
- .NET AOT 详解(.net 6 aot)
-
简介AOT(Ahead-Of-TimeCompilation)是一种将代码直接编译为机器码的技术,与传统的...
- 一款基于Yii2开发的免费商城系统(一款基于yii2开发的免费商城系统是什么)
-
哈喽,我是老鱼,一名致力于在技术道路上的终身学习者、实践者、分享者!...
- asar归档解包(游戏arc文件解包)
-
要学习Electron逆向,首先要有一个Electron开发的程序的发布的包,这里就以其官方的electron-quick-start作为例子来进行一下逆向的过程。...
- 在PyCharm 中免费集成Amazon CodeWhisperer
-
CodeWhisperer是Amazon发布的一款免费的AI编程辅助小工具,可在你的集成开发环境(IDE)中生成实时单行或全函数代码建议,帮助你快速构建软件。简单来说,AmazonCodeWhi...
- 2014年最优秀JavaScript编辑器大盘点
-
1.WebstormWebStorm是一种轻量级的、功能强大的IDE,为Node.js复杂的客户端开发和服务器端开发提供完美的解决方案。WebStorm的智能代码编辑器支持JavaScript,...
- 基于springboot、tio、oauth2.0前端vuede 超轻量级聊天软件分享
-
项目简介:基于JS的超轻量级聊天软件。前端:vue、iview、electron实现的PC桌面版聊天程序,主要适用于私有云项目内部聊天,企业内部管理通讯等功能,主要通讯协议websocket。支持...
- JetBrains Toolbox推出全新产品订阅授权模式
-
捷克知名软件开发公司JetBrains最为人所熟知的产品是Java编程语言开发撰写时所用的集成开发环境IntelliJIDEA,相信很多开发者都有所了解。而近期自2015年11月2日起,JetBr...
- idea最新激活jetbrains-agent.jar包,亲测有效
-
这里分享一个2019.3.3版本的jetbrains-agent.jar,亲测有效,在网上找了很多都不能使用,终于找到一个可以使用的了,这里分享一下具体激活步骤,此方法适用于Jebrains家所有产品...
- CountDownTimer的理解(countdowntomars)
-
CountDownTimer是android开发常用的计时类,按照注释中的说明使用方法如下:kotlin:object:CountDownTimer(30000,1000){...
- 反射为什么性能会很慢?(反射时为什么会越来越长)
-
1.背景前段时间维护一个5、6年前的项目,项目总是在某些功能使用上不尽人意,性能上总是差一些,仔细过了一下代码发现使用了不少封装好的工具类,工具类里面用了好多的反射,反射会影响到执行效率吗?盲猜了一...
- btrace 开源!基于 Systrace 高性能 Trace 工具
-
介绍btrace(又名RheaTrace)是抖音基础技术团队自研的一款高性能AndroidTrace工具,它基于Systrace实现,并针对Systrace不足之处加以改进,核心改进...
你 发表评论:
欢迎- 一周热门
- 最近发表
-
- .NET 奇葩问题调试经历之3——使用了grpc通讯类库后,内存一直增长......
- 全局和隐式 using 指令详解(全局命令)
- 请停止微服务,做好单体的模块化才是王道:Spring Modulith介绍
- ASP.NET程序集引用之痛:版本冲突、依赖地狱等解析与实战
- .NET AOT 详解(.net 6 aot)
- 一款基于Yii2开发的免费商城系统(一款基于yii2开发的免费商城系统是什么)
- asar归档解包(游戏arc文件解包)
- 在PyCharm 中免费集成Amazon CodeWhisperer
- 2014年最优秀JavaScript编辑器大盘点
- 基于springboot、tio、oauth2.0前端vuede 超轻量级聊天软件分享
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)