主頁(yè) > 知識(shí)庫(kù) > Ajax Control Toolkit 34個(gè)服務(wù)器端控件第1/2頁(yè)

Ajax Control Toolkit 34個(gè)服務(wù)器端控件第1/2頁(yè)

熱門(mén)標(biāo)簽:蓄意標(biāo)記地圖標(biāo)注 莆田防封電銷(xiāo)卡價(jià)格 電銷(xiāo)機(jī)器人適用范圍 信貸電銷(xiāo)機(jī)器人有用嗎 廣西ai語(yǔ)音電銷(xiāo)機(jī)器人哪家好 辦理一個(gè)400電話多少錢(qián) 察縣地圖標(biāo)注 如何用地圖標(biāo)注各分公司 接聽(tīng)電話機(jī)器人哪有
1. Accordion
【功能概述】
Accordion可以讓你設(shè)計(jì)多個(gè)panel 并且一次只顯示一個(gè)Panel .在頁(yè)面上的顯示效果就像是使用了多個(gè)CollapsiblePanels只不過(guò)每一次只展開(kāi)其中一個(gè)CollapsiblePanel.Accordion控件內(nèi)部包含了若干個(gè)AccordionPane,每一個(gè)AccordionPane的template里包括了對(duì)其Header和Content的定義。我們可以在后臺(tái)代碼中通過(guò)SelectedIndex屬性取得當(dāng)前展開(kāi)的哪一個(gè)Panel,還可以控制哪一個(gè)Panel展開(kāi)。
經(jīng)??梢砸?jiàn)到類(lèi)似的效果,比如QQ、Msn好友分類(lèi)的折疊效果。
【細(xì)節(jié)】
(1)不要把Accordion放在Table中而又把 FadeTransitions 設(shè)置為T(mén)rue,這將引起布局混亂
(2) 在AccordionPane模板中的Content中可以定義任何Web元素,表現(xiàn)的就像一個(gè)容器
(3) AccordionPane內(nèi)容模板自動(dòng)改變大小有三種AutoSize modes :None(推薦) Limit Fill
(4) $find('ctl00_ContentPlaceHolder1_MyAccordion_AccordionExtender')這里找到的是Behavior.什么是Behavior呢?在Asp.net Ajax框架中包含一組動(dòng)作并完成一個(gè)功能. Accordion的一個(gè)Behavior就是淡入淡出.
找到Behavior的引用,behavior.set_FadeTransitions() behavior.get_FadeTransitions()的方式來(lái)實(shí)現(xiàn)具體某一個(gè)Behavior的訪問(wèn)和修改.
var behavior = $find('ctl00_SampleContent_MyAccordion_AccordionExtender');這種寫(xiě)法是不好的,我們?cè)谧詣?dòng)測(cè)試的頁(yè)面中發(fā)現(xiàn)了更好的寫(xiě)法: 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 是一個(gè)簡(jiǎn)單的擴(kuò)展控件可以讓一部分內(nèi)容浮動(dòng)在頁(yè)面上,當(dāng)滾動(dòng)頁(yè)面或者改變?yōu)g覽器大小時(shí)總是可見(jiàn)的。它可以擴(kuò)展任意一個(gè)Asp.net 控件,并可按照要求設(shè)置水平 豎直方向上的相對(duì)距離.
最多的應(yīng)用是在線閱讀的目錄和不勝其煩的浮動(dòng)小廣告。
【細(xì)節(jié)】
(1) 避免控件閃爍,要擴(kuò)展的控件要使用absolutely position
(2) HorizontalSide="Center" VerticalSide="Top" 使用這個(gè)方式控制浮動(dòng)的位置
(3) Var label = ocument.getElementById('ctl00_SampleContent_currentTime');這行代碼我們可以使用更簡(jiǎn)單的方法:
var label = $get('ctl00_SampleContent_currentTime');
【代碼示意】
代碼示意:
cc1:AlwaysVisibleControlExtender ID="AlwaysVisibleControlExtender1" HorizontalSide="Center" VerticalSide="Top" TargetControlID="Panel1" runat="server">

3. Animation
【功能概述】
28個(gè)控件種效果最酷的!顧名思義實(shí)現(xiàn)動(dòng)畫(huà)效果。它是一個(gè)插入式,可擴(kuò)展的框架可以方便的為你的頁(yè)面添加動(dòng)畫(huà)效果。
【細(xì)節(jié)】
請(qǐng)參考頁(yè)面代碼閱讀下面的細(xì)節(jié)內(nèi)容:
(1)Sys.UI.DomElement.getLocation(b) 取得控件位置的函數(shù),常用?。?!
(2)動(dòng)畫(huà)分為兩種:Animation Action 后者的強(qiáng)大讓我很興奮
(3)Sequence> /Sequence> 順序執(zhí)行的動(dòng)畫(huà)腳本
(4)Parallel> Parallel > 并發(fā)執(zhí)行的動(dòng)畫(huà)腳本
(5)【Action】 StyleAction AnimationTarget="btnCloseParent" Attribute="opacity" value="0" /> 控制目標(biāo)元素外觀樣式,屬性--值的格式修改,一個(gè)元素可以應(yīng)用多個(gè)StyleAction
(6)【Action】EnableAction AnimationTarget="ctl00_ContentPlaceHolder1_btnInfo" Enabled="true" /> 控件是否可用使用的方式跟上面是一樣的,當(dāng)前控件可省略AnimationTarget
(7)【Action】 ScriptAction Script="Cover($get('ctl00_ContentPlaceHolder1_btnInfo'), $get('flyout'));" />執(zhí)行一段腳本的Action
(8) 【Action】 HideAction />隱藏目標(biāo)的控件
(9) 【Action】OpacityAction AnimationTarget="info" Opacity="0" /> 設(shè)置透明度的Action
(10)【Animation】 FadeIn AnimationTarget="info" Duration=".2"/> FadeOut /> 淡入淡出
(11)【Animation】Scale ScaleFactor="0.05" Center="true" ScaleFont="true" FontUnit="px" /> 控制目標(biāo)元素的大小但是注意: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" /> 脈搏跳動(dòng)效果
(13)【Animation】 Color Duration=".2" StartValue="#FFFFFF" EndValue="#FF0000" Property="style" PropertyKey="color" /> 顏色漸變效果,設(shè)置起始結(jié)束顏色就可以
(14) 【Animation】 Resize Width="260" Height="280" />改變?cè)氐拇笮ction
(15)動(dòng)畫(huà)效果是在用戶(hù)某一個(gè)動(dòng)作發(fā)生的時(shí)候觸發(fā),觸發(fā)的時(shí)機(jī)包括:OnLoad OnClick OnMouseOver OnMouseOut OnHoverOver OnHoverOut
正式版的頁(yè)面文件為動(dòng)畫(huà)腳本添加了注釋更加清晰易懂.上面列出的是常用的一些動(dòng)畫(huà)效果,全部資料參見(jiàn)Anmation Reference。
仔細(xì)閱讀Animation的頁(yè)面代碼,其實(shí)我們已經(jīng)提前觸摸到了Xaml的編程風(fēng)格。Asp.net Ajax之后的下一代WEB界面是WPF/E,WPF/E現(xiàn)在支持的是”javascript+Xaml” 還不支持”C# + Xaml”。
下一代的WEB UI會(huì)是怎樣的?下一個(gè)版本的Asp.net 會(huì)怎樣安排Ajax的位置?WPF/E會(huì)不會(huì)被整合在新版本的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控件是對(duì)Asp.net文本框控件的擴(kuò)展,當(dāng)用戶(hù)詞匯前面的字母時(shí)以彈出區(qū)域的形式給出備選詞。這個(gè)功能的完成依賴(lài)于特定的Web Service。
在正式版的Ajax Control Toolkit中看到自動(dòng)完成擴(kuò)展控件有一種感覺(jué):它終于出現(xiàn)在了它應(yīng)該出現(xiàn)的地方。之前AutoComplete控件是在CTP版本中以核心組件的形式出現(xiàn)的,這個(gè)功能極為明確的控件被歸類(lèi)到核心組件,我還是比較迷惑。正式版中它終于成為了一個(gè)擴(kuò)展控件。
Google的自動(dòng)完成功能,新浪 網(wǎng)易等信箱的收件人自動(dòng)完成功能是這個(gè)功能的成功應(yīng)用。
【細(xì)節(jié)】
從Atlas的版本開(kāi)始,AutoComplete的使用方法就沒(méi)有太大的改變,只要注意:
(1)調(diào)用的Web Service方法簽名有要求:
[WebMethod]
public string[] GetCompletionList(string prefixText, int count) { ... }
(2)MinimumPrefixLength最短前綴字符數(shù),就是說(shuō)你至少要鍵入幾個(gè)字符才會(huì)出現(xiàn)提示
5. Calendar NEW!!!
【功能概述】
Calendar同樣是對(duì)文本框的擴(kuò)展,當(dāng)點(diǎn)擊文本框的時(shí)候彈出日期選擇選項(xiàng)。現(xiàn)在的版本提供的功能已經(jīng)和WinForm中的日期控件一樣,可以通過(guò)點(diǎn)擊日期選擇,點(diǎn)擊箭頭在年月之間切換。
【細(xì)節(jié)】
(1)同樣是對(duì)文本框的擴(kuò)展,文本框獲得焦點(diǎn)就會(huì)出現(xiàn)日期選擇,樣式是可以自定義的
(2)雖然一定是對(duì)文本框的擴(kuò)展但是我們還是可以指定彈出按鈕PopupButtonID,一旦這個(gè)值設(shè)定了,文本框獲得焦點(diǎn)也不會(huì)彈出日期選擇
(3)不需要把它放在UpdatePanel中
6. CascadingDropDown
【功能概述】
CascadingDropDown 控件是對(duì)ASP.NET DropDownList control的擴(kuò)展,實(shí)現(xiàn)對(duì)一個(gè)DropDownList操作時(shí)其它DropDownList發(fā)生相應(yīng)的變化。這個(gè)功能的實(shí)現(xiàn)依賴(lài)于Web Service。
【細(xì)節(jié)】
(1)如果使用Web service 方法簽名必須符合下面的形式:
[WebMethod]
public CascadingDropDownNameValue[] GetDropDownContents(
string knownCategoryValues, string category){...}
(2)在閱讀代碼的時(shí)候請(qǐng)關(guān)注:Category屬性。官方說(shuō)法The name of the category this DropDownList represents 實(shí)打開(kāi)~/App_Data/CarsService.xml你就發(fā)現(xiàn)這是Xml的元素標(biāo)簽。從這個(gè)角度我們就解決了為什么聯(lián)動(dòng),即聯(lián)動(dòng)的本質(zhì);同時(shí)也明白了調(diào)用Service的參數(shù)約定。
【示意代碼】
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"/>
另外頁(yè)面上還有一段定義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
【功能概述】
這個(gè)控件幾乎在每一個(gè)頁(yè)面上都出現(xiàn)了。它是非常靈活的一個(gè)控件,可以擴(kuò)展任何ASP.NET Panel control。在頁(yè)面上輕松實(shí)現(xiàn)展開(kāi)收縮效果。這種效果我們最熟悉的恐怕就是XP的文件任務(wù)欄了。
【細(xì)節(jié)】
(1) CollapsiblePanel 默認(rèn)認(rèn)為使用了 標(biāo)準(zhǔn) CSS box model 早期的瀏覽器要!DOCTYPE 中設(shè)置頁(yè)面為自適應(yīng)方式提交數(shù)據(jù)rendered in IE's standards-compliant mode.
(2) 可以自動(dòng)展開(kāi) 自動(dòng)收縮Autoexpand="true" AutoCollapse="true"但是這兩個(gè)本身是互斥的不能同時(shí)為T(mén)rue;如果設(shè)置了這兩個(gè)屬性其中一個(gè)為T(mén)rue就不要在設(shè)置 Collapsed="True",這樣就沒(méi)有意義了。
(3) TextLabelID="Label1"這個(gè)屬性有什么深意\高級(jí)的操作么?我還在研究。。。
代碼示意:
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
【功能概述】
這個(gè)控件是對(duì)Button和繼承了Button的控件的擴(kuò)展,它可以捕捉到用戶(hù)點(diǎn)擊了對(duì)話框中的“是”“否”;如果是“是”就繼續(xù)執(zhí)行后面的代碼,反之就停止執(zhí)行它默認(rèn)的提交行為。
【細(xì)節(jié)】
(1) 要擴(kuò)展的LinkButton Button 以及ConfirmButtonExtender都要放在updatepanel里面
如果是放在外面,點(diǎn)擊“確定”或者“取消”之后還是會(huì)導(dǎo)致頁(yè)面刷新!
(2)更簡(jiǎn)單的方法:
this.Button1.Attributes["onclick"]="javascript:return confirm('確定要停止下載么?');";
(3) 如果是需要服務(wù)器端獲取用戶(hù)選擇,還是使用模式彈出吧
9.DragPanel
【功能概述】
DragPanel extender可以輕松的讓控件 "draggability".DragPanel 擴(kuò)展的目標(biāo)是任意 ASP.NET Panel .你可以設(shè)置拖動(dòng)行為的細(xì)節(jié),比如哪里是類(lèi)似于標(biāo)題欄一樣的區(qū)域。
【細(xì)節(jié)】
(1) TargetControlID 要拖動(dòng)的控件
(2) DragHandleID 拖動(dòng)的標(biāo)題欄所在的ControlID 示例代碼中: panel6包含panel7(標(biāo)題) panel8(內(nèi)容)擴(kuò)展的對(duì)象是panel6
(3) 是不是發(fā)現(xiàn)這段JS代碼了呢?如果去掉這段代碼,圖到頁(yè)面邊緣的時(shí)候是不正常的,它自己跑回原來(lái)位置了 :)
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 同樣是一個(gè) ASP.NET Ajax extender 可以對(duì)任何 ASP.NET control 進(jìn)行擴(kuò)展實(shí)現(xiàn) SharePoint-style drop-down menu效果。彈出的只不過(guò)是其它的panel或者控件而已。 在IE瀏覽器中下拉列表總是在最前面的,的確是影響頁(yè)面效果,這個(gè)控件的出現(xiàn)可以解決這一問(wèn)題.這隨時(shí)隨地的彈出窗口成為WEB 2.0網(wǎng)站的標(biāo)志性建筑,彈出的東西也越來(lái)越豐富。
【細(xì)節(jié)】
(1)TargetControlID要在什么控件上實(shí)現(xiàn)擴(kuò)展
(2)DropDownControlID彈出來(lái)什么
(3) 示例中是對(duì)一個(gè)Label進(jìn)行的擴(kuò)展,我試著擴(kuò)展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" />
還有一段代碼有很多可以學(xué)習(xí)的地方:
代碼示意:
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
【功能概述】
陰影效果
【 細(xì)節(jié)】
(1) Width 單位:px 默認(rèn)5px
(2) Opacity 不透明度0-1.0 默認(rèn).5
【示意代碼】
代碼示意:
AjaxToolkit:DropShadowExtender ID="dse" runat="server"
TargetControlID="Panel1"
Opacity=".8"
Rounded="true"
TrackPosition="true" />
12. DynamicPopulate
【功能概述】
能實(shí)用Web Service或頁(yè)面方法來(lái)動(dòng)態(tài)的替換控件的內(nèi)容。調(diào)用的方法返回的是一個(gè)Html的字符串,作為目標(biāo)元素的子節(jié)點(diǎn)插入其中。
【 細(xì)節(jié)】
(1)ClearContentsDuringUpdate 替換之前先清除以前的內(nèi)容(默認(rèn)True)
(2)PopulateTriggerControlID 觸發(fā)器綁定的控件 單擊時(shí)觸發(fā)
(3)ContextKey傳遞給Web Service的隨機(jī)字符串
(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) 我們非常欣慰的一點(diǎn)就是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> //要擴(kuò)展的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);// 內(nèi)部實(shí)現(xiàn)調(diào)用了Service
}
}
Sys.Application.add_load(function() {updateDateKey('G');}); //頁(yè)面加載時(shí)要執(zhí)行的腳本!
/script>
13. FilteredTextBox
【功能概述】
FilteredTextBox擴(kuò)展控件用來(lái)阻止用戶(hù)在文本框輸入無(wú)效字符 。由于這種效果的實(shí)現(xiàn)是依賴(lài)于deactivating JavaScript(怎么翻譯呢?),所以不要期望數(shù)據(jù)會(huì)發(fā)送到服務(wù)器端進(jìn)行校驗(yàn)。
【細(xì)節(jié)】
(1)過(guò)濾條件Numbers LowercaseLetters UppercaseLetters Custom
(2)過(guò)濾條件也可以是Custom的組合 FilterType="Custom, Numbers"
(3)ValidChars="+-=/*()." Custom要定義這樣的有效字符串
(4)這個(gè)控件我認(rèn)為是聊勝于無(wú),我們要把允許輸入的數(shù)據(jù)進(jìn)行枚舉,太難了。事實(shí)上,這個(gè)控件在任何狀態(tài)下都是接受中文的。如果使用正則表達(dá)式情形或許好些??此膶?shí)現(xiàn)代碼還有進(jìn)一步改進(jìn)的可能,學(xué)習(xí)研究中……
【示意代碼】
示意代碼:
AjaxToolkit:FilteredTextBoxExtender ID="ftbe" runat="server"
TargetControlID="TextBox3"
FilterType="Custom, Numbers"
ValidChars="+-=/*()." />
在該控件的實(shí)現(xiàn)代碼中我發(fā)現(xiàn)了這樣一段,這可能是一個(gè)突破口:
特殊鍵排除代碼:
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控件可以擴(kuò)展任何 ASP.NET WebControl, 同時(shí)將把附加的顯示內(nèi)容關(guān)聯(lián)到該控件上,當(dāng)用戶(hù)移動(dòng)鼠標(biāo)到該控件的時(shí)候附加的內(nèi)容將顯示出來(lái)。
【細(xì)節(jié)】
(1) PopupControlID要彈出來(lái)什么
(2)PopupPostion 在哪里彈出來(lái)Left (Default), Right, Top, Bottom, Center.
(3)OffsetX/OffsetY 彈出項(xiàng)與源控件的距離
(4) PopDelay 彈出延時(shí)顯示 單位milliseconds. Default is 100.
【代碼示意】
代碼示意:
AjaxToolkit:HoverMenuExtender ID="hme2" runat="Server"
TargetControlID="Panel9"
HoverCssClass="popupHover"
PopupControlID="PopupMenu"
PopupPosition="Left"
OffsetX="0"
OffsetY="0"
PopDelay="50" />
示例頁(yè)面上還有一個(gè)小細(xì)節(jié):
HttpUtility.HtmlEncode()使用 HttpUtility.HtmlEncode 將危險(xiǎn)的符號(hào)轉(zhuǎn)換為它們的 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 控件是對(duì)TextBox control的擴(kuò)展.用戶(hù)輸入會(huì)在客戶(hù)端進(jìn)行驗(yàn)證。在示例頁(yè)面中,我感覺(jué)實(shí)際效果并不是太好所以沒(méi)有深入學(xué)習(xí),不多說(shuō)了。
16. ModalPopup
【功能概述】
ModalPopup 擴(kuò)展控件允許在頁(yè)面上模式彈出內(nèi)容并阻止用戶(hù)和頁(yè)面上其他區(qū)域的交互。模式彈出區(qū)域的樣式都是可以自定義的。 用戶(hù)可以在模式彈出框選擇OK/Cancel,對(duì)用戶(hù)選擇的處理方式有兩種:使用客戶(hù)端腳本或者PostBack到服務(wù)器端。這樣我們就得到了用戶(hù)的選擇結(jié)果!
【細(xì)節(jié)】
(1) 看下面的代碼可以看到執(zhí)行客戶(hù)端腳本的方法。
(2) 應(yīng)該說(shuō)這個(gè)控件是提供了一個(gè)模式彈出對(duì)話框的模板
(3) 在正式版以前的所有版本,這個(gè)控件在Opear瀏覽器中都是不正常的。正式版已經(jīng)修正這個(gè)BUG,現(xiàn)在正在比較學(xué)習(xí)兩個(gè)版本的源代碼,看看問(wèn)題的原因和解決方法是什么。
【示意代碼】
代碼示意:
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 >確定要?jiǎng)h除當(dāng)前下載的任務(wù)么?/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
【功能概述】
互斥復(fù)選框就像RadioButton一樣,應(yīng)用的場(chǎng)景是:“a number of choices are available but only one can be chosen”
【細(xì)節(jié)】
(1)Key屬性用來(lái)分組就像RdiolistGroup一樣
(2)argetControlID用來(lái)綁定已有的CheckBox
【代碼示意】
AjaxToolkit:MutuallyExclusiveCheckboxExtender runat="server"
ID="MustHaveGuestBedroomCheckBoxEx"
TargetControlID="MustHaveGuestBedroomCheckBox"
Key="GuestBedroomCheckBoxes" />
12下一頁(yè)閱讀全文

標(biāo)簽:鷹潭 銅陵 益陽(yáng) 張掖 儋州 延邊 阿拉善盟

巨人網(wǎng)絡(luò)通訊聲明:本文標(biāo)題《Ajax Control Toolkit 34個(gè)服務(wù)器端控件第1/2頁(yè)》,本文關(guān)鍵詞  Ajax,Control,Toolkit,34個(gè),服務(wù)器,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問(wèn)題,煩請(qǐng)?zhí)峁┫嚓P(guān)信息告之我們,我們將及時(shí)溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無(wú)關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《Ajax Control Toolkit 34個(gè)服務(wù)器端控件第1/2頁(yè)》相關(guān)的同類(lèi)信息!
  • 本頁(yè)收集關(guān)于Ajax Control Toolkit 34個(gè)服務(wù)器端控件第1/2頁(yè)的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章