本示例是AntDesign Blazor的入门示例,在学习的同时分享出来,以供新手参考。
示例代码仓库:https://gitee.com/known/BlazorDemo
-
学习目标
创建Modal表单编辑数据
创建Table操作列 -
创建Modal表单
1)新增按钮和Modal组件
打开天气页面Weather.razor文件,按照如下步骤添加新增按钮和Modal组件
在查询按钮后面添加新增按钮,使用flex布局,将新增按钮放在右侧
在Table后面添加Modal组件,设置Title和绑定Visible属性
添加Visible属性的变量
添加新增按钮的点击事件,将Visible属性的变量设为true
image
点击运行按钮查看效果
image
2)WeatherForm组件
在Page文件夹中添加WeatherForm组件,添加日期,温度和摘要3个字段
使用Form组件,添加Model和LabelColSpan属性
日期字段使用DatePicker组件
温度字段使用InputNumber组件
摘要字段使用TextArea组件
添加组件参数Model传递天气数据
image
打开天气模型类WeatherForecast,添加必填字段特性和提示信息
image
3)实现表单功能
下面再次修改Weather页面,实现编辑数据功能
标签:总结,12,20,示例,image,添加,Modal,按钮,组件 From: https://www.cnblogs.com/lmyy/p/17924216.html