AJAX控制項UpdatePanel使用詳解

最後更新：2018-12-07 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Accordion.aspx.cs" Inherits="AJAX_Accordion" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        body
        {
            color: #000000;
            background-color: #ffffff;
            font-family: Tahoma, 宋體;
            font-size: 14px;
            margin: 0px;
            padding: 0px;
            text-align: center;
        }
        div, form, img, ul, ol, li, dl, dt, dd, p
        {
            border: 0 none;
            margin: 0;
            padding: 0;
            vertical-align: middle;
        }
        h1, h2, h3, h4, h5, h6
        {
            margin: 0;
            padding: 0;
        }
        ul
        {
            list-style-type: none;
            margin: 0;
            padding-left: 2px;
        }
        li
        {
            line-height: 18px;
        }
        a
        {
            color: #000000;
            text-decoration: none;
            font-size: 12px;
        }
        a:hover
        {
            color: #F37114;
            text-decoration: underline;
        }
        .space50
        {
            height: 50px;
        }
        .header
        {
            color: red;
        }
        .content
        {
            color: blue;
        }
        .Accordion
        {
            line-height: 30px;
            text-align: left;
            padding-left: 200px;
        }

    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div class="space50">
    </div>
    <div class="Accordion">
        <%--AJAX控制項管理--%>
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
        <cc1:Accordion ID="Accordion1" runat="server" SelectedIndex="0" FadeTransitions="true"
            TransitionDuration="250" CssClass= "myAccordion" HeaderCssClass="header" ContentCssClass="content" >
            <Panes>
                <cc1:AccordionPane runat="server">
                    <Header>
                        我的諮詢
                    </Header>
                    <Content>
                        自主諮詢記錄
                        <br />
                        心理測評記錄
                        <br />
                        專家分析記錄
                        <br />
                        本人反饋記錄
                    </Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane1" runat="server">
                    <Header>
                        我的活動
                    </Header>
                    <Content>
                        我的主題
                        <br />
                        我的回複
                        <br />
                        我的話題
                        <br />
                        我的評論
                    </Content>
                </cc1:AccordionPane>
                <cc1:AccordionPane ID="AccordionPane2" runat="server">
                    <Header>
                        醫師管理
                    </Header>
                    <Content>
                        好友諮詢師
                        <br />
                        收藏諮詢師
                        <br />
                        預約諮詢師
                        <br />
                        聯絡諮詢師
                    </Content>
                </cc1:AccordionPane>
            </Panes>
        </cc1:Accordion>
    </div>
    </form>
</body>
</html>

================================

運行結果：

我的諮詢自主諮詢記錄
心理測評記錄
專家分析記錄
本人反饋記錄我的活動  醫師管理 說明：是層疊動態管理菜單顯示的效果，很好看的 ============================= 附加屬性對照說明表如下：Accordion是第一個控制項，言歸正傳，正式開始：一．Accordion 是一個可以讓你在你的 Web 頁面方便地開發類似 Outlook 工具列的 ASP.Net AJAX 控制項。它可以使得你的頁面使用者方便地展開或者關閉一系列頁面元素的顯示。它有點類似多個 CollapsiblePanels 控制項的組合。但是在一個時間內，它只能限制你的頁面使用者只能展開其中的一個部分，每一個 Accordion 控制項包括若干個 AccordionPane 控制項，AccordionPane 控制項可以象 Panel 控制項一樣，用來作為其顯示內容的載體。另外，每一個 AccordionPane 又具有 Header 和 Content 部分，分別用於表示它的標題和其中的內容。 Accordion 控制項具有保持其選中狀態的功能，當頁面發生提交的過程後，Accordion 保留其提交前選中的頁面。
它支援以下三種顯示和排版方式：None - Accordion 在其展開或者摺疊過程中，將根據它內部顯示的內容自動尺寸的變化，不受到任何的條件限制。如果將 AutoSize 屬性設定為 None 它將可能造成頁面上的其它元素跟隨 Accordion 的尺寸變化產生向上或者向下的移動。
Limit - 它將使得 Accordion 控制項永遠不能將它的尺寸擴充到規定的高度（Height）屬性之外，如果將 AutoSize 屬性設定為 Limit，可能會造成在某種情況下，它裡面的內容需要通過捲軸來滾動。
Fill - 它將使得 Accordion 控制項永遠都保持在其高度（Height）屬性規定的高度。
Accordion控制項也能夠進行資料繫結，通過DataSource或 DataSourceID屬性指定一個資料來源，然後設定標題資料欄位（HeaderTemplate）和內容資料欄位（ContentTemplate）。Accordion 同樣可以象 DataGrid 一樣進行資料繫結，它同樣可以通過設定 DataSource 屬性和 DataSourceID 屬性，並在 HeaderTemplate 和 ContentTemplate 屬性中設定其綁定的模板即可將其進行資料繫結。上面樣本的 Accordion 將會被初始化成如下代碼。斜體屬性為可選屬性：<ajaxToolkit:Accordion
            ID="MyAccordion"
            runat="Server"
            SelectedIndex="0"
            HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass="accordionHeaderSelected"
            ContentCssClass="accordionContent"
            AutoSize="None"
            FadeTransitions="true"
            TransitionDuration="250"
            FramesPerSecond="40"
            RequireOpenedPane="false"
            SuppressHeaderPostbacks="true">
            <Panes>
            <ajaxToolkit:AccordionPane
            HeaderCssClass="accordionHeader"
            HeaderSelectedCssClass="accordionHeaderSelected"
            ContentCssClass="accordionContent">
            <Header> . . . </Header>
            <Content> . . . </Content>
            </ajaxToolkit:AccordionPane>
            .
            .
            .
            </Panes>
            <HeaderTemplate>...</HeaderTemplate>
            <ContentTemplate>...</ContentTemplate>
            </ajaxToolkit:Accordion>SelectedIndex - 當 Accordion 被初始化的 AccordionPane 頁面 ID
HeaderCssClass - 每一個 AccordionPane 標題的 Css 樣式。在開發中，我們可以在這裡將每一個 AccordionPane 的標題預設 Css 樣式設定與此，另外還可以為每一個 AccordionPane 單獨指定其 Css 樣式。
HeaderSelectedCssClass - 當某一個 AccordionPane 被選中的時候，其標題的 Css 樣式。在開發中，我們可以在這裡將每一個 AccordionPane 的標題預設 Css 樣式設定與此，另外還可以為每一個 AccordionPane 單獨指定其 Css 樣式。
ContentCssClass - 每一個 AccordionPane 內容的 Css 樣式。在開發中，我們可以在這裡將每一個 AccordionPane 的標題預設 Css 樣式設定與此，另外還可以為每一個 AccordionPane 單獨指定其 Css 樣式。
FadeTransitions - 如果設定為 True 那麼在其選中的 AccordionPane 變化時將出現漸層的效果。
TransitionDuration - 用毫秒錶示的漸層效果顯示的時間。
AutoSize - 設定 Accordion 的顯示和排版方式，你可以在上面的概述中找到它的描述。
RequireOpenedPane - 如果設定為 True 將可以避免當前展開的 AccordionPane 被摺疊。
SuppressHeaderPostbacks - 如果設定為 True 將可以避免 AccordionPane 的標題部分被點擊觸發的頁面提交事件。
Panes - AccordionPane 的集合表示
HeaderTemplate - 當採用資料繫結方式時的標題模板
ContentTemplate - 當採用資料繫結方式時的內容範本
DataSource - 資料來源
DataSourceID - 資料來源控制項 ID
Bound To XML:
    <asp:XmlDataSource ID="xml1" runat="server" DataFile="~/App_Data/CarsService.xml" XPath="/CarsService/make" />
    <ajaxToolkit:Accordion id="xmlBound" runat="server" DataSourceID="xml1" FadeTransitions="true"
        HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">
        <HeaderTemplate>
            Header: <%# Eval("name") %>
        </HeaderTemplate>
        <ContentTemplate>
            Pane: <%# Eval("name") %>
        </ContentTemplate>
    </ajaxToolkit:Accordion>Bound to dictionary:
    <ajaxToolkit:Accordion id="dictionaryBound" runat="server"
        HeaderCssClass="accordionHeader" ContentCssClass="accordionContent">
        <HeaderTemplate>
            Header: <%# Eval("Key") %>
        </HeaderTemplate>
        <ContentTemplate>
            Data: <%# Eval("Value") %>
        </ContentTemplate>
    </ajaxToolkit:Accordion>最經用的格式<ajaxToolkit:Accordion runat="server" SelectedIndex="0" HeaderCssClass="accordionHeader"
ContentCssClass="accordionContent" FadeTransitions="false" FramesPerSecond="40"
TransitionDuration="250" AutoSize="None">
<Panes>
<ajaxToolkit:AccordionPane runat="server">
<Header>
<a href="＃" >1. Accordion</a></Header>
<Content>
</Content>
</ajaxToolkit:AccordionPane>
</Panes>
</ajaxToolkit:Accordion>

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More