AntDesignBlazor示例——列表查詢條件

known發表於2023-12-03

本示例是AntDesign Blazor的入門示例,在學習的同時分享出來,以供新手參考。

示例程式碼倉庫:https://gitee.com/known/AntDesignDemo

1. 學習目標

  • 重構專案檔案結構
  • 新增日期查詢條件
  • 實現查詢業務邏輯

2. 重構專案結構

在實現列表查詢條件功能之前,我們先重構一下專案結構,建立天氣Model類和Service類,在Service類中處理查詢業務邏輯。

1)在專案中新增ModelsServices資料夾

image

2)在Models中新增天氣的Model類,將頁面中的WeatherForecast類剪下過來

image

3)在Services中新增天氣的Service類,用於處理天氣的後端業務邏輯,內容如下:

  • 建立靜態變數儲存天氣資料,正式專案請改成資料庫儲存
  • 新增靜態建構函式,預設初始化預測10天的天氣資料
  • 新增查詢方法,根據日期範圍查詢天氣資料

image

4)在_Imports.razor中新增Model和Service的名稱空間

image

3. 日期查詢條件

1)開啟Weather.razor檔案,在Table元件前新增RangePicker元件和Button查詢按鈕

  • 定義一個DateTime?[]變數繫結日期查詢條件
  • 新增RangePickerButton元件
  • 新增查詢按鈕的點選事件

image

2)點選執行按鈕,檢視頁面效果

image

4. 查詢業務邏輯

查詢業務主要有如下需求:

  • 第一次開啟頁面的預設查詢條件
  • 輸入日期條件點選查詢按鈕進行查詢

1)首先刪除預設示例程式碼

image

2)實現查詢業務邏輯

  • 新增WeatherService例項
  • 新增預設查詢條件,預設查詢當天起5天內天氣
  • 呼叫WeatherService的查詢方法返回天氣資料

image

3)點選執行按鈕,檢視頁面效果

image

5. 總結

本示例只介紹了一個簡單的查詢功能,實現了初次開啟頁面時,新增預設日期查詢條件,點選查詢按鈕能根據日期條件進行篩選。一開始我們重構專案結構,這一步主要是為了實現前端和後端業務邏輯分離,也是為後續增刪改需求做準備。