細數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 這個用起來還是很好用的,比起來那些紅色的星號,這個更容易發現,:)
全文完