1. accordion
"Feature Overview"
Accordion allows you to design multiple panel and display only one panel at a time. The display on the page looks like it's using multiple collapsiblepanels only one of the collapsiblepanel.accordion controls each time contains several accordionpane, each accordionpane Templat E includes a definition of its header and content. In the background code, we can obtain which panel is currently expanded through the SelectedIndex property, and we can control which panel is expanded.
Can often see similar effects, such as QQ, MSN Friends category folding effect.
Details
(1) Do not put the accordion in the table and set the Fadetransitions to true, which will cause confusion in layout
(2) Any web element can be defined in the content in the Accordionpane template, acting like a container
(3) Accordionpane content template automatically changed size has three kinds of AutoSize Modes:none (recommended) Limit Fill
(4) $find (' Ctl00_contentplaceholder1_myaccordion_accordionextender ') What is found here is behavior. What is behavior? Include a set of actions in the ASP.net Ajax framework and complete a function. One of the behavior of accordion is fading in.
Find Behavior references, behavior.set_fadetransitions () behavior.get_fadetransitions () to achieve a specific behavior access and modification.
var behavior = $find (' Ctl00_samplecontent_myaccordion_accordionextender '); This is not good, we found a better way of writing on the Automated test page: Var Behavior= $find ("<%= myaccordion.clientid%>_accordionextender");
"Code hint"
<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 '); This is a Drop-down list control, not behavior.
if (behavior) {
var size = ' None '; Here to see how to use 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= "autosize=" "None" >
<Panes>
<ajaxtoolkit:accordionpane id= "AccordionPane1" runat= "Server" >
<Header>
<a href= "" onclick= "return false;" class= "Accordionlink" >1. Accordion</a><Content>
</Content>
</AjaxToolkit:AccordionPane>
</Panes>
</AjaxToolkit:Accordion>
2. Alwaysvisiblecontrol
"Feature Overview"
Alwaysvisiblecontrol is a simple extended control that allows a portion of content to float on a page and is always visible when scrolling a page or changing the size of the browser. It can extend any one of the ASP.net controls and can set the relative distance in the horizontal vertical direction as required.
The most used is the online reading of the catalogue and the annoying floating ads.
Details
(1) To avoid blinking the control, to extend the control to use absolutely position
(2) horizontalside= "Center" verticalside= "Top" uses this method to control the floating position
(3) Var label = Ocument.getelementbyid (' ctl00_samplecontent_currenttime '); This line of code we can use a simpler approach:
var label = $get (' ctl00_samplecontent_currenttime ');
"Code hint"
Code hint:
<cc1:alwaysvisiblecontrolextender id= "AlwaysVisibleControlExtender1" horizontalside= "Center" verticalside= "top "Targetcontrolid=" Panel1 "runat=" Server >
3. Animation
"Feature Overview"
28 Control effects the coolest! As the name suggests to achieve animation effect. It's a pluggable, extensible framework that can be easily animated for your page.
Details
Please refer to the page code to read the following details:
(1) Sys.UI.DomElement.getLocation (b) A function that obtains the position of the control, commonly used!!!
(2) animation is divided into two kinds: Animation Action The latter's powerful makes me very excited
(3) <Sequence> </Sequence> sequence execution of animation scripts
(4) <Parallel> <parallel > Animation scripts executed concurrently
(5) "Action" <styleaction animationtarget= "btncloseparent" attribute= "opacity" value= "0"/> Control the visual style of the target element, Attribute-The format of the value is modified, an element can apply multiple styleaction
(6) "Action" <enableaction animationtarget= "Ctl00_contentplaceholder1_btninfo" enabled= "true"/> Control is available in the same way as above, the current control can be omitted Animationtarget
(7) "Action" <scriptaction script= "Cover ($get (' Ctl00_contentplaceholder1_btninfo '), $get (' flyout ');"/> Execute a script action
(8) "Action" (9) "Action" <opacityaction animationtarget= "info" opacity= "0"/> Set transparency action
(10) "Animation" <fadein animationtarget= "info" duration= ". 2"/> <fadeout fading
(11) "Animation" <scale scalefactor= "0.05" center= "true" scalefont= "true" fontunit= "px"/> Control the size of the target element but note: If Scalefont is true, the size of the font would also scale with the element. If Center is true, then the element ' s center won't move as it is scaled. It is important to this target must be positioned (i.e. absolutely) so, its top/left properties would Change it location in order for center to have a effect.
(12) "Animation" <pulse duration= ". 1"/> Pulse beat Effect
(13) "Animation" <color duration= ". 2" startvalue= "#FFFFFF" endvalue= "#FF0000" property= "style" propertykey= "Color" /> Color Gradient effect, set start end color to
(14) "Animation" <resize width= "height=" 280 "/>" To change the size of the element action
(15) The animation effect is the user a certain action occurs when the trigger, the timing of the trigger includes: OnLoad OnClick OnMouseOver onmouseout onhoverover onhoverout
The official version of the paging file adds annotations to the animated script to make it easier to understand. The above is a list of commonly used animation effects, all of which refer to Anmation Reference.
Carefully read the animation page code, in fact, we have touched the XAML in advance of the programming style. The next-generation Web interface after asp.net Ajax is wpf/e,wpf/e now supports "Javascript+xaml" and does not support "C # + Xaml".
What will the next-generation Web UI be like? How will the next version of ASP.net arrange ajax locations? Will wpf/e be integrated into the new version of ASP.net? Look forward to ...
"Schematic Code"
Code hint:
<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!!!
"Feature Overview"
The AutoComplete control is an extension of the ASP.net text box control, which is given in the form of a pop-up region when the letter precedes the user's word. The completion of this feature depends on the specific web Service.
There is a feeling in the formal version of AJAX Control Toolkit that the auto-completion extension controls are at last appearing where it should appear. Before the AutoComplete control was in the CTP version in the form of a core component, this very clear control is categorized into the core components, I am still more puzzled. It has finally become an extended control in the official edition.
Google's automatic completion function, such as Sina NetEase, such as the recipient of the Inbox automatic completion function is the successful application of this function.
Details
Starting with the version of Atlas, there is no significant change in the way AutoComplete is used, just note:
(1) The calling Web service method signature is required:
[WebMethod]
Public string[] Getcompletionlist (string prefixtext, int count) {...}
(2) Minimumprefixlength the shortest prefix character number, which means that you have to type at least a few characters to appear prompt
5. Calendar NEW!!!
"Feature Overview"
Calendar is also an extension of the text box, which pops up the date selection option when you click on the text box. The current version offers the same functionality as the date controls in WinForm, which can be clicked by the date selection and click the arrow to switch between the years.
Details
(1) The same is the extension of the text box, the text box to get focus will appear date selection, style is customizable
(2) Although it must be the extension of the text box, but we can still specify the pop-up button PopupButtonID, once this value is set, the text box to get the focus will not eject date selection
(3) Do not need to put it in the UpdatePanel
6. CascadingDropDown
"Feature Overview"
CascadingDropDown controls are extensions to the ASP.net DropDownList control, which enable other DropDownList to change when a DropDownList operation occurs. The implementation of this feature depends on the Web Service.
Details
(1) If you use the Web service method signature, you must conform to the following form:
[WebMethod]
Public cascadingdropdownnamevalue[] Getdropdowncontents (
String knowncategoryvalues, String category) {...}
(2) When reading the code, please pay attention to: Category property. The official version of the name of the category this DropDownList represents real open ~/app_data/carsservice.xml you find this is the element tag of XML. From this perspective we have solved why linkage, that is, the nature of linkage, but also understand the call service parameters of the contract.
"Schematic Code"
<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 "/>"
Another section on the page that defines the UpdatePanel code is typical and can be used as a reference:
<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
"Feature Overview"
This control appears on almost every page. It is a very flexible control that can extend any asp.net Panel controls. Easy on the page to expand the contraction effect. This effect we are most familiar with is probably the XP file task bar.
Details
(1) Collapsiblepanel defaults to the use of the standard CSS box model early browsers to! DOCTYPE to set the page in the adaptive way to submit data rendered in IE ' s standards-compliant mode.
(2) Automatically expand Auto shrink autoexpand= "true" autocollapse= "true" but these two are mutually exclusive and cannot be true at the same time, if either of these properties is set to True, do not set collapsed= "true" "And that makes no sense.
(3) textlabelid= "Label1" This attribute has what deep meaning \ Advanced operation? I'm still studying ...
Code hint:
<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
"Feature Overview"
This control is an extension of the button and the control that inherits the button, which catches the user clicking "Yes" in the dialog box, and if it is "yes", proceed to the following code, and then stop executing its default commit behavior.
Details
(1) To extend the LinkButton Button and ConfirmButtonExtender should be placed in the UpdatePanel inside
If it's on the outside, clicking "OK" or "Cancel" will still cause the page to refresh!
(2) A simpler approach:
This. button1.attributes["onclick"]= "Javascript:return confirm (' OK to stop downloading? ');";
(3) If you need server-side access to user selection, or use mode pop-up bar
9.DragPanel
"Feature Overview"
Dragpanel Extender can easily make the control "draggability". The Dragpanel extension is aimed at any asp.net Panel. You can set the details of the drag behavior, such as where the area is similar to the title bar.
Details
(1) TargetControlID the control to be dragged
(2) in the ControlID sample code of the Draghandleid dragged title bar: panel6 contains PANEL7 (title) Panel8 (content) Extension of the object is Panel6
(3) is not found this section of JS code? If you remove this code, the image to the edge of the page is not normal, it ran back to its original position:)
<script type= "Text/javascript" >
The following snippet works around a problem where floatingbehavior
Doesn ' t allow drops outside ' 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>
"Schematic Code"
Code hint
<ajaxtoolkit:dragpanelextender id= "DPE1" runat= "Server"
Targetcontrolid= "Panel3"
Draghandleid= "Panel4"/>
DropDown
"Feature Overview"
DropDown is also a asp.net Ajax extender can extend any asp.net control to implement Sharepoint-style drop-down menu effects. The pop-up is just another panel or control. In IE browser Drop-down list is always at the front, it is really affect the page effect, the appearance of this control can solve the problem. This pop-up window anytime and anywhere becomes the landmark of the Web 2.0 website, and the things that pop up are getting richer.
Details
(1) TargetControlID on what controls to implement the extension
(2) Dropdowncontrolid, what's the bounce?
(3) The example is an extension of a label, and I try to extend the textbox better!
"Schematic Code"
Code hint:
<asp:panel id= "Droppanel" runat= "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"/>
There is also a section of code that can be learned in a number of places:
Code hint:
<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>
DropShadow.
"Feature Overview"
Shadow effect
Details
(1) Width unit: PX Default 5px
(2) Opacity opacity 0-1.0 default. 5
"Schematic Code"
Code hint:
<ajaxtoolkit:dropshadowextender id= "DSE" runat= "Server"
Targetcontrolid= "Panel1"
Opacity= ". 8"
Rounded= "true"
Trackposition= "true"/>
Dynamicpopulate
"Feature Overview"
can be useful for Web service or page methods to dynamically replace the contents of a control. The method called returns an HTML string that is inserted as a child of the target element.
Details
(1) Clear previous content before Clearcontentsduringupdate replace (default true)
(2) Populatetriggercontrolid trigger-bound control when clicked
(3) Contextkey a random string passed to the Web service
(4) The Web service method signature must conform to the following form:
[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) We are very pleased with the behaviorid= "DP1", this usage is what I expected.
(6) Customscript How to use it?? This script must evaluate to a string value. ??
"Schematic Code"
Code hint:
<ajaxtoolkit:dynamicpopulateextender id= "DP" runat= "Server"
Targetcontrolid= "Panel1"
Clearcontentsduringupdate= "true"
Populatetriggercontrolid= "Label1"
Servicemethod= "Gethtml"
updatingcssclass= "Dynamicpopulate_updating"/>
Code schematic 2:
<asp:panel id= "Panel1" runat= "Server" cssclass= "Dynamicpopulate_normal" >
</asp:Panel>//To expand the 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 '); It's much more convenient to use Behaviorid.
if (behavior) {
Behavior.populate (value);//internal implementation calls service
}
}
Sys.Application.add_load (function () {Updatedatekey (' G ');}); The script to execute when the page loads!
</script>
Filteredtextbox
"Feature Overview"
The Filteredtextbox extension control is used to prevent users from entering invalid characters in a text box. Because the implementation of this effect is dependent on deactivating JavaScript (how to translate it?) , so do not expect the data to be sent to the server side for validation.
Details
(1) Filtration conditions numbers lowercaseletters uppercaseletters Custom
(2) filter conditions can also be custom's combination filtertype= "Custom, Numbers"
(3) Validchars= "+-=/* ()." Custom to define such a valid string
(4) This control I think is more than nothing, we want to allow input data to enumerate, too difficult. In fact, this control is accepted in Chinese in any state. It might be better if you use regular expressions. See its implementation code there are further improvements in the possibility of learning research ...
"Schematic Code"
Schematic code:
<ajaxtoolkit:filteredtextboxextender id= "FTBE" runat= "Server"
Targetcontrolid= "TextBox3"
Filtertype= "Custom, Numbers"
Validchars= "+-=/* ()."/>
In the implementation code of the control I found such a paragraph, which may be a breach:
Special Key Exclusion Code:
< var Scancode;
if (evt.rawEvent.keyIdentifier) {
Safari
Note (Garbin): used the underlying rawevent insted domevent of the 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 ();
}
}
}
Hovermenu
"Feature Overview"
The Hovermenu control can extend any asp.net webcontrol, and the attached display is associated with the control, and the attached content is displayed when the user moves the mouse to the control.
Details
(1) Popupcontrolid to play out what
(2) Where popuppostion is bouncing out left (Default), right, top, Bottom, Center.
(3) Offsetx/offsety the distance between the popup and the source control
(4) Popdelay pop-up delay display unit milliseconds. Default is 100.
"Code hint"
Code hint:
<ajaxtoolkit:hovermenuextender id= "hme2" runat= "Server"
Targetcontrolid= "Panel9"
Hovercssclass= "Popuphover"
Popupcontrolid= "PopupMenu"
Popupposition= "left"
offsetx= "0"
offsety= "0"
Popdelay= "/>"
There is also a small detail on the sample page:
Httputility.htmlencode () uses Httputility.htmlencode to convert dangerous symbols to their HTML representations.
Code hint:
<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>
MaskedEdit new!!!
"Feature Overview"
MaskedEdit controls are extensions to the TextBox control. User input is validated on the client. In the example page, I feel that the actual effect is not too good so I did not go into the study, not much.
ModalPopup
"Feature Overview"
ModalPopup extended controls allow you to eject content on the page and prevent interaction between users and other areas on the page. The style of the mode pop-up area is customizable. Users can choose Ok/cancel in the Modal pop-up box, and there are two ways to handle the user's choice: Using client script or postback to the server side. So we get the user's choice result!
Details
(1) Look at the following code to see how the client script is executed.
(2) This control should be said to provide a template for a modal pop-up dialog box
(3) All versions prior to the official version, this control is not normal in the Opear browser. The official edition has fixed the bug and is now comparing the two versions of the source code to see what the problem is and how it is resolved.
"Schematic Code"
Code hint:
<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= "Information Tips" ></asp:Label> </p>
<p > Are you sure you want to delete the currently downloaded tasks? </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"/>
Mutuallyexclusivecheckbox
"Feature Overview"
Mutual exclusion check box just like RadioButton, the application scenario is: "A number of choices are available but only one can be chosen"
Details
(1) The key property is used to group, just like Rdiolistgroup.
(2) Argetcontrolid used to bind existing checkbox
"Code hint"
<ajaxtoolkit:mutuallyexclusivecheckboxextender runat= "Server"
Id= "Musthaveguestbedroomcheckboxex"
Targetcontrolid= "Musthaveguestbedroomcheckbox"
key= "Guestbedroomcheckboxes"/>
Current 1/2 page
12 Next read the full text
