本示例是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類，新增刪除天氣方法
- 點選執行按鈕檢視效果
