| Gellenbeck | Wikis | CS 352 | CS 352 Wiki |

Notes Index

ASP.NET Ajax Control Toolkit

The ASP.NET Ajax Control Toolkit is a shared source collection of components that makes it easy to build and consume rich client-side Atlas controls and extenders.

The toolkit provides both ready to go samples and a powerful SDK to simplify the creation and re-use of your own custom controls and extenders.

To begin, download the Ajax Control Toolkit-Frameworks 3.5 zip file and extract it to your u: drive

Note: to learn about JavaScript or to modify an Ajax Control, download the source code with the Toolkit

Confirm Button Extender

One of the easiest Toolkit controls to use is the ConfirmButtonExtender. It is useful for anything that requires confirmation from the user.

Hands-on Activity - use a ConfirmButtonExtender control

1. Create a new web site named Day 21
2. Add an asp:ScriptManager to the Default.aspx page
3. Drag an asp:Button and an asp:Literal onto the page
4. Generate an event handler for the Button1 click and assign Literal1's Text property to "Button was clicked"
   • Test your page by viewing it in the browser
5. From the Ajax Toolkit, drag a ConfirmButtonExtender onto the Default.aspx page
   • Set the TargetControlId to Button1
   • Set the @ConfirmText@ property to "Are you sure?"
   • Test you page by viewing it in the browser

TextBox Extenders

The majority of the AJAX Toolkit controls are extender controls. Extender controls provide additional features to other asp.net controls

• The FilteredTextBoxExtender prevents a user from entering invalid characters into a text box
• The MaskedEditExtender restrict the kind of text that can be entered
• The AutoCompleteExtender can be used to suggest words that begin with the prefix typed into the textbox

Hands-on Activity - use a FilteredTextBoxExtender control

1. Working in Design View, add an asp:TextBox to your page
   • Choose Add Extender ... from the smart tag
   • Select the FilteredTextBoxExtender control
2. Set the TextBox1_FilteredTextBoxExtender's FilterType property to "Numbers"
   • Test your page in the browser
3. Add another asp:TextBox to your page
   • Add a MaskededitExtender to the Textbox
   • Set the Mask property to restrict user input to 3 digits
   • Test your page in the browser
4. Add a third asp:TextBox to the page
   • Add an AutoCompleteExtender
   • Add an AutoComplete Page method
   • Return the string [] set to { "apples", "apricots", "anise" }
   • Set the ScriptManager1's EnablePageMethods to "true"
5. Add a fourth TextBox to the page
   • Add a TextBoxWatermarkExtender to the TextBox
   • Set the WatermarkText to "Enter Name"