細數Ajax Control Toolkit 1.0 正式版32個伺服器端控制項

來源:互聯網
上載者:User
  自Asp.net Ajax正式版發布以來,專註於AjaxControlToolkit,新增4控制項著實有趣且其它28個控制項尚有新收穫和疑問;因之前寫過兩文,[最新版]Asp.net Ajax 編程備忘錄----細數28個伺服器端控制項 [原創]
【Asp.net Ajax RC版】Asp.net Ajax編程備忘錄---- 再說28個伺服器端控制項不敢行複製粘貼之事,著眼變化,總結點滴收穫,成此文。
   [1]Accordion
         1.本身不需要放在UpdatePanel中
         2.  var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');這種寫法是不好的,這個版本還是沒有改進
         但是我們在自動化的測試的頁面中發現了更好的寫法: var behavior=$find("<%= MyAccordion.ClientID %>_AccordionExtender");
[2]AlwaysVisibleControl
          1. var label = document.getElementById('ctl00_SampleContent_currentTime');
             這個寫法還是麻煩var label = $get('ctl00_SampleContent_currentTime');
          2.如果不是要動態顯示時間我們是沒有必要使用UpdatePanel的,做了一個簡單的:
           <asp:Panel ID="Panel1" runat="server"
                        Width="220px" BackColor="White" ForeColor="DarkBlue"
                        BorderWidth="2" BorderStyle="solid" BorderColor="DarkBlue" style="z-index: 1;">
                            <div style="width: 100%; height: 100%; vertical-align: middle; text-align: center;">
                                <p>Current Time:</p>
                                <span id="Span1" runat="server" style="font-size:xx-large;font-weight:bold;line-height:40px;"/>
                            </div>
                    </asp:Panel>
                    <ajaxToolkit:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" runat="server"
                        TargetControlID="Panel1"
                        VerticalSide="Top"
                        VerticalOffset="10"
                        HorizontalSide="Right"
                        HorizontalOffset="10"
                        ScrollEffectDuration=".1" />
[3]Animation
           1.正式版的分頁檔為動畫指令碼添加了注釋更加清晰易懂
           2.翻看Anmation Reference 沒有新添加什麼內容,以前已經詳細講過,不再多言
           3.不需要UpdatePanel
[4]AutoComplete (NEW!)
          1.是對文字框的擴充
          2.調用的Web Service方法簽名有要求:
           [WebMethod]
           public string[] GetCompletionList(string prefixText, int count) { ...
           3.MinimumPrefixLength最短前置詞字元數,就是說你至少要鍵入幾個字元才會出現提示
           4.不需要UpdatePanel
[5]Calendar NEW!
          1.同樣是對文字框的擴充,文字框獲得焦點就會出現日期選擇,樣式是可以自訂的
          2.雖然一定是對文字框的擴充但是我們還是可以指定退出鍵PopupButtonID,一旦這個值設定了,文字框獲得焦點也不會彈出日期選擇
          3.不需要UpdatePanel
 [6]CascadingDropDown
          無甚變化 以前已經說的夠詳細 不過裡面使用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
       這個老經典了,沒有變化;不過有個疑問還是沒有解決:
       TextLabelID="Label1"這個屬性有什麼深意\進階的操作嗎?我沒有發現
        2.不需要UpdatePanel
 [8]ConfirmButton
       因為要動態顯示時間 所以使用了UpdatePanel
       堅持以前的看法,如果是需要伺服器端擷取使用者選擇,還是使用模式彈出吧
 [9]DragPanel
     是不是發現這段代碼了呢?如果去掉這段代碼,圖東到頁面邊緣的時候是不正常的,它自己回來了
        <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>
     2.不需要UpdatePanel
  [10]DropDown
  我做了這樣一個嘗試:對文字框進行擴充,選擇像直接反應在文字框中,效果不錯,看代碼:
  <asp:UpdatePanel ID="ok" runat="server">
         <ContentTemplate>
        <asp:TextBox ID="show" runat="server"></asp: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>
        <ajaxToolkit:DropDownExtender runat="server" ID="DDE"
            TargetControlID="show"
            DropDownControlID="DropPanel" />
        </ContentTemplate>
        </asp:UpdatePanel>
        <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>
  [11]DropShadow 一種說法是:WEB2.0 使用者什麼都可以定義的,包括邊框弧度
  [12]DynamicPopulate 除了調用Web service之外 還可以調用用戶端指令碼的方法,那怎麼調用呢?看了看自動化的測試的代碼,沒有找到頭緒
  CustomScript - The script to invoke instead of calling a Web or Page method. This script must evaluate to a string value.
  [13]FilteredTextBox 已經專門討論過了,並且給出了更好的解決方案
             http://www.cnblogs.com/me-sa/articles/603217.html
[14]HoverMenu 以前的兩片文章已經將細節一一列出,不再多言
[15]MaskedEdit 搞成這樣使用者會用嗎?我是不會在項目中使用的
[16]ModalPopup 現在在Opera裡面也是正常的了,比較了一下代碼,確實做了改進
[17]MutuallyExlcusiveCheckBox Nothing Changed!
[18]NoBot 用作簡單的保護是夠了
[19]NumericUpDown 在頁面上使用還是和WinForm中使用差很多,資料顯示感覺有一點滯後
[20]PagingBulletedList Nothing Changed!
[21]PasswordStreng 微軟Live註冊的時候就是用的這個
[22]PopupControl 看到這個樣本的時候 我不禁一笑 這第一個文字框不就是Calendar麼
[23]Rating 還是有朋友提出異議說是比較喜歡這個玩意
[24]ReorderList Nothing Changed!
[25]ResizableControl 還真有客戶提出這個需求,後來做了個demo 他們自己去掉這裡這個需求
[26]RoundedCorners 你會用代碼實現嗎?還是交給美工?
[27]Slider 新浪用來分頁 有的Web2.0 用來表示熱度
[28]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的網站,沒想到,見到最多的就是這種浮水印效果,最直接的提示 實用價值比較高
 [30]ToggleButton 這個也見識過了,真有人在用,以前過於主觀了
 [31]UpdatePanelAnimation  Noting Changed!
 [32]ValidatorCallout 這個用起來還是很好用的,比起來那些紅色的星號,這個更容易發現,:)
                                                                                                                                       全文完
                                                                                                                                      
相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: 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

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

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

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.