AntDesignBlazor示例——Modal表单

本示例是AntDesign Blazor的入门示例，在学习的同时分享出来，以供新手参考。

示例代码仓库：https://gitee.com/known/BlazorDemo

1. 学习目标

• 创建Modal表单编辑数据
• 创建Table操作列

2. 创建Modal表单

1）新增按钮和Modal组件

打开天气页面Weather.razor文件，按照如下步骤添加新增按钮和Modal组件

• 在查询按钮后面添加新增按钮，使用flex布局，将新增按钮放在右侧
• 在Table后面添加Modal组件，设置Title和绑定Visible属性
• 添加Visible属性的变量
• 添加新增按钮的点击事件，将Visible属性的变量设为true

• 点击运行按钮查看效果

2）WeatherForm组件

在Page文件夹中添加WeatherForm组件，添加日期，温度和摘要3个字段

• 使用Form组件，添加Model和LabelColSpan属性
• 日期字段使用DatePicker组件
• 温度字段使用InputNumber组件
• 摘要字段使用TextArea组件
• 添加组件参数Model传递天气数据

• 打开天气模型类WeatherForecast，添加必填字段特性和提示信息

3）实现表单功能

下面再次修改Weather页面，实现编辑数据功能

• 将Modal内容换成WeatherForm组件
• 添加绑定表单的Model对象
• 修改新增方法，添加默认天气数据
• 添加Modal组件的OnOk事件保存数据

• 打开WeatherService类，添加保存天气方法

• 点击运行按钮查看效果

3. 创建Table操作列

接下来，我们在Table中添加操作列，显示编辑和删除操作

• 在Table的ChildContent中添加ActionColumn，设置Title、Fixed和Width属性
• 在ActionColumn中添加编辑和删除两个按钮
• 添加编辑按钮事件方法
• 添加删除按钮事件方法

• 打开WeatherService类，添加删除天气方法

• 点击运行按钮查看效果

4. 视频

https://www.bilibili.com/video/BV1Vc411C7iz/