DevExpress 10月线上公开课火热报名中

DevExpress控件使用交流,DevExpress中国社区Dev联系电话 联系电话:023-68661681

DevExtreme初级入门教程(Angular篇):如何将DevExtreme添加到ASP.NET Core Angular应用

来源:   发布时间:2021-09-26   浏览:93次

本文介绍如何创建ASP.NET Core Angular应用程序并向其添加DevExtreme UI组件,您需要 Visual Studio 2017 v15.7 或更高版本以及 .NET Core 2.1 SDK 来执行此操作。

DevExtreme v21.1.5最新版下载

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和下一代移动应用程序中使用。 该套件附带功能齐全的数据网格、交互式图表小部件、数据编辑器等。


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

更多DevExpress线上公开课、中文教程资讯请上中文网获取

DevExpress 增值服务火热销售中
本站文章除注明转载外,均为本站原创或翻译
欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
转载请注明:文章转载自:DevExpress控件中文网 [https://www.devexpresscn.com/]
本文地址:https://www.devexpresscn.com/post/2670.html

相关产品: DevExtreme跨平台开发框架,


联系我们
  • 重庆总部 023-68661681 400-700-1020
购买
  • sales@evget.com
合作
  • business@evget.com


在线
客服
在线
QQ
电话
咨询
023-68661681
返回
顶部