WebClientQuery主要有兩個目的，一個是自動產生讓User輸入條件的頁面，另一個目的就是將條件自動組合出Where的SQL語句，並配合WebDataSource到後端重新取得資料。

q  輔助WebNavigator查詢

在WebNavigator元件中已經提供了預設的查詢功能，但在使用時會有一定的局限性。比如，查詢日期欄位時要使用WebDateTimePicker，或是希望查詢條件能帶初值，或者不想另外開窗輸入條件再回來，希望直接在頁面上輸入條件者，都是WebNavigator的查詢功能所無法做到的，因此就必須配合WebClientQuery來實現。

Step1＞同樣我們打開W004，在頁面中貼入一個WebClientQuery元件，將其命名為【wcqMaster】。將其『DataSourceID』的屬性設置為【Master】，代表要針對此Master進行查詢功能，並取Master這個DataSource欄位作為我們的查詢欄位，並對其下達Where條件。其餘屬性比如字體，顏色等依照個人習慣。

圖 4-3-1 新增WebClientQuery元件

Step2＞在設計wcqMaster之前，為了讓WebClientQuery內使用WebRefVal，因此我們貼上WebDataSource，命名為【wdsCustomers】，設定『SelectAlias』為【ERPS】，『SelectCommand』為【Select * From Customers】，如下圖：

圖 4-3-2 貼入WebDataSource元件

Step3＞貼入WebRefVal，將其更名為【wrvCustomers】，設定『DataSourceID』為【wdsCustomers】，『DataTextField』為【CompanyName】，『DataValueField』為【CustomerID】，因為平時不必顯示，只要在WebClientQuery內使用，所以我們將『Visible』設為【False】。

圖 4-3-3 貼入/設置WebRefVal元件

Step4＞按一下wcqMaster的Columns屬性，在此設定那些欄位要讓User進行條件輸入。

如下，我們Add三個欄位，一個為CustomerID，另兩個都設定為OrderDate（允許重複）。然後在將『Caption』各設為【客戶編號】、【訂單日期從】與【訂單日期到】。CustomerID因為要使用WebRefVal，所以我們將其『ColumnType』設定為【ClientQueryRefValColumn】，並將『WebRefVal』屬性選擇剛剛貼進來的【wrvCustomers】。

圖 4-3-4/1 設置CustomerID欄位

Step5＞接著是【訂單日期從】與【訂單日期到】。因為其為日期輸入，所以我們將『ColumnType』設定為【ClientQueryCanlendarColumn】，就會讓User以WebDataTime Picker方式讓User來輸入，為了能讓這兩個日期有預設值，我們將【訂單日期從】的『Default』設為【_FIRSTDAYTY】，代表今年第一天，【訂單日期到】的『Default』設為【_LASTDAY，】代表本月的最後一天。

圖 4-3-4/2 設置From OrderDate欄位

圖 4-3-4/3 設置To OrderDate欄位

Step6＞選中WebNavigator，按一下NavControls屬性旁的“…”按鈕，打開設定視窗。在其中增加一個ControlItem，其屬性設置如圖。

其中『ControlName』請設定為【ClientQuery】，將會在下面的Command事件中使用到，而ImangeUrl，MouseOverImangeUrl的屬性設定與Query相同即可，這樣會有兩個按鈕看上去一樣，所以我們將原來Query的『ControlVisible』設為【False】即可。

圖 4-3-5 新增一個ControlItem

圖 4-3-6 設置Query的ControlVisible屬性

Step7＞雙按WebNavigator的Command事件，在程式的下面增加如下程式：

protected void WebNavigator1_Command(object sender, CommandEventArgs e)

{

．．．．．．

//如果按一下ClientQuery，則執行ClientQuery的執行。以下為新增內容。

else if (e.CommandName == "cmdClientQuery")    

{

wcqMaster.Execute();

}

}

Step8＞對W004存檔，右鍵Build Page，並以InfoLogin.aspx右鍵執行「View in Browser」瀏覽查看結果。打開W004，按一下WebNavigator的「查詢」按鈕，出現如下畫面。

圖 4-3-7 查詢介面

q 查詢表單的設計

上一節介紹了ClientQuery在配合WebNavigator使用時，會另外顯示一個新網頁用於輸入條件，而在這裏我們將介紹ClientQuery也可以顯示在同一頁面中來直接輸入條件，並配合WebGridView來顯示資料。設計的步驟如下：

Step1＞我們將使用Template來設計一個新的網頁，選擇Solution1裏的“C:\...\EEPWebClient”之下的「MyWebs」。右鍵點擊MyWebs，選擇「Add New Item」，從WQuery（Template）增加一個WebForm，命名為【W009】。

圖 4-3-8 新增W009 Form

Step2＞在頁面中已經貼好一個ClientQuery與一個Panel，用來輸入條件使用，下面則是一個WebGridView元件，用來顯示查詢結果。

圖 4-3-9 依次貼入顯示元件

產生此WebForm之後，同樣先來設定WebDataSet，右鍵【W009.aspx】的「View Component Designer」進入元件設計器。

Step3＞點選WMaster，將『RemoteName』設定為【S004.View_Purchase】（其實就是Purchase這個單一Table，不包括Purchase Details這個Table），將『Active』設為【True】，如圖。

注意

設置完成後，不要忘記要對此WMaster右鍵進行Save，否則無法在網頁設計頁面中選擇到此WebDataSet元件。

圖 4-3-10 設定WMaster屬性

Step4＞設定Master（WebDataSource）的屬性『DataMember』為【View_Purchase】。

圖 4-3-11 設定WMaster.WebDataSource屬性

Step5＞為了讓WebClientQuery內使用WebRefVal，因此我們貼上WebDataSource，命名為【wdsSuppliers】，設定『SelectAlias』為【ERPS】，『SelectCommand』為【Select Suppliers.* From Suppliers】，如下圖：

圖 4-3-12 新增WebDataSource元件

Step6＞在網頁上再貼入一個WebRefVal，改名為【wrvSuppliers】。用於在ClientQuery輸入條件時也可以使用WebRefval。

WebRefval只需要設定以下幾個屬性，因為作Query用途，所以不必設定Data Binding與BindingField，我們只要設定其『DataSourceID』為【wdsSuppliers】，『DataTextField』為【CompanyName】，『DataValueField』為【SupplierID】即可，最後因這個WebRefVal只要用在WebClientQuery中，不是真正要顯示在網頁上，所以，我們將『Visible』設為【False】。

圖 4-3-13 新增/設置WebRefVal元件

Step7＞選中WebClientQuery1，首先設定其『DataSourceID』為【Master】，並在Columns屬性中設定下列欄位，如『SupplierID』與兩個『PurchaseDate』。

Œ  將SupplierID的『ColumnType』設定為【ClientQuery RefValColumn】；

  並將『WebRefVal』屬性設為【wrvSuppliers】；

Ž  再將兩個PurchaseDate的『Caption』分別設定為【From Purchase Date】與【To Purchase Date】；

    『DefaultValue』設為【_FIRSTDAYLM】（上個月最後一天）與【_TODAY】（今天），『ColumnType』設為【ClientQueryCanlendar】即可。

圖 4-3-14/1 設置SupplierID欄位

圖 4-3-14/2 設置From Purchase Date欄位

圖 4-3-14/3 設置To Purchase Date欄位

Step8＞對Panel下方的Query Button按兩下，會發現此Template Form已經將Query與Clear都寫好了，如下：

protected voidButton1_Click(object sender, EventArgs e)

{

WebClientQuery1.Execute(Panel1);

DataBind();

}

protected voidButton2_Click(object sender, EventArgs e)

{

WebClientQuery1.Clear(Panel1);

DataBind();

}

其中，Execute(Panel1)是代表取得Panel1中的ClientQuery條件後，組成Where的語句並對WebClientQuery所指定的WebDataSource執行SetWhere()動作並取得查詢結果；Clear(Panel1)則是將Panel1內的ClientQeury欄位進行條件清除的動作。

為了讓Panel1打開表單時就能顯示出來，還需要在頁面的Page_Load事件中增加如下程式，Template也已經設定好了：

protected voidPage_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

InitializeComponent();

Master.DataSource = WMaster;

}

WebClientQuery1.Show(Panel1);

}

其中Show()是代表會將WebClientQuery所設定的條件欄位顯示在指定的Panel1上。

Step9＞最後就是按一下WebGridView1右上角的快捷鈕，選擇『Choose Data Source』為【Master】這個WebDataSource，並執行「Refresh Schema」後，其WebGirdView1就會顯示出其Master的所有欄位。在執行時期中，WebDataSource會透過WebClientQeury下出去Where語句，此時WebGridView1就會顯示最新的查詢資料給User。

圖 4-3-15 執行Refresh Schema

Step10＞對W009右鍵執行Build Page。透過InfoLogin.cs的右鍵「View in Browser」來瀏覽網頁，打開W009，如下可以用選取的方式來輸入條件，按一下Query，就會出現符合的結果。

圖 4-3-16 Query介面

訊光科技系統股份有限公司