Alan Tsai 的學習筆記


學而不思則罔,思而不學則殆,不思不學則“網貸” 為現任微軟最有價值專家 (MVP)、微軟認證講師 (MCT) 、Blogger、Youtuber:記錄軟體開發的點點滴滴 著重於微軟技術、C#、ASP .NET、Azure、DevOps、Docker、AI、Chatbot、Data Science

[iThome 第七屆鐵人賽 20] 搜索頁面 - 思考篇

搜索頁面無疑是任何系統必須要有的功能,同時要做出搜索頁面需要很多不同的地方:需要注意搜索條件,分頁的處理和結果的呈現。

這些處理其實如果沒有統一的做法,會很容易造成每個人用不同的方式做處理,因此這一篇將來介紹,如何透過框架被處理變的更加簡單。

一般搜索頁面所會需要處理的內容

搜索頁面基本上就是所謂的Index頁面。這種頁面通常會有3個部份的內容:

  1. 搜索條件 - 通常應該會有一個搜索條件,讓使用者可以過濾資料的顯示
  2. 搜索結果 - 依照搜索條件,去產生對應的結果做呈現和顯示
  3. 分頁處理 - 通常會針對結果做分頁處理,例如如果有100筆,可能只希望一次呈現20筆,那麼就會有5頁。這些資訊的處理其實並沒有想像中的容易。

針對上面提到的3個部份的內容,其實都有一些底層的內容去處理,而這些如果沒有做好,很多時候都是在runtime的時候才會出錯,而不是compile time。如果是客戶遇到才來告訴我們有問題,那就不好看了。因此,做好的情況是透過概念處理掉一些底層的東西,讓我們不會犯低級的錯誤。

框架如何簡化3個要處理的內容

在接下來,將會看一下每一個部份如果沒有框架來幫忙處理,會遇到的問題,和如何用框架解決。

搜索條件的處理

在搜索條件的部份,通常來說我們將會使用Linq來做處理。Linq的好處是我們在Compile time就會知道我們下的語法是否有錯,但是好處也是它的壞處,如果我們想要做動態搜索,例如用string的方式去組裝搜索條件,我們就會需要一些第三方套件的幫助。

能夠動態使用Linq之後,讓我們有可能只要寫一次搜索條件的邏輯,剩下就是看需要搜索的條件去做處理。這樣的好處是,不同頁面只要符合規則,所有的搜索條件都會幫忙處理。

因此,這部份將會使用共通ViewModel的方式,讓我們可以用Reflection的方式,搭配動態Linq做好搜索條件。

搜索結果的處理

這一部份比較簡單,基本上就是搜索條件組成了之後,把結果轉成要顯示的ViewModel並且做呈現。

這個部份也是搭配我們之前的ViewModel裡面的IMapFromIHaveCustomMapping來設定對應關係。

分頁處理的部份

要做到分頁,基本上有幾個地方需要注意到。首先是需要搭配搜索條件,才會知道每一個分頁切換的時候需要帶上的搜索條件。

再來,在搜索條件的處理需要考慮進去一次顯示幾筆和總共有幾頁的問題。

同時,因為需要顯示分頁,因此在做搜索結果處理的地方,還需要做搜索結果的排序。因此這個也需要算到搜索結果處理的一部份。

解決思路

在上面已經有大概提多應該要如何處理,不過這邊在總結一下,基本上,會需要定義一種特殊的ViewModel,專門是給搜索頁面使用。

這個ViewModel會有兩部份的資料,一個部份是搜索結果,再來一個是搜索條件。

搭配一些第三方的套件來處理搜索的設定和分頁處理,讓很這些底層的內容給框架處理,讓我們只需要使用就好。

結語

因為這一部份要實作起來比較多東西,因此這一篇先介紹問題和處理思路,接下來才介紹如何實作。


如果文章對您有幫助,就請我喝杯飲料吧
街口支付QR Code
街口支付QR Code
台灣 Pay QR Code
台灣 Pay QR Code
Line Pay 一卡通 QR Code
Line Pay 一卡通 QR Code
街口支付QR Code
支付寶QR Code
街口支付QR Code
微信支付QR Code
comments powered by Disqus