本示例是AntDesign Blazor的入門示例，在學習的同時分享出來，以供新手參考。
示例程式碼倉庫：https://gitee.com/known/AntDesignDemo
1. 學習目標
- 重構專案檔案結構
- 新增日期查詢條件
- 實現查詢業務邏輯
2. 重構專案結構
在實現列表查詢條件功能之前，我們先重構一下專案結構，建立天氣Model類和Service類，在Service類中處理查詢業務邏輯。
1）在專案中新增Models和Services資料夾
2）在Models中新增天氣的Model類，將頁面中的WeatherForecast類剪下過來
3）在Services中新增天氣的Service類，用於處理天氣的後端業務邏輯，內容如下：
- 建立靜態變數儲存天氣資料，正式專案請改成資料庫儲存
- 新增靜態建構函式，預設初始化預測10天的天氣資料
- 新增查詢方法，根據日期範圍查詢天氣資料
4）在_Imports.razor中新增Model和Service的名稱空間
3. 日期查詢條件
1）開啟Weather.razor檔案，在Table元件前新增RangePicker元件和Button查詢按鈕
- 定義一個
DateTime?[]變數繫結日期查詢條件 - 新增
RangePicker和Button元件 - 新增查詢按鈕的點選事件
2）點選執行按鈕，檢視頁面效果
4. 查詢業務邏輯
查詢業務主要有如下需求：
- 第一次開啟頁面的預設查詢條件
- 輸入日期條件點選查詢按鈕進行查詢
1）首先刪除預設示例程式碼
2）實現查詢業務邏輯
- 新增
WeatherService例項 - 新增預設查詢條件，預設查詢當天起5天內天氣
- 呼叫
WeatherService的查詢方法返回天氣資料
3）點選執行按鈕，檢視頁面效果
5. 總結
本示例只介紹了一個簡單的查詢功能，實現了初次開啟頁面時，新增預設日期查詢條件，點選查詢按鈕能根據日期條件進行篩選。一開始我們重構專案結構，這一步主要是為了實現前端和後端業務邏輯分離，也是為後續增刪改需求做準備。