下面我們使用3-1中產生的bProducts網頁來完成AjaxGridView配合ClientQuery的查詢畫面，此查詢畫面將會以浮出畫面的方式完成。

打開bProducts找到ToolItems屬性將原先已經產生的ToolItem全部刪除。此步驟只有在bProducts中使用的AjaxGridView為舊版本時才會執行。辨別版本方法，只需在ToolItems的列表中是否存在btnQuery按鈕。如果不存在，請選擇Remove按鈕刪除所有ToolItem。然後，通過AjaxGridView右上角的“Generate ToolItems”小按鈕重新產生ToolItems

在網頁上添加一個WebClientQuery，將DataSourceID設定為Master。

在WebClientQuery的Columns中設定查詢的欄位，添加查詢欄位如下：

在Page中貼入一個ExtModalPanel，這個元件是用來完成Query浮出框功能的。這裡注意，我們需要將ExtModalPanel的ModalType設定為Query，表示需要給查詢使用。並將其寬度設為300

這裡我們需要注意，由於畫面上會有多個ModalPanel，爲了能夠區分AjaxGridView使用哪個ModalPanel作爲查詢的浮出畫面，我們需要對AjaxGridView的QueryPanelID設定對應的ExtModalPanel。

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

往下，我們在ExtModalPanel中添加一個updatePanel以及一個Panel，其中Panel是用於顯示ClientQuery的查詢欄位的。我們並把Panel的寬度設定為250，高度為70

接著，我們添加ExtModalPanel的事件，在此事件中加入如下程式：

protected void ExtModalPanel2_Submit(object sender, EventArgs e)

    {

        this.AjaxGridView1.Query(WebClientQuery1, Panel1); //將提交的查詢條件會傳給DataSource 並隱藏查詢浮出Panel

    }

然後，我們在UpdatePanel中添加Load事件，如下：

protected void UpdatePanel2_Load(object sender, EventArgs e)

    {

        this.AjaxGridView1.SetQueryState(WebClientQuery1, Panel1); //設定AjaxGridView查詢狀態，當點選查詢按鈕後，將浮出的Panel顯示出來

    }

最後，我們不要忘記在Page_Load的事件裏，添加在!IsPostBack條件外的WebClientQuery1.Show(Panel1);

現在我們就可以一起來瀏覽查詢效果吧，我們通過選擇查詢按鈕，系統自動浮出ClientQuery的查詢條件。通過提交按鈕，我們便可在GridView中顯示所需要的結果了。

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