Section 14.2. Using the Toolkit


14.2. Using the Toolkit

Once 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

 ConfirmButton.aspx <%@ Page Language="C#" %> <%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">   <title>Atlas</title> </head> <body>   <form  runat="server">     <atlas:ScriptManager runat="server" />     <div>       <asp:LinkButton  runat="server">LinkButton</asp:LinkButton>     <atlasToolkit:ConfirmButtonExtender  runat="server">     <atlasToolkit:ConfirmButtonProperties     ConfirmText="Are you sure?!" TargetControl />     </atlasToolkit:ConfirmButtonExtender>     </div>   </form> </body> </html> 

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


When you drag one of the extender controls from the Toolbox onto the page for the first time in a project, the appropriate assemblies are copied into the Bin directory of the application. However the toolkit also tries to copy the Microsoft.Atlas.dll file, which is already there if you have an Atlas application (see Figure 14-6). So if in doubt, choose No and do not overwrite the file.


Figure 14-6. Confirmation prompt displayed when you drag an extender control onto the page for the first time


The 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).

From a JavaScript point of view, the effect the ConfirmButtonExtender provides is trivial. The following JavaScript code is all that you need to add a prompt to a regular HTML hyperlink, something the ConfirmButtonExtender control can't yet do):

 <a href="http://atlas.asp.net/"    onclick="return window.confirm('Are you sure?!');">Go to the Atlas homepage</a> 

This extender shows that Atlas is more than just an Ajax toolkitthanks to the Control Toolkit, it is also becoming a JavaScript toolkit.





Programming Atlas
Programming Atlas
ISBN: 0596526725
EAN: 2147483647
Year: 2006
Pages: 146

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net