AjaxControlToolkit34個伺服器端控制元件(轉載)

廳一一發表於2008-09-12

1. Accordion
【功能概述】
Accordion可以讓你設計多個panel 並且一次只顯示一個Panel .在頁面上的顯示效果就像是使用了多個CollapsiblePanels只不過每一次只展開其中一個CollapsiblePanel.Accordion控制元件內部包含了若干個AccordionPane,每一個AccordionPane的template裡包括了對其Header和Content的定義。我們可以在後臺程式碼中通過SelectedIndex屬性取得當前展開的哪一個Panel,還可以控制哪一個Panel展開。

經常可以見到類似的效果,比如QQ、Msn好友分類的摺疊效果。

【細節】

(1)不要把Accordion放在Table中而又把 FadeTransitions 設定為True,這將引起佈局混亂
    (2) 在AccordionPane模板中的Content中可以定義任何Web元素,表現的就像一個容器

(3) AccordionPane內容模板自動改變大小有三種AutoSize modes :None(推薦) Limit  Fill

(4) $find(`ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender`)這裡找到的是Behavior.什麼是Behavior呢?在Asp.net Ajax框架中包含一組動作並完成一個功能. Accordion的一個Behavior就是淡入淡出.

找到Behavior的引用,behavior.set_FadeTransitions()  behavior.get_FadeTransitions()的方式來實現具體某一個Behavior的訪問和修改.

var behavior = $find(`ctl00_SampleContent_MyAccordion_AccordionExtender`);這種寫法是不好的,我們在自動測試的頁面中發現了更好的寫法: var behavior=$find(“<%= MyAccordion.ClientID %>_AccordionExtender”);

 

【程式碼示意】

      <script language=”javascript” type=”text/javascript”>
            function toggleFade()  {
                var behavior = $find(`ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender`);
                if (behavior)  {       
                    behavior.set_FadeTransitions(!behavior.get_FadeTransitions());
                }
            }
            function changeAutoSize()  {
                var behavior = $find(`ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender`);
                var ctrl = $get(`autosize`);    //這裡找的是下拉選單控制元件,不是Behavior
                if (behavior)  {
                    var size = `None`;   // 這裡順便看看怎麼使用Select
                    switch (ctrl.selectedIndex)  {
                        case 0 :
                            behavior.get_element().style.height = `auto`;
                            size = AjaxControlToolkit.AutoSize.None;
                            break;

                        case 1 :
                            behavior.get_element().style.height = `400px`;
                            size = AjaxControlToolkit.AutoSize.Fill;
                            break;
                        case 2 :
                            behavior.get_element().style.height = `400px`;
                            size = AjaxControlToolkit.AutoSize.Limit;
                            break;
                    }
                    behavior.set_AutoSize(size);
                }
                if (document.focus)  {
                    document.focus();
                }
            }
        </script>

 

 <ajaxToolkit:Accordion ID=”MyAccordion” runat=”server” SelectedIndex=”0″ HeaderCssClass=”accordionHeader”
            ContentCssClass=”accordionContent” FadeTransitions=”false” FramesPerSecond=”40″
            TransitionDuration=”250″ AutoSize=”None”>
            <Panes>
                <ajaxToolkit:AccordionPane ID=”AccordionPane1″ runat=”server”>
                    <Header>
                        <a href=”” onclick=”return false;” class=”accordionLink”>1. Accordion</a></Header>
                    <Content>
                    </Content>
                </ajaxToolkit:AccordionPane>
            </Panes>
        </ajaxToolkit:Accordion>

 

2. AlwaysVisibleControl
【功能概述】
 AlwaysVisibleControl 是一個簡單的擴充套件控制元件可以讓一部分內容浮動在頁面上,當滾動頁面或者改變瀏覽器大小時總是可見的。它可以擴充套件任意一個Asp.net 控制元件,並可按照要求設定水平 豎直方向上的相對距離.

最多的應用是線上閱讀的目錄和不勝其煩的浮動小廣告。

 

【細節】

(1)   避免控制元件閃爍,要擴充套件的控制元件要使用absolutely position

(2)   HorizontalSide=”Center” VerticalSide=”Top” 使用這個方式控制浮動的位置

(3)   Var label = ocument.getElementById(`ctl00_SampleContent_currentTime`);這行程式碼我們可以使用更簡單的方法:
     var label = $get(`ctl00_SampleContent_currentTime`);

【程式碼示意】

 程式碼示意:
    <cc1:AlwaysVisibleControlExtender ID=”AlwaysVisibleControlExtender1″ HorizontalSide=”Center” VerticalSide=”Top”  TargetControlID=”Panel1″ runat=”server”>

 

 

3. Animation
【功能概述】

28個控制元件種效果最酷的!顧名思義實現動畫效果。它是一個插入式,可擴充套件的框架可以方便的為你的頁面新增動畫效果。

【細節】

請參考頁面程式碼閱讀下面的細節內容:

(1)Sys.UI.DomElement.getLocation(b) 取得控制元件位置的函式,常用!!!
     (2)動畫分為兩種:Animation Action 後者的強大讓我很興奮
     (3)<Sequence>  </Sequence> 順序執行的動畫指令碼
     (4)<Parallel>  <Parallel >  併發執行的動畫指令碼
     (5)【Action】 <StyleAction AnimationTarget=”btnCloseParent” Attribute=”opacity” value=”0″ /> 控制目標元素外觀樣式,屬性–值的格式修改,一個元素可以應用多個StyleAction
     (6)【Action】<EnableAction AnimationTarget=”ctl00_ContentPlaceHolder1_btnInfo” Enabled=”true” /> 控制元件是否可用使用的方式跟上面是一樣的,當前控制元件可省略AnimationTarget
   (7)【Action】 <ScriptAction Script=”Cover($get(`ctl00_ContentPlaceHolder1_btnInfo`), $get(`flyout`));” />執行一段指令碼的Action          
    (8) 【Action】 <HideAction />隱藏目標的控制元件
    (9) 【Action】<OpacityAction AnimationTarget=”info” Opacity=”0″ /> 設定透明度的Action
   (10)【Animation】 <FadeIn AnimationTarget=”info” Duration=”.2″/>       <FadeOut /> 淡入淡出   
  (11)【Animation】<Scale ScaleFactor=”0.05″ Center=”true” ScaleFont=”true” FontUnit=”px” />    控制目標元素的大小但是注意:If scaleFont is true, the size of the font will also scale with the element.  If center is true, then the element`s center will not move as it is scaled. It is important to note that the target must be positioned (i.e. absolutely) so that settings its top/left properties will change its location in order for center to have an effect.
     (12) 【Animation】    <Pulse Duration=”.1″ /> 脈搏跳動效果         
     (13)【Animation】 <Color Duration=”.2″ StartValue=”#FFFFFF” EndValue=”#FF0000″ Property=”style” PropertyKey=”color” />  顏色漸變效果,設定起始結束顏色就可以
     (14)  【Animation】 <Resize Width=”260″ Height=”280″ />改變元素的大小Action

(15)動畫效果是在使用者某一個動作發生的時候觸發,觸發的時機包括:OnLoad  OnClick  OnMouseOver OnMouseOut OnHoverOver OnHoverOut

正式版的頁面檔案為動畫指令碼新增了註釋更加清晰易懂.上面列出的是常用的一些動畫效果,全部資料參見Anmation Reference。

仔細閱讀Animation的頁面程式碼,其實我們已經提前觸控到了Xaml的程式設計風格。Asp.net Ajax之後的下一代WEB介面是WPF/E,WPF/E現在支援的是”javascript+Xaml” 還不支援”C# + Xaml”。

下一代的WEB UI會是怎樣的?下一個版本的Asp.net 會怎樣安排Ajax的位置?WPF/E會不會被整合在新版本的Asp.net中呢?期待中……

 

【示意程式碼】

程式碼示意:
   <ajaxToolkit:AnimationExtender ID=”ae”
  runat=”server” TargetControlID=”ctrl”>
    <Animations>
        <OnLoad>   </OnLoad>
        <OnClick>   </OnClick>
        <OnMouseOver>   </OnMouseOver>
        <OnMouseOut>   </OnMouseOut>
        <OnHoverOver>   </OnHoverOver>
        <OnHoverOut>   </OnHoverOut>
    </Animations>
</ajaxToolkit:AnimationExtender>

 

4. AutoComplete  NEW!!!
【功能概述】

AutoComplete控制元件是對Asp.net文字框控制元件的擴充套件,當使用者詞彙前面的字母時以彈出區域的形式給出備選詞。這個功能的完成依賴於特定的Web Service。

在正式版的Ajax Control Toolkit中看到自動完成擴充套件控制元件有一種感覺:它終於出現在了它應該出現的地方。之前AutoComplete控制元件是在CTP版本中以核心元件的形式出現的,這個功能極為明確的控制元件被歸類到核心元件,我還是比較迷惑。正式版中它終於成為了一個擴充套件控制元件。

Google的自動完成功能,新浪 網易等信箱的收件人自動完成功能是這個功能的成功應用。

【細節】
    從Atlas的版本開始,AutoComplete的使用方法就沒有太大的改變,只要注意:

(1)呼叫的Web Service方法簽名有要求:
           [WebMethod]
           public string[] GetCompletionList(string prefixText, int count) { … }
     (2)MinimumPrefixLength最短字首字元數,就是說你至少要鍵入幾個字元才會出現提示

 

5. Calendar NEW!!!
【功能概述】

Calendar同樣是對文字框的擴充套件,當點選文字框的時候彈出日期選擇選項。現在的版本提供的功能已經和WinForm中的日期控制元件一樣,可以通過點選日期選擇,點選箭頭在年月之間切換。

【細節】
         (1)同樣是對文字框的擴充套件,文字框獲得焦點就會出現日期選擇,樣式是可以自定義的
         (2)雖然一定是對文字框的擴充套件但是我們還是可以指定彈出按鈕PopupButtonID,一旦這個值設定了,文字框獲得焦點也不會彈出日期選擇
         (3)不需要把它放在UpdatePanel中

 

6. CascadingDropDown
【功能概述】

CascadingDropDown 控制元件是對ASP.NET DropDownList control的擴充套件,實現對一個DropDownList操作時其它DropDownList發生相應的變化。這個功能的實現依賴於Web Service。

【細節】

(1)如果使用Web service 方法簽名必須符合下面的形式:
                [WebMethod]
                public CascadingDropDownNameValue[] GetDropDownContents(
                string knownCategoryValues, string category){…}

(2)在閱讀程式碼的時候請關注:Category屬性。官方說法The name of the category this DropDownList represents 實開啟~/App_Data/CarsService.xml你就發現這是Xml的元素標籤。從這個角度我們就解決了為什麼聯動,即聯動的本質;同時也明白了呼叫Service的引數約定。
【示意程式碼】

      <ajaxToolkit:CascadingDropDown ID=”CascadingDropDown1″ runat=”server” TargetControlID=”DropDownList1″ Category=”Make”  PromptText=”Please select a make”  LoadingText=”[Loading makes ]”  ServicePath=”CarsService.asmx” ServiceMethod=”GetDropDownContents”/>
                <ajaxToolkit:CascadingDropDown ID=”CascadingDropDown2″ runat=”server” TargetControlID=”DropDownList2″ Category=”Model” PromptText=”Please select a model” LoadingText=”[Loading models ]” ServiceMethod=”GetDropDownContentsPageMethod” ParentControlID=”DropDownList1″/>
                <ajaxToolkit:CascadingDropDown ID=”CascadingDropDown3″ runat=”server” TargetControlID=”DropDownList3″ Category=”Color” PromptText=”Please select a color” LoadingText=”[Loading colors ]” ServicePath=”~/CascadingDropDown/CarsService.asmx” ServiceMethod=”GetDropDownContents” ParentControlID=”DropDownList2″/>
  

另外頁面上還有一段定義UpdatePanel的程式碼很典型,可以作為參考:

  <asp:UpdatePanel ID=”UpdatePanel1″ runat=”server” UpdateMode=”Conditional” RenderMode=”inline”>
            <ContentTemplate>
                <asp:Label ID=”Label1″ runat=”server” Text=”[No response provided yet]” />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID=”DropDownList3″ EventName=”SelectedIndexChanged” />
            </Triggers>
        </asp:UpdatePanel>

7. CollapsiblePanel
【功能概述】

這個控制元件幾乎在每一個頁面上都出現了。它是非常靈活的一個控制元件,可以擴充套件任何ASP.NET Panel control。在頁面上輕鬆實現展開收縮效果。這種效果我們最熟悉的恐怕就是XP的檔案工作列了。

【細節】

(1)    CollapsiblePanel 預設認為使用了 標準 CSS box model 早期的瀏覽器要!DOCTYPE 中設定頁面為自適應方式提交資料rendered in IE`s standards-compliant mode.

(2)    可以自動展開 自動收縮Autoexpand=”true” AutoCollapse=”true”但是這兩個本身是互斥的不能同時為True;如果設定了這兩個屬性其中一個為True就不要在設定 Collapsed=”True”,這樣就沒有意義了。

(3)    TextLabelID=”Label1″這個屬性有什麼深意高階的操作麼?我還在研究。。。

 程式碼示意:
   <ajaxToolkit:CollapsiblePanelExtender ID=”cpe” runat=”Server”
    TargetControlID=”Panel1″
    CollapsedSize=”0″
    ExpandedSize=”300″
    Collapsed=”True”
    ExpandControlID=”LinkButton1″
    CollapseControlID=”LinkButton1″
    AutoCollapse=”False”
    AutoExpand=”False”
    ScrollContents=”True”
    TextLabelID=”Label1″
    CollapsedText=”Show Details “
    OpenedText=”Hide Details”
    ImageControlID=”Image1″
    ExpandedImage=”~/images/collapse.jpg”
    CollapsedImage=”~/images/expand.jpg”
    ExpandDirection=”Height”/>

 

8. ConfirmButton


【功能概述】

這個控制元件是對Button和繼承了Button的控制元件的擴充套件,它可以捕捉到使用者點選了對話方塊中的“是”“否”;如果是“是”就繼續執行後面的程式碼,反之就停止執行它預設的提交行為。

【細節】

(1) 要擴充套件的LinkButton Button 以及ConfirmButtonExtender都要放在updatepanel裡面
       如果是放在外面,點選“確定”或者“取消”之後還是會導致頁面重新整理!

(2)更簡單的方法:

  this.Button1.Attributes[“onclick”]=”javascript:return confirm(`確定要停止下載麼?`);”;

(3) 如果是需要伺服器端獲取使用者選擇,還是使用模式彈出吧

9.DragPanel
 【功能概述】

DragPanel extender可以輕鬆的讓控制元件 “draggability”.DragPanel 擴充套件的目標是任意 ASP.NET Panel .你可以設定拖動行為的細節,比如哪裡是類似於標題欄一樣的區域。

【細節】

(1)   TargetControlID 要拖動的控制元件

(2)    DragHandleID   拖動的標題欄所在的ControlID 示例程式碼中: panel6包含panel7(標題) panel8(內容)擴充套件的物件是panel6

(3)   是不是發現這段JS程式碼了呢?如果去掉這段程式碼,圖到頁面邊緣的時候是不正常的,它自己跑回原來位置了 ?
        <script type=”text/javascript”>
        // The following snippet works around a problem where FloatingBehavior
        // doesn`t allow drops outside the “content area” of the page – where “content
        // area” is a little unusual for our sample web pages due to their use of CSS
        // for layout.
        function setBodyHeightToContentHeight() {
            document.body.style.height = Math.max(document.documentElement.scrollHeight, document.body.scrollHeight)+”px”;
        }
        setBodyHeightToContentHeight();
        $addHandler(window, “resize”, setBodyHeightToContentHeight);   
    </script>

 

【示意程式碼】

程式碼示意
 <ajaxToolkit:DragPanelExtender ID=”DPE1″ runat=”server”
    TargetControlID=”Panel3″
    DragHandleID=”Panel4″ />

 

10. DropDown
【功能概述】

  DropDown 同樣是一個 ASP.NET AJAX extender 可以對任何 ASP.NET control 進行擴充套件實現 SharePoint-style drop-down menu效果。彈出的只不過是其它的panel或者控制元件而已。    在IE瀏覽器中下拉選單總是在最前面的,的確是影響頁面效果,這個控制元件的出現可以解決這一問題.這隨時隨地的彈出視窗成為WEB 2.0網站的標誌性建築,彈出的東西也越來越豐富。

【細節】

(1)TargetControlID要在什麼控制元件上實現擴充套件
    (2)DropDownControlID彈出來什麼

(3) 示例中是對一個Label進行的擴充套件,我試著擴充套件TextBox效果更好!
【示意程式碼】

 程式碼示意:
  <asp:Panel ID=”DropPanel” runat=”server” CssClass=”ContextMenuPanel” Style=”display: none;
            visibility: hidden;”>
             <asp:LinkButton runat=”server” ID=”Option1″ Text=”Option 1″ CssClass=”ContextMenuItem”
                OnClick=”OnSelect” />
            <asp:LinkButton runat=”server” ID=”Option2″ Text=”Option 2″ CssClass=”ContextMenuItem”
                OnClick=”OnSelect” />
            <asp:LinkButton runat=”server” ID=”Option3″ Text=”Option 3 (Click Me!)” CssClass=”ContextMenuItem”
                OnClick=”OnSelect” />
        </asp:Panel>
        <cc1:DropDownExtender runat=”server” ID=”DDE” TargetControlID=”TextLabel”
            DropDownControlID=”DropPanel” />

還有一段程式碼有很多可以學習的地方:

程式碼示意:
  <asp:UpdatePanel id=”Update” runat=”server”>
            <ContentTemplate>
                <asp:Label id=”lblSelection” runat=”server” Style=”padding: 5px;” />
            </ContentTemplate>
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID=”Option1″ EventName=”Click” />
                <asp:AsyncPostBackTrigger ControlID=”Option2″ EventName=”Click” />
                <asp:AsyncPostBackTrigger ControlID=”Option3″ EventName=”Click” />
            </Triggers>
        </asp:UpdatePanel>
        <ajaxToolkit:UpdatePanelAnimationExtender ID=”UpdateAnimation” runat=”server” TargetControlID=”Update” BehaviorID=”Highlight”>
            <Animations>
                <OnUpdated>
                    <Sequence>
                        <ScriptAction Script=”$find(`Highlight`)._onUpdated._animation._animations[1].set_target($get(`ctl00_ContentPlaceHolder1_lblSelection`));” />
                        <Color Duration=”.5″ StartValue=”#FFFF90″ EndValue=”#FFFFFF” Property=”style” PropertyKey=”backgroundColor” />
                    </Sequence>
                </OnUpdated>
            </Animations>
        </ajaxToolkit:UpdatePanelAnimationExtender>

 

11. DropShadow
【功能概述】

陰影效果
 【 細節】

(1)   Width 單位:px  預設5px

(2)   Opacity  不透明度0-1.0 預設.5

【示意程式碼】

  程式碼示意:
    <ajaxToolkit:DropShadowExtender ID=”dse” runat=”server”
        TargetControlID=”Panel1″
        Opacity=”.8″
        Rounded=”true”
        TrackPosition=”true” />

 

12. DynamicPopulate
【功能概述】

能實用Web Service或頁面方法來動態的替換控制元件的內容。呼叫的方法返回的是一個Html的字串,作為目標元素的子節點插入其中。
【 細節】

 (1)ClearContentsDuringUpdate  替換之前先清除以前的內容(預設True)
  (2)PopulateTriggerControlID 觸發器繫結的控制元件 單擊時觸發
  (3)ContextKey傳遞給Web Service的隨機字串
  (4) Web Service方法簽名必須符合下面的形式:
                [WebMethod]
                string DynamicPopulateMethod(string contextKey)
                {…}
                Note you can replace “DynamicPopulateMethod” with a naming of your choice, but the return
                type and parameter name and type must exactly match, including case.

(5) 我們非常欣慰的一點就是BehaviorID=”dp1″,這種用法是我所期望的。

(6) CustomScript 怎麼用呢??This script must evaluate to a string value. ??

【示意程式碼】

程式碼示意:
<ajaxToolkit:DynamicPopulateExtender ID=”dp” runat=”server”
    TargetControlID=”Panel1″
    ClearContentsDuringUpdate=”true”
    PopulateTriggerControlID=”Label1″
    ServiceMethod=”GetHtml”
    UpdatingCssClass=”dynamicPopulate_Updating” />
             

程式碼示意2:
<asp:Panel ID=”Panel1″ runat=”server” CssClass=”dynamicPopulate_Normal”>
        </asp:Panel>  //要擴充套件的panel
<ajaxToolkit:DynamicPopulateExtender ID=”dp” BehaviorID=”dp1″ runat=”server”
          ClearContentsDuringUpdate=”true”
          PopulateTriggerControlID=”Label1″
          TargetControlID=”Panel1″
          ServiceMethod=”GetHtml”
          UpdatingCssClass=”dynamicPopulate_Updating”>
    </ajaxToolkit:DynamicPopulateExtender>
    <script runat=”server”>

    [System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static string GetHtml(string contextKey)  {
        // a little pause to mimic a latent call.
        //
        System.Threading.Thread.Sleep(250);

        string value = “”;
        if (contextKey == “U”)  {
            value = DateTime.UtcNow.ToString();
        } else  {
            value = String.Format(“{0:” + contextKey + “}”, DateTime.Now);
        }

        return String.Format(“<span style=`font-family:courier new;font-weight:bold;`>{0}</span>”, value);
    }

</script>

<asp:Content ID=”Content1″ ContentPlaceHolderID=”ContentPlaceHolder1″ Runat=”Server”>
<script  type=”text/javascript”>

    function updateDateKey(value)  {

        var behavior = $find(`dp1`); //這樣使用BehaviorID可是方便多了
        if (behavior)  {
            behavior.populate(value);// 內部實現呼叫了Service
        }

    }

    Sys.Application.add_load(function() {updateDateKey(`G`);});  //頁面載入時要執行的指令碼!

</script>

13. FilteredTextBox

【功能概述】

FilteredTextBox擴充套件控制元件用來阻止使用者在文字框輸入無效字元 。由於這種效果的實現是依賴於deactivating JavaScript(怎麼翻譯呢?),所以不要期望資料會傳送到伺服器端進行校驗。

【細節】

(1)過濾條件Numbers LowercaseLetters UppercaseLetters   Custom

 (2)過濾條件也可以是Custom的組合 FilterType=”Custom, Numbers”
    (3)ValidChars=”+-=/*().” Custom要定義這樣的有效字串

(4)這個控制元件我認為是聊勝於無,我們要把允許輸入的資料進行列舉,太難了。事實上,這個控制元件在任何狀態下都是接受中文的。如果使用正規表示式情形或許好些。看它的實現程式碼還有進一步改進的可能,學習研究中……

【示意程式碼】

示意程式碼:
<ajaxToolkit:FilteredTextBoxExtender ID=”ftbe” runat=”server”
        TargetControlID=”TextBox3″        
        FilterType=”Custom, Numbers”
        ValidChars=”+-=/*().” />

在該控制元件的實現程式碼中我發現了這樣一段,這可能是一個突破口:

特殊鍵排除程式碼:
<   var scanCode;
                        if (evt.rawEvent.keyIdentifier) {
           
            // Safari
            // Note (Garbin): used the underlying rawEvent insted of the DomEvent instance.
            if (evt.rawEvent.ctrlKey || evt.rawEvent.altKey || evt.rawEvent.metaKey) {
                return;
            }
           
            if (evt.rawEvent.keyIdentifier.substring(0,2) != “U+”) {
                return;
            }
           
            scanCode = evt.rawEvent.charCode;
           
            if (scanCode == 63272 /* Delete */) {
                return;
            }
        } 
        else {
            scanCode = evt.charCode;
        } 
           
        if (scanCode && scanCode >= 0x20 /* space */) {               
            var c = String.fromCharCode(scanCode);                       
           
            if(!this._processKey(c)) {
                evt.preventDefault();
            }
        }
    }
   

 

14. HoverMenu
【功能概述】

HoverMenu控制元件可以擴充套件任何 ASP.NET WebControl, 同時將把附加的顯示內容關聯到該控制元件上,當使用者移動滑鼠到該控制元件的時候附加的內容將顯示出來。

【細節】

(1)   PopupControlID要彈出來什麼
 (2)PopupPostion 在哪裡彈出來Left (Default), Right, Top, Bottom, Center.
 (3)OffsetX/OffsetY 彈出項與源控制元件的距離
(4) PopDelay 彈出延時顯示 單位milliseconds. Default is 100.

【程式碼示意】

程式碼示意:
<ajaxToolkit:HoverMenuExtender ID=”hme2″ runat=”Server”
    TargetControlID=”Panel9″
    HoverCssClass=”popupHover”
    PopupControlID=”PopupMenu”
    PopupPosition=”Left”
    OffsetX=”0″
    OffsetY=”0″
    PopDelay=”50″ />

示例頁面上還有一個小細節:

HttpUtility.HtmlEncode()使用 HttpUtility.HtmlEncode 將危險的符號轉換為它們的 HTML 表示形式。

程式碼示意:
      <asp:Label Font-Bold=”true” ID=”Label1″ runat=”server” Text=`<%# HttpUtility.HtmlEncode(Convert.ToString(Eval(“Title”))) %>`></asp:Label></td>
     <asp:Label ID=”Label2″ runat=”server” Text=`<%# HttpUtility.HtmlEncode(Convert.ToString(Eval(“Description”))) %>`></asp:Label></td>
                 <asp:Label ID=”Label3″ runat=”server” Text=`<%# Eval(“Priority”) %>`></asp:Label>

 

15. MaskedEdit NEW!!!
【功能概述】

MaskedEdit 控制元件是對TextBox control的擴充套件.使用者輸入會在客戶端進行驗證。在示例頁面中,我感覺實際效果並不是太好所以沒有深入學習,不多說了。

16. ModalPopup
【功能概述】

 ModalPopup 擴充套件控制元件允許在頁面上模式彈出內容並阻止使用者和頁面上其他區域的互動。模式彈出區域的樣式都是可以自定義的。 使用者可以在模式彈出框選擇OK/Cancel,對使用者選擇的處理方式有兩種:使用客戶端指令碼或者PostBack到伺服器端。這樣我們就得到了使用者的選擇結果!

【細節】

(1)   看下面的程式碼可以看到執行客戶端指令碼的方法。

(2)   應該說這個控制元件是提供了一個模式彈出對話方塊的模板

(3)   在正式版以前的所有版本,這個控制元件在Opear瀏覽器中都是不正常的。正式版已經修正這個BUG,現在正在比較學習兩個版本的原始碼,看看問題的原因和解決方法是什麼。

【示意程式碼】

程式碼示意:
  <asp:Panel ID=”Panel2″ runat=”server” CssClass=”modalPopup” style=”display:none”>
        <p>
            <asp:Label ID=”Label1″ runat=”server” BackColor=”Blue” ForeColor=”White” Style=”position: relative”
                Text=”資訊提示”></asp:Label>&nbsp;</p>
        <p >確定要刪除當前下載的任務麼?</p>
        <p style=”text-align:center;”>
        <asp:Button ID=”Button1″ runat=”server” Text=”OK” ></asp:Button>
        <asp:Button ID=”Button2″ runat=”server” Text=”Cancel”></asp:Button>
        </p>
    </asp:Panel>
    <ajaxToolkit:ModalPopupExtender ID=”ModalPopupExtender” runat=”server” TargetControlID=”LinkButton1″
    PopupControlID=”Panel2″ BackgroundCssClass=”modalBackground” DropShadow=”true”
    OkControlID=”Button1″ OnOkScript=”onOk()” CancelControlID=”CancelButton” />

 

17. MutuallyExclusiveCheckBox
【功能概述】

互斥核取方塊就像RadioButton一樣,應用的場景是:“a number of choices are available but only one can be chosen”
 【細節】

 (1)Key屬性用來分組就像RdiolistGroup一樣
                (2)argetControlID用來繫結已有的CheckBox

【程式碼示意】
               <ajaxToolkit:MutuallyExclusiveCheckboxExtender runat=”server”
    ID=”MustHaveGuestBedroomCheckBoxEx”
    TargetControlID=”MustHaveGuestBedroomCheckBox”
    Key=”GuestBedroomCheckBoxes” />

18. NoBot
【功能概述】

提供了簡單的Captcha 圖靈測試 用來遮蔽bot/spam 垃圾資訊。是一個反垃圾資訊控制元件。我查了一下資料,我的理解是:比如你點選一個按鈕需要一秒鐘的時間,而這一秒鐘的時間你不可能再做其他的操作比如再點一次;這樣區分出了人和機器。避免機器人自動點選 註冊 暴力破解之類的事情
  【 細節】

 (1)OnGenerateChallengeAndResponse 這個屬性是EventHandler<NoBotEventArgs> 呼叫伺服器端的方法,注意方法簽名
                       例如:   protected void CustomChallengeResponse(object sender, NoBotEventArgs e) {……}

【示意程式碼】

 程式碼示意:
    <ajaxToolkit:NoBot
  ID=”NoBot2″
  runat=”server”
  OnGenerateChallengeAndResponse=”CustomChallengeResponse”
  ResponseMinimumDelaySeconds=”2″
  CutoffWindowSeconds=”60″
  CutoffMaximumInstances=”5″ />

19. NumericUpDown
【功能概述】

實現Winform裡面的Updown控制元件,可以自定義最大值最小值增減步長,同時還可以使用值列表或者呼叫Web Service來決定下一個值是什麼。上下按鈕的圖片同樣是可以自定義的。

   【細節】

 (1)普通整數增減
               (2)值列表迴圈顯示比如下面的第二個例子RefValues
                (3)呼叫Web Service的格式:               

<ajaxToolkit:NumericUpDownExtender ID=”NUD1″ runat=”server”
    TargetControlID=”TextBox1″
    Width=”100″
    RefValues=”January;February;March;April”
    TargetButtonDownID=”Button1″
    TargetButtonUpID=”Button2″
    ServiceDownPath=”WebService1.asmx”
    ServiceDownMethod=”PrevValue”
    ServiceUpPath=”WebService1.asmx”
    ServiceUpMethod=”NextValue”
    Tag=”1″ />

(4)上下按鈕如果不需美化就這樣使用:TargetButtonDownID=” ” TargetButtonUpID=” ”

 

【示意程式碼】
程式碼示意:
           <ajaxToolkit:NumericUpDownExtender ID=”NumericUpDownExtender1″ runat=”server”
                    TargetControlID=”TextBox1″ Width=”120″ RefValues=””
                    ServiceDownMethod=”” ServiceUpMethod=”” TargetButtonDownID=”” TargetButtonUpID=”” />
                <ajaxToolkit:NumericUpDownExtender ID=”NumericUpDownExtender2″ runat=”server”
                    TargetControlID=”TextBox2″ Width=”120″ RefValues=”January;February;March;April;May;June;July;August;September;October;November;December”
                    ServiceDownMethod=”” ServiceUpMethod=”” TargetButtonDownID=”” TargetButtonUpID=”” />
                       <ajaxToolkit:NumericUpDownExtender ID=”NumericUpDownExtender4″ runat=”server”
                    TargetControlID=”TextBox4″ Width=”80″ TargetButtonDownID=”img1″
                    TargetButtonUpID=”img2″ RefValues=”” ServiceDownMethod=”” ServiceUpMethod=”” />

20. PagingBulletedList
【功能概述】

PagingBulletedList 擴充套件BulletedList的分頁功能並實現客戶端的排序分頁。這裡提供的分頁是相當靈活的有各種分頁方法供選擇。

   【細節】

 (1)可以控制每頁最多顯示多少條,是否排序
 (2)IndexSize表示index headings 的字元數,如果MaxItemPerPage設定了概屬性被忽略
 (3)MaxItemPerPage分頁每頁最大條數

【示意程式碼】

程式碼示意:
 <ajaxToolkit:PagingBulletedListExtender ID=”PagingBulletedListExtender1″ BehaviorID=”PagingBulletedListBehavior1″ runat=”server”
                    TargetControlID=”BulletedList1″
                    ClientSort=”true”
                    IndexSize=”1″
                    Separator=” – “
                    SelectIndexCssClass=”selectIndex”
                    UnselectIndexCssClass=”unselectIndex” />

21. PasswordStrength
【功能】

驗證密碼強度,微軟Live註冊的時候就是用的這個效果。

【細節】

 StrengthIndicatorType兩種顯示方式:文字提示,進度條提示。

示例中Textbox1 Textbox3都沒有新增TextMode=”Password” 所以在介面上我們可以輸入中文;而且輸入中文很快就達到較高安全度,當然這沒有什麼用處。

【示意程式碼】

程式碼示意:
<ajaxToolkit:PasswordStrength ID=”PasswordStrength1″ runat=”server” DisplayPosition=”RightSide” TargetControlID=”TextBox1″
                    StrengthIndicatorType=”Text” PreferredPasswordLength=”10″ PrefixText=”Strength:”
                    HelpStatusLabelID=”TextBox1_HelpLabel” TextCssClass=”TextIndicator_TextBox1″  TextStrengthDescriptions=”Very Poor;Weak;Average;Strong;Excellent”
                    MinimumNumericCharacters=”0″ MinimumSymbolCharacters=”0″ RequiresUpperAndLowerCaseCharacters=”false”/>
    <ajaxToolkit:PasswordStrength ID=”PasswordStrength2″ runat=”server” DisplayPosition=”RightSide” TargetControlID=”TextBox2″
                    StrengthIndicatorType=”BarIndicator” PreferredPasswordLength=”15″ HelpStatusLabelID=”TextBox2_HelpLabel”
                     BarIndicatorCssClass=”BarIndicator_TextBox2″ BarBorderCssClass=”BarBorder_TextBox2″
                     MinimumNumericCharacters=”1″ MinimumSymbolCharacters=”1″ RequiresUpperAndLowerCaseCharacters=”true” />
    <ajaxToolkit:PasswordStrength ID=”PasswordStrength3″ runat=”server” DisplayPosition=”BelowLeft” TargetControlID=”TextBox3″
                    StrengthIndicatorType=”Text” PreferredPasswordLength=”20″ PrefixText=”Meets Policy? ” TextCssClass=”TextIndicator_TextBox3″
                     MinimumNumericCharacters=”2″ MinimumSymbolCharacters=”2″ RequiresUpperAndLowerCaseCharacters=”true”
                     TextStrengthDescriptions=”Not at all;Very Low compliance;Low Compliance;Average Compliance;Good Compliance;Very High Compliance;Yes”
                     HelpHandleCssClass=”TextIndicator_TextBox3_Handle” HelpHandlePosition=”LeftSide” />

 

 

22.PopupControl
【功能概述】

PopupControl任何控制元件上都可以彈出任何內容,跟HoverMenu功能類似。Popup 視窗一般是放在ASP.NET AJAX UpdatePanel中, 因此它能夠完成伺服器端的處理之後更能新資料

顯示.  Popup Window 可以包含任何內容包括 ASP.NET server controls, HTML elements, etc.

【細節】

(1)TargetControlID – The ID of the control to attach to
                (2)PopupControlID – The ID of the control to display
                (3)CommitProperty -屬性來標識返回的值
                (4) CommitScript -把返回結果值通過指令碼處理,用到CommitProperty

  【程式碼示意】
      <ajaxToolkit:PopupControlExtender  ID=”PopupControlExtender2″ runat=”server” TargetControlID=”MessageTextBox”
      PopupControlID=”Panel2″ CommitProperty=”value” CommitScript=”e.value += ` – do not forget!`;” Position=”Bottom” />

23.Rating
【功能概述】

使用星級表示等級,滑鼠操作;

【細節】

滑鼠移動等級也會變,而你真正要修改還要點選一下;這是延續了WP10裡面等級評定控制元件的傳統,也許這樣設計是真的有道理,我不清除。

【示意程式碼】

  程式碼示意:
   <ajaxToolkit:Rating ID=”ThaiRating” runat=”server”
    CurrentRating=”2″
    MaxRating=”5″
    StarCssClass=”ratingStar”
    WaitingStarCssClass=”savedRatingStar”
    FilledStarCssClass=”filledRatingStar”
    EmptyStarCssClass=”emptyRatingStar”
    OnChanged=”ThaiRating_Changed” />
   

 

 

24.ReorderList
【功能概述】

ReorderList是一個全新的控制元件。它可以實現逐條列出資料並實現互動。使用者簡單的拖拽就可以改變資料的排列順序並更新到資料來源。在本控制元件中如果SortOrderField 屬性設定之後排序將自動完成。

【細節】

(1)繫結資料,拖動資料之後資料將被更新到繫結源
                (2)它不是已有控制元件的擴充套件是全新的伺服器端控制元件,只是它對Ajax行為是敏感的
                (3)重排的實現有兩種方式:CallBack PostBack 前者的發生在頁面上是沒有PostBack的(也就是沒有重新整理頁面)
                (4) 而資料新增或者編輯的時候就必須要使用PostBack來同步伺服器端的資料狀態
                (5)PostbackOnReorder就是針對兩種策略進行選擇
【示意程式碼】

程式碼示意:
   <ajaxToolkit:ReorderList ID=”ReorderList1″ runat=”server”
    DataSourceID=”ObjectDataSource1″
    DragHandleAlignment=”Left”
    ItemInsertLocation=”Beginning”
    DataKeyField=”ItemID”
    SortOrderField=”Priority”
    AllowReorder=”true”>
      <ItemTemplate> </ItemTemplate>
      <ReorderTemplate> </ReorderTemplate>
      <DragHandleTemplate> </DragHandleTemplate>
      <InsertItemTemplate> </InsertItemTemplate>
</ajaxToolkit:ReorderList>

這個控制元件是非常獨立,並且還是適用於表現Buleted的資料,二維資料就無能為例了
            DataSourceID=”ObjectDataSource1″ 這是必須要有的!下面是它的Template框架:

  <ajaxToolkit:ReorderList ID=”ReorderList1″ PostBackOnReorder=”false” runat=”server” DataSourceID=”ObjectDataSource1″ CallbackCssStyle=”callbackStyle”
        DragHandleAlignment=”Left” ItemInsertLocation=”Beginning” DataKeyField=”ItemID” SortOrderField=”Priority”>
        <ItemTemplate></ItemTemplate>
        <EditItemTemplate></EditItemTemplate>
        <ReorderTemplate></ReorderTemplate>
        <DragHandleTemplate> </DragHandleTemplate>
        <InsertItemTemplate> </InsertItemTemplate>
    </ajaxToolkit:ReorderList>

25. ResizableControl
【功能概述】

就像設計狀態一樣可以拖動修改大小,可是有什麼實際的意義麼,放大字型?沒有想到
【 細節】

(1)   HandleCssClass – The name of the CSS class to apply to the resize handle 這個屬性必須要有!

(2)   WEB2.0時代使用者什麼都是可以自定義的??難道是這個原則下的產物麼??不理解

(3)   在前衛的飛鴿網站上我都一直沒有看到關於ResizableControl的應用,期待一個成功的應用

【示意程式碼】

  程式碼示意:
<ajaxToolkit:ResizableControlExtender ID=”RCE” runat=”server”
    TargetControlID=”PanelImage”
    HandleCssClass=”handleImage”
    ResizableCssClass=”resizingImage”
    MinimumWidth=”50″
    MinimumHeight=”20″
    MaximumWidth=”260″
    MaximumHeight=”130″
    OnClientResize=”OnClientResizeImage”
    HandleOffsetX=”3″
    HandleOffsetY=”3″ />
   

26. RoundedCorners
【功能】

控制元件圓角 純粹是控制外觀的了,什麼時候審美疲勞了還要改。據說GUI風格也是N年一輪迴,這讓我想起來了一個27KB的QQ,命令列介面,真的是這樣麼?穿孔紙帶據說是第一代GUI,不會有一天真的回到那個時代吧?
   【細節】

 (1)還有一個非常非常細節的地方:你必須要設定 CssClass=”roundedPanel”要不然不起作用
                (2) Radius設定弧度,預設是5
                (3)只適用於容器 WebControl

       【示意程式碼】

程式碼示意:
              <ajaxToolkit:RoundedCornersExtender ID=”rce” runat=”server”     TargetControlID=”Panel1″     Radius=”6″ />

27. Slider
【功能概述】

實現WinForm中的Slider控制元件效果,新浪論壇用來分頁了,還有的用來調整“時間———-|—-熱度”,創意!
  【細節】

(1)   修改文字框的值也可以影響Slider的狀態

【示意程式碼】

  程式碼示意:
              <asp:TextBox ID=”TextBox1″ runat=”server”></asp:TextBox>                             
    <cc1:SliderExtender ID=”SliderExtender2″ runat=”server”
                                BehaviorID=”Slider2″
                                TargetControlID=”Slider2″
                                BoundControlID=”TextBox1″
                                Orientation=”Horizontal”
                                EnableHandleAnimation=”true”
                                 Minimum=”0″
                                Maximum=”100″
                                />

28. Tabs NEW!!!
Tabs是我認為這一次新增控制元件中最實用的好東東, 在編碼風格上與所有巢狀式的控制元件一樣:
           <ajaxToolkit:TabContainer runat=”server”
        OnClientActiveTabChanged=”ClientFunction”
        Height=”150px”>
    <ajaxToolkit:TabPanel runat=”server”
        HeaderText=”Signature and Bio”
        <ContentTemplate>
            …
        </ContentTemplate>
    />
</ajaxToolkit:TabContainer>
 Demo效果讓我們很容易想到最近改版之後的網頁主頁和新浪主頁 和Accordion比較一下各有千秋,是對經典WinForm的一種繼承。

 

29 .TextBoxWatermark
【功能概述】

對文字框進行擴充套件,文字水印效果。

看了幾十個WEB2.0的網站,沒想到,見到最多的就是這種水印效果,看來很受歡迎。

【示意程式碼】

 程式碼示意:
    <asp:TextBox ID=”TextBox1″ CssClass=”unwatermarked” Width=”150″ runat=”server”></asp:TextBox>
            <cc1:TextBoxWatermarkExtender ID=”TextBoxWatermarkExtender1″ runat=”server” TargetControlID=”TextBox1″ WatermarkText=”請輸入使用者名稱” WatermarkCssClass=”watermarked” />

 

30. ToggleButton
【功能概述】

就是把一個CheckBox的邏輯應用到一個按鈕上,於是就有了雙態按鈕這麼個玩意,有點意思啊

實際上示例頁面並沒有突出這個控制元件功能上的優勢,對這個控制元件的操作引起頁面上資料的更新,這才是CheckBox控制元件封裝成Button的最終原因。
 【示意程式碼】

<asp:CheckBox ID=”CheckBox1″ Checked=”true” Text=”I like ASP.NET” runat=”server”/>
    <cc1:ToggleButtonExtender ID=”ToggleButtonExtender1″ runat=”server” TargetControlID=”CheckBox1″ ImageWidth=”19″
     ImageHeight=”19″ UncheckedImageUrl=”Image/down.gif” CheckedImageUrl=”Image/up.gif” CheckedImageAlternateText=”Check”
     UncheckedImageAlternateText=”UnCheck” />

31.UpdatePanelAnimation
【功能概述】

更新動畫效果,個人認為應用於時間較短的場合,時間長了這個動畫就有點不合適了,畢竟這是一個過渡效果;時間長還是UpdateProgress比較好。

   【細節】

程式碼結構簡單但是要說的東西很多,回頭再說寫專題吧

程式碼示意:
  <ajaxToolkit:UpdatePanelAnimationExtender ID=”ae”
  runat=”server” TargetControlID=”up”>
     <Animations>
        <OnUpdating>   </OnUpdating>
        <OnUpdated>   </OnUpdated>
    </Animations>
</ajaxToolkit:UpdatePanelAnimationExtender>

32. ValidatorCallout
【功能概述】

Windows系統中最常見的氣泡提示,比如你磁碟空間不足的時候。是對資料驗證控制元件的擴充套件,比較實用,頁面效果的確是比以前那個紅色的星號醒目多了!

【細節】

Errormessage是一個開放的屬性,我們可以進行豐富的擴充套件,大膽的想象,讓顯示出來的氣泡更有意義

程式碼示意:
  <asp:RequiredFieldValidator runat=”server” ID=”PNReq” ControlToValidate=”PhoneNumberTextBox” Display=”None” ErrorMessage=”<b>
  Required Field Missing</b><br />A phone number is required.<div style=`margin-top:5px;padding:5px;border:1px solid #e9e9e9;background-color:white;`>
  <b>Other Options:</b><br /><a href=`javascript:alert(&quot;No phone number available in profile.&quot;);`>Extract from Profile</a></div>” />
 
   <ajaxToolkit:ValidatorCalloutExtender runat=”Server” ID=”PNReqE” TargetControlID=”PNReq” HighlightCssClass=”highlight” Width=”350px” />

還有一段:

程式碼示意:
 <asp:RequiredFieldValidator runat=”server” ID=”NReq” ControlToValidate=”NameTextBox” Display=”None” ErrorMessage=”<b>Required Field Missing</b><br />A name is required.” />
        <asp:RequiredFieldValidator runat=”server” ID=”PNReq” ControlToValidate=”PhoneNumberTextBox” Display=”None” ErrorMessage=”<b>Required Field Missing</b><br />A phone number is required.<div style=`margin-top:5px;padding:5px;border:1px solid #e9e9e9;background-color:white;`><b>Other Options:</b><br /><a href=`javascript:alert(&quot;not implemented but you get the idea;)&quot;);`>Extract from Profile</a></div>” />
        <asp:RegularExpressionValidator runat=”server” ID=”PNRegEx” ControlToValidate=”PhoneNumberTextBox” Display=”None” ErrorMessage=”<b>Invalid Field</b><br />Please enter a phone number in the format:<br />(###) ###-####” ValidationExpression=”(((d{3}) ?)|(d{3}-))?d{3}-d{4}” />
        <cc1:ValidatorCalloutExtender runat=”Server” ID=”NReqE” TargetControlID=”NReq” HighlightCssClass=”highlight” />
        <cc1:ValidatorCalloutExtender runat=”Server” ID=”PNReqE” TargetControlID=”PNReq” HighlightCssClass=”highlight” Width=”350px” />
        <cc1:ValidatorCalloutExtender runat=”Server” ID=”PNReqEx” TargetControlID=”PNRegEx” HighlightCssClass=”highlight” />

33. ListSearchExtender
【功能概述】

支援對ListBox or DropDownList的擴充套件通過使用者鍵入的字元對列表中的資料進行過濾,在WinForm中做的更好一些。順便說一下在winform裡面以前在VS6.0的時代我們是怎麼實現這個功能的呢?還記得嗎?Sendmessage函式向ListBox或者Combox傳送Find_Text訊息,很懷舊了

【細節】

1.      PromptText屬性的作用有兩個,一是顯示提示資訊,省的使用者不知道還有這個功能。再者就是即時的顯示使用者輸入的資料。

2.      在Safari中DropDownList擴充套件失效;Opera中後退鍵會被認為要後退一頁!!!

3.      顯然這個控制元件如果還有什麼要說的就是可以設定Prompt資訊的外觀(樣式+位置)

看程式碼:

<ajaxToolkit:ListSearchExtender id=”LSE” runat=”server”
    TargetControlID=”ListBox1″
    PromptText=”Type to search”
    PromptCssClass=”ListSearchExtenderPrompt”
    PromptPosition=”Top” />
34. Slider Show
【功能概述】

在Web2.0時代,部落格是一個標誌,在部落格上掛著的圖片幻燈片同樣成為一個標記。

【細節】

1.首先它是對圖片控制元件的擴充套件,之後的問題就是:我們要把圖片取出來;下面是方法:SlideShowServiceMethod – The webservice method that will be called to supply images. The signature of the method must match this:

·                             [System.Web.Services.WebMethod]

·                             [System.Web.Script.Services.ScriptMethod]

    public AjaxControlToolkit.Slide[] GetSlides() { … }

1.      還要設定的就是Web Service 去圖片的路徑SlideShowServicePath

2.      NextButtonID PlayButtonID PreviousButtonID PlayButtonText StopButtonText

PlayInterval ImageDescriptionLabelID Loop AutoPlay頭腦中想象著任何一個播放器,這些屬性就很容易理解了。

<ajaxToolkit:SlideShowExtender ID=”SlideShowExtender1″ runat=”server”
    TargetControlID=”Image1″
    SlideShowServiceMethod=”GetSlides”
    AutoPlay=”true”
    ImageDescriptionLabelID=”imageLabel1″
    NextButtonID=”nextButton”
    PlayButtonText=”Play”
    StopButtonText=”Stop”
    PreviousButtonID=”prevButton”
    PlayButtonID=”playButton”
    Loop=”true” />

部落格園大道至簡

http://www.cnblogs.com/jams742003/

轉載請註明:部落格園


相關文章