在這一章節中我們將通過Step by Step的方式教大家製作一個Ajax新元件組成的FormView多檔。

1.      為配合後面的例子，首先我們需要將sOrders的Server端進行修改。我們將原先保存Detail的SQL語法做如下修改：

select [Order Details].*,Products.ProductName FROM [Order Details] left join Products on [Order Details].ProductID=Products.ProductID

修改完成後,請注意不要忘記重新建制Server端。

2.      使用Wizard的WMasterDetail1製作名為bFormViewbOrders的aspx文件並放置在MyWeb的Folder下，在Wizard產生時請注意，請將Master上的EmployeeID、CustomerID以及Detail上的ProductID的RefValNo設定為Employees、Customers以及Products。由於在2-1的準備工作中這兩個欄位的ControlType已經設定為RefValBox，因此這裡只需要設定RefValNo

3.      接著，我們將這個產生的網頁通過EEPManager進行設定權限，我們將它的Caption設定為AjaxFromView訂單管理。

4.      回到bFormViewbOrders的設計畫面，將畫面中的WebNavigator、WebFormView以及WebGridView刪除。同時，將Form中的Master、wdsOrdersCustomerID、wdsOrdersEmployeeID以及wdsOrderDetailsProductID這4個元件的CatchDataSet的屬性設定為true。請注意，Detail的CatchDataSet不需要設定。

5.      接著，我們在畫面上分別貼入AjaxScriptManager、兩個AjaxGridView(一個為View我們將它命名為agvView，一個為Detail將它命名為agvDetail)、AjaxFormView(Master)以及AjaxLayout。

6.      接下來的步驟我們就可以設定顯示資料元件—AjaxGridView以及AjaxFormView的數據源，同時產生欄位。首先，我們先設定用於對Master進行新增以及修改的元件AjaxFormView，我們同樣將它的DataSrouceID屬性設定為Master。欄位的產生同單檔中介紹的方式，此處不重復説明了。

7.      接著我們產生View對應的GridView欄位以及工作欄。我們選中agvView元件，將它的DataSourceID設定為Master。最後通過Generate Column以及Generate ToolItems產生欄位以及工具欄。產生完成後，我們可將一些主要顯示的欄位設定在agvView上其他都移除，同時在工具欄上只顯示查詢以及刷新按鈕。如下圖:

8.      最後一個資料元件我們將Detail對應的GridView--agvDetail的數據源進行選擇，請注意，由於此處我們需要顯示的是Detail的資料，因此我們在DataSourceID中選擇Detail這個WebDataSource

9.      接著，我們選中agvDetail後，點開它右上角的小箭頭，選擇“Generate Column”，若產生成功，系統會產生成功提示語。

10.  在Detail的GridView上除了需要產生欄位外，我們還需要產生新增、修改、刪除、保存以及取消的按鈕，用來控制detail的編輯。我們同樣使用AjaxGridView的自動產生ToolItems功能。

11.  在detail設定處我們必須要記得我們需要將agvDetail的PagingSet中的AllowPage的屬性設定為False。只有這樣設定後，才能帶動Master與Detail的同步。

12.  最後，同樣我們一起來設定AjaxLayout元件，首先，還是需要產生Layout的ToolItems，在2-3中我們已經講到這些按鈕是用來控制AjaxFormView的新增、修改以及刪除功能的。它的產生步驟同2-3的Step 9這裡我們就不重覆説明了。

13.  接著我們設定Layout中填充顯示View對應元件的屬性。我們將View屬性設定為agvView

14.  往下我們設定Master的顯示元件，同2-3的Step 11，我們打開Masters屬性的集合編輯器，添加一個AjaxFormView1同時將title設定為訂單主檔。

15.  接下來的這個步驟同單檔設計的不同，我們需要設定Detail的信息。在AjaxLayout中提供了Details的屬性，它用於設定需要顯示的detail，以及當前顯示的detail的頁籤名稱。添加方式可通過選中Details屬性後，點擊右側的按鈕，打開集合編輯器。加入一個屬性項後，設定ControlId為agvDetail表示detail處顯示agvDetail這個Detail元件，同時在這個元件所在的頁籤標題顯示為“訂單明細”。

16.  最後，由於我們是通過WMasterDetail的Wizard模板產生，因此在Code部分，會有一些多餘的程式。現在大家將WebNavigator1_Command(object sender, CommandEventArgs e)、wfvMaster_PageIndexChanged(object sender, EventArgs e)、wfvMaster_AfterInsertLocate(object sender, EventArgs e)以及wfvMaster_Canceled(object sender, EventArgs e)程式刪除。

17.  設計到這裡，實際上我們已經完成了多檔的設計，接著我們一起來看一下瀏覽的效果。

18.  透過上面的圖片，我們可以發現圖片上標註了2個重點，這2點是需要為大家解釋説明的部分。

①在產生的網頁的左上角有著兩個類似於標題説明的區域，這兩個標題説明我們可以通過在AjaxLayout的Title以及View Title來進行説明。現在我們可以將Title修改為“訂單管理”；將View Title設定為“訂單一覽”

② 現在在瀏覽狀態下，我們會發現使用默認的元件寬度，左側的View部分寬度過寬。如果我們需要調整，只需找到View所對應的AjaxGridView -- agvView。我們將它的GridSet屬性中的Width修改為300。這樣就能夠調整左側寬度了。

修改上面的兩處後，我們一起來看一下現在瀏覽出的結果。現在表單的Caption已對應作了變動，同時它的寬度也進行了相應的調整。

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