AJAX Control Toolkit：Accordion控制項_範例02

AJAX Control Toolkit：Accordion控制項_範例02
.範例02檢視頁：Accordion控制項_範例02

這篇範例除了進一步介紹Accordion控制項的幾個重要屬性外，也根據dnow文AJAX Control Toolkit：Accordion控制項_範例01，可以知道原型在使用上還是會有問題或改善空間。這篇文章對程式做了一些修正

AJAX Control Toolkit：Accordion控制項

AJAX Control Toolkit：Accordion控制項_範例01
◎名稱： Accordion(包含Accordion和AccordionPane，需同時使用)
◎類型： web控制項
◎功能：像gmail閱讀信箱時可展開、收合的折疊頁
.範例01程式碼：

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
    </ajaxToolkit:ToolkitScriptManager>
    <div>
        <ajaxToolkit:Accordion ID="Accordion1" runat="server">
        <Panes>
            <ajaxToolkit:AccordionPane ID="AccordionPane1" runat="server" HeaderCssClass="AccordionHeader" ContentCssClass="AccordionContent">
            <Header>◎會員註冊---必填欄位</Header>
            <Content>必填欄位放的位置</p>=======</p>111111111</p>222222222</p>33333</Content>
            </ajaxToolkit:AccordionPane>
            
            <ajaxToolkit:AccordionPane ID="AccordionPane2" runat="server" HeaderCssClass="AccordionHeader" ContentCssClass="AccordionContent">
            <Header>◎會員註冊---進階選填</Header>
            <Content>選填欄位放的位置</p>========</p>aaaaaaaaaa</p>bbbb</p>ccccc</Content>
            </ajaxToolkit:AccordionPane>
        </Panes>
        </ajaxToolkit:Accordion>

範例01程式碼說明-

1. 在網頁加入ToolkitScriptManager
2. 把Accordion拖放到網頁中(自動生成行01、行11)
3. 以下因為Accordion本身有bug(詳見dnow文AJAX Control Toolkit中Accordion控制項有bug)，所以後面都要用原始檔檢視畫面來建立標籤和設定部分標籤屬性
4. 用「原始檔」檢視，加入<panes>標籤(行05、行15)，以便放入AccordionPane控制項
5. 在<panes>標籤中插入AccordionPane(自動生成行6)，然後在<ajaxToolkit:AccordionPane >標籤中間手動輸入<header>、<content>標記(行7、行8)
6. 若還要再加一個AccordionPane，就依照上面方式增加，效果如行11以後

.範例01檢視頁：Accordion控制項_範例01

範例01檢視結果-

1. 摺頁效果和CollapsiblePanel控制項不同，Accordion一次只可以有一個AccordionPane可以展開。
2. 版面顏色過於單調，可以透過css來設定Accordion版型。
3. 摺頁效果沒有提示，沒有細看項目及輔助說明文字可能不知道可以點開，可以修改移到上方的游標圖示。
4. 使用Accordion後，panes裡面的東西都不可以用所見所得的方式來設計，可以用加入panel的方式來解決。

AJAX Control Toolkit中Accordion控制項有bug

使用Accordion控制項時出錯，錯誤訊息為
「呈現控制項時發生錯誤-發生未處理的例外狀況
集合已修改；列舉作業可能尚未執行」
畫面如下

仔細研究了一下，發現是因Accordion有二個bug所導致…處理方式如後

AJAX Control Toolkit安裝篇

AJAX Control Toolkit是微軟免費提供的ajax範本、元件控制項工具包
具備功能強大的SDK
一如Visual Studio裡頭的控制項般
AJAX Control Toolkit可以讓我們重複的利用
豬腦爸並非專業it出身
所以就算學了三年了也寫不出半個控制項來
所以這些工具對我來說格外珍貴
有時間的話我會把之前寫的範例拿出來讓大家看些應用面
這篇先介紹如何安裝