AntDesignBlazor示例——Modal表单
2023/12/24 18:03:25
本文主要是介绍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/
这篇关于AntDesignBlazor示例——Modal表单的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09“2024鸿蒙零基础快速实战-仿抖音App开发(ArkTS版)”实战课程已上线
- 2024-05-09聊聊如何通过arthas-tunnel-server来远程管理所有需要arthas监控的应用
- 2024-05-09log4j2这么配就对了
- 2024-05-09nginx修改Content-Type
- 2024-05-09Redis多数据源,看这篇就够了
- 2024-05-09Google Chrome驱动程序 124.0.6367.62(正式版本)去哪下载?
- 2024-05-09有没有大佬知道这种数据应该怎么抓取呀?
- 2024-05-09这种运行结果里的10.100000001,怎么能最快改成10.1?
- 2024-05-09企业src漏洞挖掘-有意思的命令执行
- 2024-05-08阿里云域名注册流程,分享给第一次购买域名的新手站长!