根據第二章的手冊使用Wizard單檔設計完成的WAjaxSingle，它的資料新增修改都是在畫面的同一個頁面上完成的。但仍然有一种客戶需求是將Grid顯示資料而編輯時以浮出框畫面的形式來顯示。這裡我們引入了ExtModalPanel這個元件，下面我們根據2-2种介紹的產生一個單檔畫面來產生一個bProducts，然後將畫面中的AjaxLayout和AjaxFormView刪除。

打開bProducts，首先貼入一個WebFormView，這個FormView是用來編輯及新增資料時使用。將WebFormView的DataSourceID設為Master，LayOutColNum設為2，最後點選WebFormView右上角的小三角中的“重新整理結構描述”。這樣，WebFormView就顯示出資料內容了。

設定AjaxScriptManager的RenderExtShowModelScripts屬性為True。

在Toolbox的AjaxTools標籤下找到ExtModalPanel，並貼入頁面。

設定ExtModalPanel的Height為180px，Width為620px。(Height和Width可以根據需要自行調整)

然後在ExtModalPanel1中貼入一個UpdatePanel，並把WebFormView1貼入UpdatePanel1中。

將AjaxGridView的EditPanelID選為ExtModalPanel1,説明該AjaxGridView的元件將透過ExtModalPanel1內的WebFormView來新增以及修改資料。將Master (WebDataSource)的AutoApply設為False。此處設定為False表示當使用formView修改點選提交後，系統暫存在IIS上，只有點選AjaxGridView的保存按鈕後，系統在會保存到資料庫中。當然，此屬性也可設定為True，在True的情況下，FormView每提交一次就會自動保存到資料庫中。

然後在UpdatePanel1元件的UpdatePanel_Load事件、ExtModalPanel1元件的ExtModalPanel_Submit以及ExtModalPanel_Cancel事件中添加以下3個程式碼：

protected void UpdatePanel1_Load(object sender, EventArgs e)

    {

        this.AjaxGridView1.SetEditMode();

//透過AjaxGridView對WebFormView下達Insert與Update的切換動作

    }

    protected void ExtModalPanel1_Submit(object sender, EventArgs e)

    {

        this.AjaxGridView1.Submit(this.WebFormView1);

        // 讓WebFormView上的資料回存到AjaxGridView中

    }

    protected void ExtModalPanel1_Cancel(object sender, EventArgs e)

    {

        this.AjaxGridView1.Cancel(); //告知AjaxGridView資料已經取消

    }

這些設定完成後，我們需要將AjaxScriptManager中的RenderExtShowModelScripts改爲true，這是當你用到ExtModalPanel就必須設定為True才會有效，但是如果同一個網頁中同時使用了ExtModalPanel與AjaxModalPanel(或是AjaxRefVal及AjaxDateTimePicker)等元件時，又必須將此屬性設為False，才不會讓這兩個Ajax元件的JavaScript產生衝突。修改後，我們保存一下網頁。

最後，我們就可以瀏覽一下效果了。如圖所示：可以自由對AjaxGridView的資料以ExtModalPanel的方式進行新增與修改。

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