在MasterDetail的結構中，由於Master和Detail的資料是同時讀到Web Server上，如Master的PackedRecord為100時，每個Detail如果平均為10筆資料，則Detail讀到Web Server的資料為1000筆，會稍微影響到效率，另外就是Web網頁在移動Master時須要更新網頁，反應速度較慢，如果增加一個WebGridView來串接Master的話，這樣的視覺感受也不同。在此我們就要在Master/Detail中，增加一個WebGridView，並且與Master相互關連。

q  View的設計實例

Step1＞右鍵按一下進入W005的 「View Component Designer」，進入WebDataSet的設計介面。

Œ  在此我們增加一個WebDataSet，命名為WView，將『RemoteName』設定為【S004.View_Purchases】，將『Active』設為【True】，如圖。設置完成後，不要忘記要對此Wview右鍵進行「Save」，否則無法在網頁設計頁面中選擇到此WebDataSet元件。

  另外，為了不讓WMaster在Page開啟時就取抓取資料到Web Server上以提高效率，必須將WMaster的『AlwaysClose』屬性設置為【True】，開啟網頁時此WebDataSet不會啟動下載資料下來，須透過WView這個WebDataSet與其關連逐筆取得相對資料。

       圖3-6-1新增WebDataSet元件

       圖3-6-2設置WMaster屬性

Step2＞回到W005的網頁設計介面，在W005中增加一個WebDataSource，命名為【View】，將『WebDataSetID』設定為【WView】（這個來自View Component Designer中的Save功能），『DataMember』設為【View_Provider】，如圖。同時，也可將『AllowAdd』，『AllowUpdate』，『AllowDelete』等屬性設為【False】，因為在View的狀態下是不允許新增更改刪除的。

       圖3-6-3增加WebDataSource

Step3＞在W005中右鍵選擇「View Code」，在Page_Load事件中增加一行程式。（Page_Load是網頁打開或更新時就會被Web Server執行的一段重要程式）。

我們將View.DataSource指向WView，這是因為在.NET 2.0中，View Component Designer中的元件不是一直保存在那的，必須透過InitializeComponent()才能讓這些元件存在，而我們的WebDataSet就是存在View Component Designer中，因此在初始網頁的第一次，必須透過InitializeComponent()讓WebDataSet啟動，再將資料交給WebDataSource，由於WebDataSource具有緩存的機制（因為其EnableViewState設為True），所以第二次往返網頁就不必再向WebDataSet取資料了，由此瞭解，一定要有InitalizeComponent()才會讓WebDataSet向A/P Server取資料。如果WebDataSource沒有在此設定到WebDataSet來源時，在打開網頁時WebDataSource將會取不到資料源而發生錯誤。

 
       圖3-6-4增加一行程式

Step4＞回到W005的網頁設計畫面，在其中貼入一個WebGridView元件，命名為wgvView，並將其『DataSourceID』設置為【View】（資料來源為View這個WebDataSource）。

       圖3-6-5貼入WebGridView元件

Step5＞如果WebGridView沒有顯示出欄位時，可以按WebGridView右上角的快捷鈕選擇「Refresh Schema」，來自動產生WebGridView欄位。同樣會出現是否確定要更新的對話方塊，按一下“Yes”。同時，也可通過按一下「Auto Format」來設定WebGridView的顯示風格。最後可以通過設定wgvView的Columns屬性，來設定只顯示某些欄位。

       圖3-6-6執行Refresh Schema

Step6＞因為此wgvView只為了能瀏覽資料，不需編輯，可以上述的快捷鈕中選「Edit Columns」，選中CommandField，並將『ShowEditButton』與『ShowDeleteButton』設為【False】即可，僅留下『ShowSelectedButton』為【True】。

       圖3-6-7 設置CommandField屬性

Step7＞在wgvView的屬性中，我們選擇對SelectedIndexChanged事件按兩下，增加如下事件程式。

       圖3-6-8增加事件程式

這是為了在選擇wgvView時，要對Master與Detail等WebDataSource進行資料的同步動作，如下：

 protected void wgvView_SelectedIndexChanged(object sender, EventArgs e)

         {

             Master.ExecuteSync(wgvView);

             DataBind();

             Detail.ExecuteSelect(wfvMaster);

             DataBind();

         }

Step8＞為了能讓原來的WebNavigator元件上下筆或上下頁時是對著wgvView這個元件，而不是原來的wfvMaster元件，因此選中WebNavigator元件，將其『ViewBindingObject』屬性設置為【wgvView】。

這樣，在執行時，WebNavigator的首筆、上筆、下筆、末筆、查詢等功能就會轉而控制wgvView，而資料編輯類的按鈕如新增、編輯、刪除、存檔、取消等功能還是針對原來的wfvMaster，原來的WebNavigator.BindingObject屬性還是對應到wfvMaster沒有變。

       圖3-6-9設置WebNavigator元件

Step9＞同時，我們也必需在原有的WebNavigator的Command事件中進行修改，如下：

protected void WebNavigator1_Command(object sender, CommandEventArgs e)

{

if(e.CommandName == "cmdFirst" || e.CommandName == "cmdPrevious"

|| e.CommandName == "cmdNext" || e.CommandName == "cmdLast")

{

Master.ExecuteSync(wgvView); // 在此同步Master的資料

DataBind();

Detail.ExecuteSelect(wfvMaster); // Detail也要跟著Master更新

DataBind();

}

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

{

Detail.ExecuteAdd(wfvMaster);

DataBind();

}

else if (e.CommandName == "cmdDelete" || e.CommandName == "cmdApply" || e.CommandName == "cmdOK")

{

View.Reload();  // 如有異動，讓View重新下載資料

DataBind();

if(e.CommandName == "cmdDelete")  // Delete須特別處理

{

Master.ExecuteSync(wgvView);

DataBind();

Detail.ExecuteSelect(wfvMaster);

DataBind();

}

}

}

以上主要設定在WebNavigator移動資料時，要讓View與Master與Detail同步一次，並且控制在Apply與OK時要能讓View可以重新下載資料，刪除Master資料時，可以讓Master與Detail也同步一次。

Step10＞對W005存檔後並執行Build Page，在InfoLogin.aspx右鍵執行「View in Browser」，瀏覽查看結果。打開W005時，WebFormView上就只有一筆資料，只要點選View上面的資料，下方的Master/Detail資料就會進行同步的動作。如圖。

       圖3-6-10 執行W005

如果希望wgvView在WebFormView的左方以節省網頁空間時，可以將wgvView的HorizonalAlign設為Left，這樣就可以讓wgvView在Master的左方，如要更精確的位置排版，必須在其背景上以HTML的Table(網格)元件來進行分隔。

q  使用Wizard

從上述步驟看，貼上View的WebDataSet與WebDataSource確實顯得有些麻煩，所以在EEP2012的Wizard中，提供了一個WMasterDetail3的Template，可以很快去產生一個View+Master/Detail這種頁面，不必去修改任何一個程式即可完成，加快開發者的生產效能。

Step1＞按一下Tools->「EEP Wizard」，選擇ASP.net Web Form後，按下【Next】，然後選擇所要設計的Web Site位置與其相對的目錄後，同樣按下【Next】。最後請在Template中選擇 『WMasterDetail3.aspx』的網頁命名為【W006】，按【Next】。

       圖3-6-11 設置Web Site位置與目錄

       圖3-6-12 設置Template Form並取名

Step2＞在設定Provider Name時選擇之前設計好的【S004.Master】，同時需要設定Table Name與View Provider Name，這裏分別設定為【Purchase】與【View_Provider】。

 
       圖3-6-13 設置各參數

Step3＞先設定View所要顯示的欄位，我們只要選擇前3個欄位即可，因為View不必要這麼多欄位，會佔用網頁空間。然後才是設定Master和Detail所要顯示的欄位，這些步驟與前面的Wizard設計步驟都是相同的，最後按下【Done】，即可產生此W006的網頁。

圖3-6-14 設定View要顯示的欄位

Step4＞對W006存檔後並執行Build Page，最後一樣要在EEPManager/Menu Utility中，在Web功能項目上增加W006這個項目，選擇MyWebs目錄下的W006.aspx，並在Access Group中設定EveryOne。

Step5＞在InfoLogin.aspx右鍵執行「View in Browser」瀏覽查看結果。

打開W006，如圖左邊的是View，右邊則是Master/Detail的資料，只要你點選左邊的View資料就可以顯示右邊相對的Master/Detail資料。

圖3-6-16/1 效果一

圖3-6-16/2 效果二

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