VS 2013 LightSwitch 入門教學 Part 4 - 資訊量太多? 使用 Query來排序和過濾

各位夥伴們,

第一次聽到 LightSwitch 這個字眼? 它是什麼呢? 有時候我們想在 Visual Studio 中用工具拖拉點選,快速地 “拉" 出一個資料庫的應用程式,例如中小企業需要一個簡單的產品型錄管理應用、庫存管理、辦公室資產管理、甚至訂便當系統,這類簡單的辦公室應用大都只有基本的資料庫表格操作、以及表單及報表的應用,無需太多客製化空間或是系統整合、也不用寫程式碼,這時候就可以使用 Visual Studio LightSwitch 這個工具!(在以往可能是使用 Access 、甚至是更早期的 FoxPro 工具來設計資料庫應用,但這類的工具無法設計出 Web 版本、往往也侷限在單機操作或是 Client-Server 架構)

我們整理了一系列的 Visual Studio 2013 LightSwitch 入門文章,相信按圖學習操作,你馬上在 5 分鐘就可以 ”拉" 出一個簡單的資料庫應用!

如果你錯過了之前的文章,請參考 :

------------------------------------------------------------------------------------------------------------------

VS 2013 LightSwitch 入門 Part 4 - 資訊量太多? 使用 Query來排序和過濾

在這篇文章中,我們要討論查詢。在現實生活中Query只是一個問題。但是當我們在資料庫上下文環境中討論查詢,我們指的是從資料庫中請求特定數據子集的查詢語言。你可以使用查詢來幫助用戶找到他們正在尋找的訊息,並將精力集中在手中任務所需要的數據上。隨著數據的增長,為了讓你的程序為用戶更富有成效,查詢變得十分必要。而不是在一個頁面上為了你想要的訊息而查詢整張資料庫表格。你可以使用查詢將結果縮小到一個可管理的列表。例如,如果你想知道多少個聯絡人居住在加洲,你創建一個Query來查看一個聯絡人列表,以及檢查這些聯絡人的所在的州。

如果你遵循這一文章系列,其實你已經知道如何在LightSwitch中如何使用查詢。在第三部分中,我們建立了一個為瀏覽聯絡人頁面的指定搜索,這允許用戶通過Frist Name或Last Name來查詢聯絡人,在這篇文章中我們會展示如何使用Query設計器定義你自己的可重用性的Queries以及你如何在應用程序中使用它們。

LightSwitch 查詢設計器

查詢設計器可幫助您構建查詢,以發送請求到後端資料源獲取你想要的項目。您可以使用設計器來創建過濾條件,並指定排序選項。在LightSwitch中,查詢是基於在數據模型中的項目(例如,聯絡人項目)。查詢還可以基於其他的查詢,使查詢能夠輕鬆建成。例如,如果你定義了一個名為SortedContacts查詢,聯絡人排序按自己的姓氏屬性,你就可以使用這個查詢的返回聯絡人作為其他查詢的數據源。這樣就避免了重複應用過濾或排序條件在您可能需要的每一個查詢條件上。

 

關於查詢設計器的參考,請參閱:查詢:從數據源檢索信息

有關如何使用查詢設計器的影音教學,請參閱:我如何:在使用LightSwitch HTML客戶端界面上篩選數據?

創建一個“SortedContracts”查詢

讓我們透過使用曾經創建過的聯絡人管理地址簿應用程序,來演練LightSwitch中查詢的一些例子。在第三部分中,我們建立了一個聯絡人的查詢界面,該聯絡人查詢是以名字和姓氏來排序。然而,這個查詢是特定於瀏覽聯絡人界面。如果我們想在應用程序中其他部分的查詢重用,而不是直接在屏幕上修改查詢,這樣的話你可以使用查詢設計器來定義全局查詢,並將其關聯到你的項目。

要創建一個全局查詢,在解決方案資源管理器中,右鍵單擊你想要的項目(在我們的案例電話簿),然後選擇“新增查詢”。

查詢設計器打開後,首先,命名您的查詢。我們將其命名為“SortedContacts”。之後,你就可以在解決方案資源管理器中的項目列表中看到此查詢。

接下來,我們需要定義查詢的排列順序,點擊“ 新增排序”,然後在設計器的排序區域,從下拉表單中選擇FirstName屬性。再次點擊“ 新增排序”,這一次選擇LastName屬性。讓兩個排序保持默認的遞增排列。

 

現在我們有了這個查詢來對我們的聯絡人項目進行排序,我們可以用它作為其他聯絡查詢的基礎,這樣如果我們想改變排序順序,所有基於此查詢的查詢都將更新排序。舉例來說,現在我們可以創建基於SortedContacts的一個應用濾鏡條件查詢。

但在我們先進入過濾條件和參數區域之前,需要注意當選擇瀏覽數據界面的時候,SortedContacts是作為界面數據的一個選項顯示。全部查詢是這樣顯示的。

 

請記住,你不會看到查詢針對界面模板返回的數據集,並以獨立的記錄進行工作,如圖,新增/編輯詳情界面模板一樣。

定義過濾條件和參數

如果我們想允許用戶查詢出生日期落在一個特定的範圍內的聯絡人,讓我們來創建一個過濾器,按日期範圍查詢聯絡人,但這次我們指定查詢的數據來源是SortedContacts查詢。在聯絡人項目右鍵單擊並選擇“新增查詢” ,再次打開查詢設計器。命名查詢“ ContactsByBirthDate ”,然後在查詢設計器右上角上的數據源下拉列表中選擇“SortedContacts”。

 

現在這個查詢已經進行過排序,但我們需要新增一個過濾條件。定義過濾條件可以進行一些實踐(比如設計一個好的數據模型),但LightSwitch中在保持其強大性的同時,試圖使其操作盡可能的簡單。您可以在過濾器中指定相當複雜的條件和分組,但我們需要定義的這個並不是太複雜。當你需要查詢某個範圍內的記錄,您將需要定義2個條件。一旦檢查記錄屬於“大於”來檢查記錄的最低值和一個屬於“小於”來檢查記錄的最大值。

所以在查詢設計器,點擊“新增過濾器”並像這樣指定條件:

 

BirthDate屬性

 

大於或等於

 

一個參數。

然後選擇“新增”來添加一個新的參數。

 

參數的默認名字為“BirthDate”,在參數區域中把它更改為“ MinimumBirthDate ”。

 

同樣,新增一個叫做"MaximumBirthDate" 的新參數,使BirithDate屬性小於或等於它的篩選條件。查詢設計器現在看起來應該像這樣:

 

我們要思考對於參數的最後一件事是他們是否應該必需的與否。這意味著用戶是否必須填寫的篩選條件參數,以用於執行查詢。在這種情況下,我不想強迫用戶輸入其中任何一個條件,所以我們將其定義為可選的。透過選擇參數,並在屬性窗口中的標記“是可選的”。

 

好的,現在讓我們為瀏覽聯絡人界面使用這個查詢,而不是創建一個新的界面,並選擇這個全面性的查詢,我們可以改變我們在第3部分中創建的聯絡人瀏覽界面上當前使用的查詢。打開這個界面,選擇左側的聯絡人查詢,然後將數據源更改為通過生日來獲取聯絡人的查詢。LightSwitch只會讓我們選擇返回聯絡人的查詢,或聯絡人項目本身。

 

一旦我們這樣做,你會看到,我們需要的參數已經自動添加到界面的瀏覽模式,並綁定到新的查詢參數(以灰色箭頭表示)。從瀏覽模式中刪除先前的界面參數(FindContact),將新的參數拉到界面上您想要出現的位置,然後更改控件為日期選擇器控件。我還添加了出生日期字段插入表,改變了List控件為平鋪列表。

 

F5鍵生成並運行該應用程序。請注意,在聯絡人瀏覽界面上聯絡人按字母順序排序,但你會看到在頁面頂部的區域,讓我們指定出生日期範圍。由於這兩個參數是可選的,用戶可以什麼都不用輸入,或輸入一個,或同時輸入兩個日期,查詢會基於這些標準自動正確的被執行。

 

快速提示的較小外形列表(或者你有很多可選參數)。 如果你的大部分用戶都是使用如手機一樣小型設備,你可能想節省在屏幕上寶貴的空間。或者,如果你有很多的可選參數,也許你想要用單獨的界面來顯示。不是把參數字段放在聯絡人的列表上方,而是我們可以把它們放在彈出的視窗裡面。當應用程式在調試狀態運行,翻轉界面設計器。透過點擊彈出視窗的節點來新增一個彈出窗口,在屬性視窗中將其命名為“Filter”,然後把參數拉進去。

 

然後新增一個按鈕到命令欄,以顯示彈出視窗(這將被自動選擇,所以只需單擊新增按鈕對話框的OK就可以了)。

 

您還可以使用屬性視窗中的過濾器圖標來作為新增加的“顯示過濾器”按鈕圖標。當您在界面上完成適當的調整,保存您的所有文件,然後刷新瀏覽器。現在您將在命令欄上看到一個過濾聯絡人的按鈕。(請注意,並列列表將顯示為正常的較小外形列表。)

 

正如你看到的那樣,使用參數查詢,您可以執行特殊的搜尋。當創建新的基於界面數據的界面查詢,LightSwitch中會自動尋找查詢的參數,並建立相對應的界面參數和控件。如果你改變現有的界面查詢,LightSwitch中會在您的瀏覽模式上創建一個綁定到查詢參數相應的界面參數。無論哪種方式,你可以使用界面設計器準確的按照你想顯示給用戶的那樣顯示。

查詢相關實體

在我們開始討論這個之前,我想談談更多類型的查詢。假使我們希望允許用戶通過電話號碼來搜索聯絡人該怎麼辦?如果你還記得我們建好的數據,就應該知道一個聯絡人可以有很多電話號碼,而且電話號碼存在一個相關的表中。為了使用查詢設計器來查詢這些,我們必須使我們的查詢基於PhoneNumber項目,而不是聯絡人。

因此,在解決方案資源管理器中PhoneNumbers項目右鍵單擊,並選擇“新增查詢”。將它命名為ContactsByPhone 。除了按照PhoneNumber搜索以外,我也想允許用戶按照聯絡人的姓氏和名字來搜尋聯絡人。這其實是很容易做到的,因為查詢設計器允許您創建過濾條件在父表上,這裡父表是聯絡人項目。當您選擇屬性時,你可以展開聯絡人節點,獲得所有的聯絡人屬性。

所以在查詢設計器上,點擊“新增過濾”並像這樣指定條件:

當聯絡人的姓氏屬性

 

包含

 

一個參數

 

然後選擇“新增”來添加新的參數。

 

該參數的名稱將默認為“LastName”,因此在下方的參數區域將其更改為FindContact,並在屬性窗口中使其屬性為“可選的”。

 

我們將使用相同的參數應用到我們的剩下的所有條件。這將允許用戶在一個框框中輸入自己的搜索條件,查詢所有符合這三個篩選條件的項目。所以接下來的篩選條件是:

聯繫人的名字屬性包含FindContact的參數

 

接下來添加最後一個過濾條件:

電話屬性包含FindContact的參數。我還添加了Contact.FirstName排序,然後是Contact.LastName排序,最後是電話遞增排序。查詢設計器現在看起來應該像這樣:

 

現在是時候為此查詢創建一個瀏覽界面。而不是刪除其他的瀏覽界面,如透過出生日期範圍內過濾的瀏覽界面,我要為此查詢創建另一個新的界面。另一種選擇是將上一個日期範圍條件添加到該查詢中,這會變成一個更複雜的查詢,但我們只要一個搜索界面。對於這個例子,讓我們保持它的簡單,但這裡有一個暗示,你該如何使用一組構造查詢:

 

不僅是支持複雜的分組選項,你也可以點擊設計器的頂部的下拉列表中的“編寫代碼”按鈕,使用LINQ編寫自己的查詢。有關編寫更複雜的查詢訊息,請參閱:查詢:從數據源中檢索信息,以及如何創建組合和標量查詢

接著添加新的瀏覽界面,再次在界面節點上單擊鼠標右鍵,選擇“添加界面...”,打開添加新界面對話框。選擇瀏覽數據界面模板和界面數據選擇ContactsByPhone查詢,然後單擊確定。

 

接著為了使屏幕看起來如我們想要的那樣。我會將列表視圖改為方格視圖,並且只保留聯絡人,電話和電話類型。更改聯絡人控件至列佈局和刪除除名字和姓氏的所有字段。我還將手機類型的字體樣式在屬性視窗中修改使其變小。然後在“PhoneNumerFindContact”界面參數更改為一個文字域,並設置標籤位置為None,然後在 Placeholder 中輸入“查找聯絡人”。屏幕看現在起來應該像這樣:

 

接下來讓我們來接上我們的檢索行為和添加按鈕,這樣我們就可以添加新的聯絡人,並從這個界面查看現有聯絡人。選擇命令欄,添加一個按鈕並選擇現有的方法showAddEditContact,並設置聯絡人為(新建聯絡人)。單擊OK。

 

更改按鈕名稱為“添加聯絡人”,並使用屬性視窗設置為圖標“添加”。下一步,在屬性窗口選擇並列列表和設置點擊行為,選擇現有的方法showViewContact,然後設置聯絡人項目到ContactsByPhone.selectedItem.Contact。單擊OK。

 

最後,在解決方案資源管理器中的界面節點上點擊鼠標右鍵,選擇“編輯界面導航”。現在我們可以在我們的應用程序中選擇兩個界面,添加到全部導航欄上。有關界面導航的更多詳情,請參見:LightSwitch HTML客戶端新的導航功能。

 

您也可以在解決方案資源管理器中此界面點擊鼠標右鍵,將其設置為主頁界面,這樣這個界面會最先打開。

好的,按F5,讓我們看看會發生什麼。現在,用戶可以按姓名或電話號碼搜索聯絡人。當你點擊聯絡人列表,我們在第3部分創建的查看詳細訊息界面將自動打開。

 

小結

正如你所看到的那樣,查詢幫助我們將大量數據縮小到用戶完成某項任務所需要的訊息。LightSwitch中提供了一個簡單,易於使用的查詢設計器,可以讓你的查詢基於項目以及其他查詢。當你的界面基於使用參數的查詢時,LightSwitch界面設計器為你做了所有繁重的任務。

編寫良好的查詢需要練習,所以我鼓勵你,透過在LightSwitch開發人員中心的查詢部分所提供的資源進行工作。

在接下來的文章中,我們將著眼於用戶的權限。後會有期!

 [原文發表地址]  Beginning LightSwitch in VS 2013 Part 4: Too much information! Sorting and Filtering Data with   作者:Beth Massi

延伸閱讀 -