Ajax Control Toolkit 34 server-side controls page 1/2

1. Accordion
[Function overview]
Accordion allows you to design multiple panels and display only one panel at a time. the display on the page is like using multiple CollapsiblePanels, but only one of them is displayed at a time. the Accordion control contains several AccordionPane. Each AccordionPane template includes the definition of its Header and Content. In the background code, we can use the SelectedIndex attribute to obtain which Panel to expand and which Panel to expand.
Similar effects are often seen, such as the folding Effect of QQ and Msn friend classification.
[Details]
(1) do not place Accordion in the Table and set FadeTransitions to True, which will cause layout confusion.
(2) Any Web element can be defined in the Content in the AccordionPane template, which is like a container.
(3) There are three types of AutoSize modes: None (recommended) Limit Fill to automatically change the size of AccordionPane content Template
(4) $ find ('ctl00 _ contentplaceholder=myaccordion_accordionextender ') is found here Behavior. What is Behavior? The Asp.net Ajax framework contains a set of actions to complete a function. A Behavior of Accordion is fade in and out.
Find the reference of Behavior, and use behavior. set_FadeTransitions () behavior. get_FadeTransitions () to access and modify a specific Behavior.
Var behavior = $ find ('ctl00 _ SampleContent_MyAccordion_AccordionExtender '); this method is not good. We found a better way on the automatic test page: var behavior = $ find ("<% = MyAccordion. clientID %> _ AccordionExtender ");
Code Diagram]
<Script language = "javascript" type = "text/javascript">
Function toggleFade (){
Var behavior = $ find ('ctl00 _ contentplaceholder=myaccordion_accordionextender ');
If (behavior ){
Behavior. set_FadeTransitions (! Behavior. get_FadeTransitions ());
}
}
Function changeAutoSize (){
Var behavior = $ find ('ctl00 _ contentplaceholder=myaccordion_accordionextender ');
Var ctrl = $ get ('autosize'); // the drop-down list control is found, not Behavior.
If (behavior ){
Var size = 'none'; // Let's 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 = "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
[Function overview]
AlwaysVisibleControl is a simple extension control that allows some content to float on the page. It is always visible when the page is rolled or the browser is changed. It can expand any Asp.net control and set the relative distance in the horizontal vertical direction as required.
The most widely used applications are online reading directories and annoying small floating advertisements.
[Details]
(1) To avoid control flickering, use absolutely position for the control to be extended
(2) HorizontalSide = "Center" VerticalSide = "Top" uses this method to control the floating position
(3) Var label = ocument. getElementById ('ctl00 _ samplecontent_currenttime'); we can use a simpler method for this line of code:
Var label = $ get ('ctl00 _ samplecontent_currenttime ');
Code Diagram]
Code diagram:
<PC3: AlwaysVisibleControlExtender ID = "AlwaysVisibleControlExtender1" HorizontalSide = "Center" VerticalSide = "Top" TargetControlID = "Panel1" runat = "server">

3. Animation
[Function overview]
28 controls are the coolest! As its name implies, it implements animation effects. It is an plug-in, and a scalable framework allows you to easily add animation effects to your pages.
[Details]
Refer to the Code on the page to read the following details:
(1) Sys. UI. DomElement. getLocation (B) gets the control position function, which is commonly used !!!
(2) There are two types of Animation: I am very excited by the strength of the Animation Action.
(3) <Sequence> </Sequence> sequential execution of animation scripts
(4) <Parallel> concurrent animation scripts
(5) [Action] <StyleAction AnimationTarget = "btnCloseParent" Attribute = "opacity" value = "0"/> control the appearance style and Attribute of the target element. Modify the value format, one element can apply multiple styleactions
(6) [Action] <EnableAction AnimationTarget = "ctl00_ContentPlaceHolder1_btnInfo" Enabled = "true"/> controls are available in the same way as above. The current control can omit AnimationTarget.
(7) [Action] <ScriptAction Script = "Cover ($ get ('ctl00 _ contentplaceholder1_btninfo'), $ get ('flyout ');"/> Action for executing a Script
(8) [Action] <HideAction/> hides the control of the target
(9) [Action] <OpacityAction AnimationTarget = "info" Opacity = "0"/> sets the Action of transparency
(10) [Animation] <FadeIn AnimationTarget = "info" Duration = ". 2"/> <FadeOut/> fade in and out
(11) [Animation] <Scale ScaleFactor = "0.05" Center = "true" ScaleFont = "true" FontUnit = "px"/> controls the size of the target element, but note: 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"/> Pulse beat Effect
(13) [Animation] <Color Duration = ". 2 "StartValue =" # FFFFFF "EndValue =" # FF0000 "Property =" style "PropertyKey =" color "/> color gradient effect. Set the start and end colors.
(14) [Animation] <Resize Width = "260" Height = "280"/> change the element size Action
(15) The animation effect is triggered when a user's action occurs. The triggering time includes: OnLoad OnClick OnMouseOver OnMouseOut OnHoverOver OnHoverOut.
The official version of the page file adds annotations to the animation script to make it clearer and easier to understand. Some commonly used animation effects are listed above. For more information, see Anmation Reference.
After carefully reading the Page code of Animation, we have already touched the programming style of Xaml in advance. The next-generation WEB interface after Asp.net Ajax is WPF/E. WPF/E currently supports "javascript + Xaml" and does not support "C # + Xaml ".
What will happen to the next generation of web ui? In the next version of Asp.net, how does one arrange the location of Ajax? Will WPF/E be integrated into the new version of Asp.net? Coming soon ......
[Schematic Code]
Code diagram:
<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 !!!
[Function overview]
The AutoComplete control is an extension of the Asp.net text box control. When you use letters before a vocabulary, an alternative word is provided in the pop-up area. The completion of this function depends on a specific Web Service.
In the official version of the Ajax Control Toolkit, you can see that the auto-complete extension Control has the feeling that it finally appears where it should appear. Previously, the AutoComplete control was made available in the form of Core Components in the CTP version. I am still confused that the control with a very clear function is classified into core components. In the official version, it finally becomes an extension control.
Google's Automatic completion function, Sina Netease And other mailbox recipients Automatic completion function is a successful application of this function.
[Details]
Since the version of Atlas, the usage of AutoComplete has not changed much:
(1) There are requirements for the Web Service method signature to be called:
[WebMethod]
Public string [] GetCompletionList (string prefixText, int count ){...}
(2) MinimumPrefixLength: Minimum number of prefix characters, which means you must enter at least a few characters before a prompt is displayed.
5. Calendar NEW !!!
[Function overview]
Calendar is also an extension of the text box. When you click the text box, the date selection option is displayed. The current version provides the same functions as the date control in WinForm. You can click the date selection, and click the arrow to switch between years and months.
[Details]
(1) It is also an extension of the text box. If the text box gets the focus, a date is selected, and the style can be customized.
(2) Although it must be an extension of the text box, we can still specify the pop-up button PopupButtonID. Once this value is set, the text box won't display the date selection.
(3) You do not need to put it in UpdatePanel.
6. CascadingDropDown
[Function overview]
The CascadingDropDown control is an extension of ASP. NET DropDownList control. When a DropDownList operation is performed, other dropdownlists change accordingly. The implementation of this function depends on Web Service.
[Details]
(1) If you use the Web service method, the signature must conform to the following format:
[WebMethod]
Public CascadingDropDownNameValue [] GetDropDownContents (
String knownCategoryValues, string category ){...}
(2) Pay attention to the Category attribute when reading the code. Official statement The name of the category this DropDownList represents open ~ /App_Data/CarsService. xml you will find that this is the element tag of Xml. From this perspective, we have solved the interaction, that is, the nature of the Association. We also understand the parameter conventions for calling the Service.
[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 "/>
In addition, there is a piece of code defining UpdatePanel on the page that is very 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
[Function overview]
This control appears on almost every page. It is a flexible control that can expand any ASP. NET Panel control. Expand and contract the page easily. This effect is probably the file taskbar of XP.
[Details]
(1) by default, CollapsiblePanel considers that early browsers using the standard CSS box model are required! In DOCTYPE, set the page to adaptive mode to submit data in rendered in IE's standards-compliant mode.
(2) Autoexpand = "true" AutoCollapse = "true" can be automatically expanded. However, the two are mutually exclusive and cannot be both True; if either of these two attributes is set to True, do not set Collapsed = "True". This makes no sense.
(3) Does the TextLabelID = "Label1" attribute have any profound or advanced operations? I am still studying...
Code diagram:
<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
[Function overview]
This control is an extension of the Button and the control that inherits the Button. It can capture "yes" or "no" in the dialog box clicked by the user "; if it is "yes", continue executing the subsequent code. Otherwise, stop executing the default commit behavior.
[Details]
(1) The LinkButton and ConfirmButtonExtender to be extended must be placed in updatepanel.
If it is placed outside, clicking "OK" or "cancel" will still cause the page to refresh!
(2) simpler methods:
This. Button1.Attributes ["onclick"] = "javascript: return confirm ('Are you sure you want to stop downloading? ');";
(3) If you need to obtain the user-selected information from the server, use the pop-up mode.
9. DragPanel
[Function overview]
DragPanel extender can easily make the control "draggability". DragPanel extension target any ASP. NET Panel. You can set the details of the drag behavior, for example, where the area is similar to the title bar.
[Details]
(1) TargetControlID: control to be dragged
(2) In the ControlID example code of the title bar where DragHandleID is dragged: panel6 contains the panel7 (title) panel8 (content) Extension object is panel6
(3) Have you found this JS Code? If this code is removed, it is abnormal when the image is directed to the edge of the page, and it runs back to its original position :)
<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.doc umentElement. scrollHeight, document. body. scrollHeight) + "px ";
}
SetBodyHeightToContentHeight ();
$ AddHandler (window, "resize", setBodyHeightToContentHeight );
</Script>
[Schematic Code]
Code Diagram
<AjaxToolkit: DragPanelExtender ID = "DPE1" runat = "server"
TargetControlID = "Panel3"
DragHandleID = "Panel4"/>
10. DropDown
[Function overview]
DropDown is also an ASP. NET Ajax extender that can expand any ASP. NET control to achieve SharePoint-style drop-down menu effect. The pop-up is just another panel or control. In IE browser, the drop-down list is always at the beginning, which does affect the page effect. The appearance of this control can solve this problem. the pop-up window anytime and anywhere becomes the landmark of the WEB 2.0 website, and more pop-up things are available.
[Details]
(1) controls on which TargetControlID should be extended
(2) What does DropDownControlID pop up?
(3) In the example, an extension is made to a Label. I tried to extend the TextBox to make it better!
[Schematic Code]
Code diagram:
<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>
<PC3: dropdownexw.runat = "server" ID = "DDE" TargetControlID = "TextLabel"
DropDownControlID = "DropPanel"/>
There is also a lot of code to learn:
Code diagram:
<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
[Function overview]
Shadow Effect
[Details]
(1) Width unit: px default 5px
(2) Opacity: 0-1.0 default. 5
[Schematic Code]
Code diagram:
<AjaxToolkit: DropShadowExtender ID = "dse" runat = "server"
TargetControlID = "Panel1"
Opacity = ". 8"
Rounded = "true"
TrackPosition = "true"/>
12. DynamicPopulate
[Function overview]
It can use Web Service or page methods to dynamically Replace the control content. The called method returns an Html string that is inserted as a child node of the target element.
[Details]
(1) Clear the previous content before replacing ClearContentsDuringUpdate (True by default)
(2) triggered when the control bound to the PopulateTriggerControlID trigger is clicked
(3) random string passed by ContextKey to Web Service
(4) The Web Service method signature must comply with 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 BehaviorID = "dp1", which is what I expect.
(6) How to Use CustomScript ?? This script must evaluate to a string value .??
[Schematic Code]
Code diagram:
<AjaxToolkit: DynamicPopulateExtender ID = "dp" runat = "server"
TargetControlID = "Panel1"
ClearContentsDuringUpdate = "true"
PopulateTriggerControlID = "Label1"
ServiceMethod = "GetHtml"
UpdatingCssClass = "dynamicPopulate_Updating"/>
Code Example 2:
<Asp: Panel ID = "Panel1" runat = "server" CssClass = "dynamicPopulate_Normal">
</Asp: Panel> // The panel to be expanded
<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 is much easier to use BehaviorID.
If (behavior ){
Behavior. populate (value); // The internal implementation calls the Service
}
}
Sys. Application. add_load (function () {updateDateKey ('G') ;}); // script to be executed during page loading!
</Script>
13. FilteredTextBox
[Function overview]
The FilteredTextBox extension control is used to prevent users from entering invalid characters in the text box. The implementation of this effect depends on deactivating JavaScript ?), Therefore, do not expect data to be sent to the server for verification.
[Details]
(1) filtering condition Numbers LowercaseLetters UppercaseLetters Custom
(2) The filter condition can also be a combination of Custom FilterType = "Custom, Numbers"
(3) ValidChars = "+-=/* ()." Custom must define such a valid string
(4) I think this control is better than nothing. It is too difficult to enumerate the data that can be input. In fact, this control accepts Chinese Characters in any State. It may be better to use a regular expression. Looking at its implementation code, there is also the possibility of further improvement, learning to study ......
[Schematic Code]
Sample Code:
<AjaxToolkit: FilteredTextBoxExtender ID = "ftbe" runat = "server"
TargetControlID = "TextBox3"
FilterType = "Custom, Numbers"
ValidChars = "+-=/* ()."/>
In the implementation code of this control, I found such a section, which may be a breakthrough:
Special key exclusion code:
<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
[Function overview]
The HoverMenu control can be used to expand any ASP. NET WebControl and associate the added display content with the control. When you move the mouse over the control, the added content will be displayed.
[Details]
(1) What should the PopupControlID pop up?
(2) Where does PopupPostion pop up? Left (Default), Right, Top, Bottom, Center.
(3) the distance between the OffsetX/OffsetY pop-up item and the source control
(4) PopDelay pop-up delay display unit: milliseconds. Default is 100.
Code Diagram]
Code diagram:
<AjaxToolkit: HoverMenuExtender ID = "hme2" runat = "Server"
TargetControlID = "Panel9"
HoverCssClass = "popupHover"
PopupControlID = "PopupMenu"
PopupPosition = "Left"
OffsetX = "0"
OffsetY = "0"
PopDelay = "50"/>
There is also a small detail on the example Page:
HttpUtility. HtmlEncode () uses HttpUtility. HtmlEncode to convert dangerous symbols into their HTML representation.
Code diagram:
<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 !!!
[Function overview]
The MaskedEdit control is an extension of TextBox control. user input is verified on the client. On the example Page, I feel that the actual effect is not very good, so I did not study it in depth.
16. ModalPopup
[Function overview]
The ModalPopup extension control allows content to pop up on the page and prevents interaction between users and other areas on the page. The style of the mode pop-up area can be customized. You can select OK/Cancel in the mode pop-up box. You can select either client script or PostBack to the server. In this way, we get the user's selection result!
[Details]
(1) Check the following code to see how to execute the client script.
(2) It should be said that this control provides a template for the mode pop-up dialog box.
(3) In all versions earlier than the official version, this control is abnormal in the Opear browser. The official version has fixed this BUG. Now we are comparing the source code of the two versions to see the cause and solution of the problem.
[Schematic Code]
Code diagram:
<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 = "message prompt"> </asp: Label> </p>
<P> are you sure you want to delete the current download task? </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
[Function overview]
The mutex check box is like RadioButton. The application scenario is: "a number of choices are available but only one can be chosen"
[Details]
(1) The Key attribute is used for grouping, just like RdiolistGroup.
(2) argetControlID is used to bind an existing CheckBox
Code Diagram]
<AjaxToolkit: MutuallyExclusiveCheckboxExtender runat = "server"
ID = "MustHaveGuestBedroomCheckBoxEx"
TargetControlID = "MustHaveGuestBedroomCheckBox"
Key = "GuestBedroomCheckBoxes"/>