第4章EEP2019WEB表單基礎設計(下)第4章EEP2019WEB表單基礎設計(下)\4-3使用WebClientQuery

4-3使用WebClientQuery

 

 

WebClientQuery主要有兩個目的,一個是自動產生讓User輸入條件的頁面,另一個目的就是將條件自動組合出WhereSQL語句,並配合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按一下wcqMasterColumns屬性,在此設定那些欄位要讓User進行條件輸入。

 

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

 

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

 

Step5接著是訂單日期】與【訂單日期。因為其為日期輸入,所以我們將『ColumnType』設定為【ClientQueryCanlendarColumn】,就會讓UserWebDataTime 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事件中使用到,而ImangeUrlMouseOverImangeUrl的屬性設定與Query相同即可,這樣會有兩個按鈕看上去一樣,所以我們將原來Query的『ControlVisible』設為【False】即可。

 

4-3-5 新增一個ControlItem

4-3-6 設置QueryControlVisible屬性

Step7雙按WebNavigatorCommand事件,在程式的下面增加如下程式:

 

protected void WebNavigator1_Command(object sender, CommandEventArgs e)

{

......

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

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

{

wcqMaster.Execute();

}

}

 

Step8W004存檔,右鍵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」,從WQueryTemplate)增加一個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設定MasterWebDataSource的屬性『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 BindingBindingField,我們只要設定其『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欄位

 

Step8Panel下方的Query Button按兩下,會發現此Template Form已經將QueryClear都寫好了,如下:

protected void Button1_Click(object sender, EventArgs e)

{

WebClientQuery1.Execute(Panel1);

DataBind();

}

protected void Button2_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 void Page_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

 

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

 

4-3-16 Query介面

 

 

Top of Page