本示例是AntDesign Blazor的入門示例旺订，在學習的同時分享出來耐亏，以供新手參考一忱。
示例代碼倉庫：https://gitee.com/known/BlazorDemo
1. 學習目標
- 創(chuàng)建
Modal表單編輯數(shù)據(jù) - 創(chuàng)建
Table操作列
2. 創(chuàng)建Modal表單
1）新增按鈕和Modal組件
打開天氣頁面Weather.razor文件眉孩，按照如下步驟添加新增按鈕和Modal組件
- 在查詢按鈕后面添加新增按鈕，使用
flex布局技健，將新增按鈕放在右側 - 在
Table后面添加Modal組件写穴，設置Title和綁定Visible屬性 - 添加
Visible屬性的變量 - 添加新增按鈕的點擊事件，將
Visible屬性的變量設為true
image.png
- 點擊運行按鈕查看效果
image.png
2）WeatherForm組件
在Page文件夾中添加WeatherForm組件雌贱，添加日期啊送，溫度和摘要3個字段
- 使用
Form組件，添加Model和LabelColSpan屬性 - 日期字段使用
DatePicker組件 - 溫度字段使用
InputNumber組件 - 摘要字段使用
TextArea組件 - 添加組件參數(shù)
Model傳遞天氣數(shù)據(jù)
image.png
- 打開天氣模型類
WeatherForecast欣孤，添加必填字段特性和提示信息
image.png
3）實現(xiàn)表單功能
下面再次修改Weather頁面馋没，實現(xiàn)編輯數(shù)據(jù)功能
- 將
Modal內容換成WeatherForm組件 - 添加綁定表單的
Model對象 - 修改新增方法，添加默認天氣數(shù)據(jù)
- 添加
Modal組件的OnOk事件保存數(shù)據(jù)
image.png
- 打開
WeatherService類降传，添加保存天氣方法
image.png
- 點擊運行按鈕查看效果
image.png
3. 創(chuàng)建Table操作列
接下來篷朵，我們在Table中添加操作列，顯示編輯和刪除操作
- 在
Table的ChildContent中添加ActionColumn婆排，設置Title声旺、Fixed和Width屬性 - 在
ActionColumn中添加編輯和刪除兩個按鈕 - 添加編輯按鈕事件方法
- 添加刪除按鈕事件方法
image.png
- 打開
WeatherService類，添加刪除天氣方法
image.png
- 點擊運行按鈕查看效果
image.png
