CollapsiblePanelExtender 應用：控制 master/detail grid 分頁大小

問題

在同一頁面顯示 master/detail 資料表，利用 AJAX Control Toolkit 的 CollapsiblePanelExtender 來展開／隱藏 master 資料表的 GridView 時，希望能依 master GridView 展開／隱藏的狀態來控制 detail GridView 的分頁大小（PageSize）。例如，master GridView 展開時，detail GridView 每頁只顯示 5 筆資料，但若將 master GridView 隱藏起來，detail GridView 每頁就要顯示 15 筆資料。

解法

主要是利用 CollapsiblePanelExtender 的 ClientState 屬性來判斷目前的展開／收合狀態。如果是 "true"，即代表其目前為收合狀態。

步驟

1. 在頁面上各放一個 Panel 控制項，分別命名為 pnlMaster 和 pnlDetail。
2. 從 Toolbox 拖拉兩個 GridView，分別放在 pnlMaster 和 pnlDetail 裡面，各命名為 grdMaster 與 grdDetail，並設定好資料繫結的相關屬性。
3. 從 Toolbox 拖拉兩個 Button 至頁面頂端，各命名為 btnExpand 和 btnCollapse，分別用來當作展開和隱藏 master GridView 的按鈕。
4. 利用 pnlMaster 的智慧標籤為它增加一個 CollapsiblePanelExtender 控制項，並將此控制項命名為  pnlMaster_CollapsiblePanelExtender。操作方法參考下圖：
   
   
   
   
   
5. 設定 pnlMaster_CollapsiblePanelExtender 的下列屬性：
   
   TargetControlID="pnlMaster"
   ExpandControlID="btnExpand"
   CollapseControlID="btnCollapse"
   CollapsedSize="0"
   
   
6. 在 Page.Load 事件中撰寫切換 detail GridView 分頁大小的處理邏輯：

[VB code]

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
    If Page.IsPostBack = False Then
        ViewState("IsCollapsed") = False
    Else
        Dim isCollapsed = False
        Boolean.TryParse(pnlMaster_CollapsiblePanelExtender.ClientState, isCollapsed)
        If isCollapsed <> ViewState("IsCollapsed") Then
            ViewState("IsCollapsed") = isCollapsed
            If isCollapsed Then
                grdDetail.PageSize = 15
                grdDetail.DataBind()
            Else
                grdDetail.PageSize = 5
                grdDetail.DataBind()
            End If
        End If
    End If
End Sub

執行結果

頁面載入時，預設是展開 master GridView：

Master GridView 隱藏時，detail GridView 每頁顯示 15 筆資料：

Note: 這裡是用 ViewState 來記住 CollapsiblePanelExtender 上一次的收合狀態，以研判狀態是否有變化，實際運用時不見得要用這種方法。此外，由於是在伺服器端處理，CollapsiblePanelExtender 的 SuppressPostback 屬性不可為 True，否則切換收合狀態時將不會觸發 postback。