14.2. Using the ToolkitOnce you've added the toolkit to the project, you can use its controls in your web site. Let's demonstrate how it works by adding one of its simpler controls to a web page, the ConfirmButton control. ConfirmButton displays a JavaScript confirmation dialog box (using the window.prompt() method, of course), which asks the user whether to continue the current operation or not. If the user clicks No, the action is cancelled. This makes sense when posting a form by clicking on a LinkButton or a regular button: if No is clicked, JavaScript is able to cancel the click on the button, so that the form is not submitted. Before you can use any toolkit controls on a page, you have to register the toolkit by adding the following markup to the page (which will be done automatically for you if you drag a toolkit component on the page in Design view): <%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %> You use the name that you assign to the TagPrefix property every time you reference a control in the toolkit. If you don't assign a TagPrefix value, whenever you drag an extender from the IDE Toolbox to the design surface, the IDE assigns the prefix cc1 by default. The atlasToolkit prefix is more descriptive. You'll also need to add a ScriptManager control to the page for the toolkit controls to work Most controls in the Atlas Control Toolkit provide their functionality by extending the functionality of other controls on the page. (See Chapter 1 for a discussion of the extenders that ship with Atlas.) The specific properties available for an extender depend on which toolkit control you're using, but the overall approach is always the same: you add the extender markup to your page. You then create a properties subelement and set values such as the ID of the HTML element (or ASP.NET control) to attach the extender to, which you specify with the TargetControlID property. In case of the ConfirmButton control, there is one additional property: the ConfirmText value. This contains the text of the message that is displayed when you click the LinkButton control. If you choose Yes, the action of the LinkButton control is executed, meaning that the LinkButton link is followed or the form is submitted. Clicking No, on the other hand, cancels the action. Example 14-1 contains the complete code for this example. Example 14-1. Using the ConfirmButton extender control
Figure 14-5 shows the result displayed in the browser. When the LinkButton control is clicked, the pop-up window appears. If No is clicked, the form is not posted to the server. Figure 14-5. The Confirm text that is displayed when the button is clicked
Figure 14-6. Confirmation prompt displayed when you drag an extender control onto the page for the first timeThe other toolkit extenders work in a similar fashion. Just add the extender control (create an <atlasToolkit:controlExtender> element) to the page and set the extender's properties (create an <atlasToolkit:controlProperties> element as a child of the extender control element).
|