本示例是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表单的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。