在2-1的内容中我們介紹了使用Wizard快速產生一個AjaxGridView+AjaxFormView的單檔，在這一章節中我們將通過Step by Step的方式教大家製作一個Ajax新元件組成的FormView單檔。

1.      使用Wizard的WSingle(ASP.net Web Form Wizard中的Template)製作名為bFormViewProducts的aspx文件並放置在MyWeb的Folder下，在Wizard產生時請注意，請將SupplierID以及CategoryID的RefValNo設定為Suppliers以及Categories。由於在2-1的準備工作中這兩個欄位的ControlType已經設定為RefValBox，因此這裡只需要設定RefValNo

2.      同時，在EEPManager中增加Web的節點為AjaxFormView產品管理

3.      回到bFormViewProducts的設計畫面，將畫面中的WebNavigator以及WebGridView刪除。同時，將Form中的3個WebDataSource的元件的CatchDataSet的屬性設定為true。

4.      接著，我們在畫面上分別貼入AjaxScriptManager、AjaxGridView(View)、AjaxFormView(Master)以及AjaxLayout。

5.      往下，我們設定AjaxFormView數據源，同時產生對應的欄位。首先，我們將AjaxFormView的DataSourceID設定為Master。接著我們選中AjaxFormView，此時在元件的右上角出現了一個小箭頭，點開小箭頭選擇Generate Fields…按鈕。系統會將所有欄位都產生在AjaxFormView的Fields屬性中。由於AjaxFormView在整個Form中起到新增、修改内容的主要界面，因此我們將所有的欄位都產生出來，不做刪除。

請注意，如果在點選Genderate Fields後，VS沒有產生任何提示框，那麽請在方案總管出在設計網頁上右擊滑鼠選擇“檢視元件工具”。在打開的畫面上右擊WebDataSource對應的WebDataSet，選擇”Save”按鈕。最後，記得關閉該網頁並重新打開。

6.      設定完成AjaxFormView後，我們來一起設定作爲View的AjaxGridView。同樣，我們依然需要設定他的DataSrouceID屬性用來表示這個元件顯示的數據源。

7.      AjaxGridView同樣需要設定顯示的欄位，當我們選中AjaxGridView後，打開它右上角的小箭頭，分別我們點擊Generate Columns以及Generate ToolItems用來產生顯示的欄位以及GridView上的工具欄。產生成功後，系統會自動提示產生成功。

8.      由於AjaxGridView只是作爲View的作用，因此不需要顯示出所有的欄位，同時在工具欄中，也不需要顯示出新增、修改、刪除、保存以及取消這些按鈕，因此我們分別打開Columns以及ToolItems的屬性將不需要的内容刪除。

在Columns中我們保留ProductID、ProductName、SupplierID以及CategoryID四個欄位。通過移除按鈕將其他的欄位逐個刪除。

接著，我們將ToolItems中的多餘按鈕刪除，只留下Refresh按鈕。我們打開ToolItems的集合編輯器

9.      完成了上面的兩個資料顯示元件的設定後，最後我們需要設定的是用於控制AjaxGridView以及AjaxFormView顯示位置的元件—AjaxLayout。首先，同AjaxGridView一樣我們需要設定AjaxLayout上的ToolItems，這個ToolItems的作用是用於控制AjaxFromView進入新增修改狀態的。我們一樣選中AjaxLayout此時在它的右上角會出現一個小箭頭，我們打開它後，選擇generate ToolItems。產生成功後，系統同樣會出現提示。

10.  接著設定AjaxLayout需要顯示的View元件ID，此處我們在View屬性中選擇到AjaxGridView1

11.  最後，我們需要設定Masters顯示的位置以及對應的元件ID,其中Title用於設定在顯示此個FormView的頁籤的標題。在畫面中我們可以看到我們可以同時添加多個元件，這個功能的作用是用於當Master的欄位較多的時候，我們通過此功能進行分頁顯示的功能。此功能相當於過去Web元件的MultiView的效果。請注意，此處如果雖然添加多個FormView，但是這些FormView都是綁定同一個資料源。

現在我們通過InfoLogin.aspx瀏覽並登陸，如下圖為我們瀏覽的效果圖：

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