在過去的Web設計中我們引入了WebRefVal元件最爲開窗選單的元件。在Ajax中我們使用了ExtRefButton元件，以ModalPanel的形式來顯示開窗選單的資料。下面我們就以bFormViewbOrders.aspx為例，來完成使用自定一個GridView: Customers,  選擇Customers之後, 將Address傳給ShipAddress, City傳給送貨城市

1.       首先，在網頁上貼入一個WebDataSource，同時將其命名為wdsCustomers，通過SelectCommand的方式我們取得資料來源。這個作爲ModalPanel顯示出的GridView的資料源。

語法如下：

select Customers.CustomerID,Customers.CompanyName,Customers.Address,Customers.City from Customers

2.       在畫面中添加一個ExtModalPanel、一個UpdatePanel以及一個WebGridView。將WebGridView的WebDataSource設定為wdsCustomers。然後我們點選“重新整理結構描述”將我們GridView顯示的欄位刷新出來。

3.       接著，我們選中GridView右上角打開窗口“編輯資料行“屬性。我們在打開屬性窗口的左上角選擇CommandField->選取。然後點擊加入按鈕，同時將選取按鈕所在的行調整為第一行。點擊確定結束設定。

這裡請注意：由於這裡的WebGridView只做顯示作用，因此我們需要將webGridView的CreateInnerNavigator設定為False。

4.       接著，我們將ExtModalPanel的ModalType設定為RefButton，表示該ModalPanel是配合RefButton進行使用。

5.       我們將UpdatePanel放入ExtModalPanel中，同時將WebGridView放入UpdatePanel中。

6.       現在我們在畫面中貼入ExtRefButton。我們將它的DestinDataSourceID、SourceDataSouceID以及ModalPanelID分別進行設置如下圖，其中DestinDataSourceID表示為目的數據源，即關聯選單之後回傳回來的；SourceDataSourceID為浮出窗口的資料源；ModalPanelID為浮出窗口對應的ModalPanel.

7.       現在我們需要將RefButton選擇返回對應的欄位設置。這裡我們設定ColumnMatch，如下圖。DestField表明回傳到目標欄位，SrcField表示打開視窗中的欄位元，用來提供回傳的欄位。

8.       我們在AjaxFormView的Fields屬性上，找到custmerID對應的Editor屬性，將它設定為RefButton，然後，我們將EditControlId設定為ExtRefButton1。

9.       为了顺利地弹出ExtModalPanel，我们需要将AjaxScriptManager的RenderExtShowModelScript属性设为True。

10.  最後，我們添加ExtModalPanel的Submit方法，以及UpdatePanel的Load方法。添加的程式如下：

    protected void UpdatePanel1_Load(object sender, EventArgs e)

    {

        this.ExtRefButton1.RefButtonShowModal();

    }

    protected void ExtModalPanel1_Submit(object sender, EventArgs e)

    {

        this.ExtRefButton1.RefButtonSubmit();

}

11.   現在我們一起來瀏覽一下效果，在畫面上客戶編號的欄位出現了一個小齒輪的圖標。進入編輯狀態後，我們可以點擊這個按鈕進行關聯選擇。當選會時，城市以及地址會被自動帶出到ajaxFromView上。

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