Take Control - 30 Oct 2009

Gear Up with the Atlas Control Toolkit





Take Control

Gear Up with the Atlas Control Toolkit


By Dan Wahlin


It seems that people have a general attraction to buzzwords. Over the past few years, buzzwords like XML, Web services, and SOAs (Service Oriented Architectures) have stood atop the development buzzwords list. However, a new player in the world of buzzwords has surfaced: AJAX (Asynchronous JavaScript and XML). AJAX offers a lot of promise for building dynamic and interactive Web applications. While the term AJAX sounds pretty fancy, it s really nothing more than a way to enable end users to interact with Web pages quickly and easily without requiring constant postback operations every time a user clicks their mouse.


If you haven t been exposed to the term AJAX, it incorporates technologies such as JavaScript, XML, Web services, and DHTML and uses them to make calls back to a server from within a Web page. This is accomplished by using a special XMLHttp object that can send and receive data to and from a server without reloading the entire page. Although the term AJAX hadn t yet been coined, I first wrote about AJAX concepts and how they could be used in Internet Explorer 5 or higher (see Create Efficient UIs). Since then, AJAX technologies have been integrated into nearly every mainstream browser, which makes them a viable option for today s Web applications.


Several new frameworks are now available that allow AJAX functionality to be added into ASP.NET applications, including Ajax.NET (http://www.ajaxpro.info/) and Microsoft s Atlas framework (http://atlas.asp.net/). Atlas allows new and existing ASP.NET Web pages to leverage AJAX technologies with a minimal amount of code through the use of client-side and server-side techniques.


In addition to releasing the Atlas framework to support AJAX principles, Microsoft has also released an Atlas Control Toolkit (http://atlas.asp.net/) that provides several different AJAX-enabled controls that developers can integrate into their ASP.NET Web applications with minimal effort. The code for all the controls is open source and will ultimately contain controls created by both Microsoft and non-Microsoft developers.


The Atlas Control Toolkit is currently in a technology preview state, so you can expect it to change and mature over time. Although it s relatively new and still evolving, the toolkit includes several very capable controls that can be used today. In this article I ll discuss four controls from the Atlas Control Toolkit and show how they can be used within ASP.NET applications.


What s in the Atlas Control Toolkit?

The Atlas Control Toolkit is a collection of AJAX-enabled controls or control extenders (with source code) along with their associated demos. To use the controls you must have the Atlas framework downloaded and enabled for a given ASP.NET Web site. Visit the Atlas Web site (http://atlas.asp.net/) for additional details on adding Atlas functionality to a Web site, or see my earlier Atlas article, Leverage the Web.


The number of controls within the toolkit is expected to increase to 50+ as it matures and the community around it grows. Examples of controls currently in the toolkit include a CascadingDropDownList control that links multiple dropdown list controls together and allows filtering to occur as items are selected, a CollapsiblePanel control that allows content to be shown or hidden, a ToggleButton control that allows checkbox states to be represented with images, and a DragPanel control that allows content to be dragged and dropped anywhere on a page. There are several other controls that can handle displaying watermark images in TextBoxes, rounding corners around controls, plus much more. The remainder of this article will focus on four of my favorites: the HoverMenu, ModalPopup, PopupControl, and ReorderList controls.


Creating Dynamic Hover Menus

ASP.NET 2.0 includes a new Menu control that allows dynamic menus to be displayed to end users. So why does the Atlas Control Toolkit include a HoverMenu control? While certainly you can emulate the functionality provided by the HoverMenu using the standard Menu control, HoverMenu simplifies hooking up menus to a variety of other controls, as well as dynamically showing and hiding them. To better understand how the HoverMenu control works, Figure 1 shows how it can be used with a GridView control to dynamically show and hide Edit and Delete LinkButton controls as a user hovers over a row. Figure 2 shows what the menu looks like as the user hovers over a row that is in edit mode.


Figure 1: The HoverMenu control allows menus to easily be shown or hidden as end users hover over different controls.


Figure 2: When a user hovers over a GridView row that is currently being edited they will see the Update and Cancel LinkButton controls.


To use the HoverMenu control with the GridView control you must first reference the AtlasControlToolkit.dll assembly available in the toolkit download. Next you must register the assembly within the ASP.NET page using the Register directive:


<%@ Register Assembly="AtlasControlToolkit"

 Namespace="AtlasControlToolkit" TagPrefix="atlasToolkit" %>


Once the assembly is registered, you must add an Atlas ScriptManager control into the page (the atlas prefix shown here is automatically registered in web.config when using the VS.NET 2005 Atlas Web site template included with the Atlas framework):



The menu that will dynamically be shown and hidden must then be defined along with the HoverMenu control inside a TemplateField control for the GridView. For the example shown in Figure 1, a simple Panel with the appropriate LinkButtons inside it was placed inside a TemplateField control s ItemTemplate. The HoverMenu control was then defined directly within the ItemTemplate (see Figure 3).




    ID="PopupMenu" runat="server">




         CommandName="Edit" Text="Edit" /> 



         CommandName="Delete" Text="Delete" /> 













                Text='<%# Eval("CompanyName") %>' />



                 Text='<%# Eval("ContactName") %>' />



               Text='<%# Eval("ContactTitle") %>' />






         PopupControlID="PopupMenu" PopupPosition="Left"

         TargetControlID="pnlReadOnlyData" PopDelay="25" />



Figure 3: The HoverMenu is capable of showing and hiding different controls. This example defines menu items within a Panel control.


Looking at Figure 3 you ll see that the HoverMenu control is referenced by using the atlasToolkit prefix defined earlier, followed by the HoverMenuExtender class name (several toolkit controls have Extender appended to their name because they extend the functionality of existing controls). Properties for the control are defined by adding an tag. This example identifies the appropriate control containing menu items to show and hide by using the PopupControlID property. It also identifies the control that should trigger the menu to be shown or hidden using the TargetControlID property. Finally, the position of the hover menu is identified (Left), as well as the amount of delay before the menu is shown or hidden as the end user moves their mouse in and out of a given GridView row.


The Update and Cancel LinkButtons shown in Figure 2 are defined in a similar manner, along with a HoverMenuExtender within the EditItemTemplate for the TemplateField control. The downloadable source code for this article contains the complete code (see end of article for download details).


Modal Popups

There may be times when you might want to pop up a custom modal dialog box when designing custom Web applications. While you can certainly accomplish this task fairly easily on your own, the Atlas Control Toolkit supplies a ModalPopup control that can be used to show a modal dialog window and perform an action when the user clicks a button within it. Figure 4 shows an example of using the ModalPopup control to confirm whether or not a user wants to delete a row in a GridView.


Figure 4: The ModalPopup control allows custom modal dialog boxes to be displayed to end users in a cross-browser manner (Firefox is shown here). The background of the page can be grayed out by using simple CSS.


As shown in Figure 5, the ModalPopup control code was added into the GridView control s TemplateField to display the custom modal dialog box shown in Figure 4.




      Text="Delete" CommandName="Delete" />




          TargetControlID="lbDelete" PopupControlID="Panel1"


          DropShadow="true" OkControlID="btnOK"


          CancelControlID="btnCancel" />



Figure 5: The ModalPopupExtender control can be used to display customized modal dialog boxes.


The ModalPopupProperties code shown in Figure 5 defines the target control that triggers the modal dialog box to appear (lbDelete in this case), the ID of the popup control that contains the dialog box controls (Panel1), the CSS class to apply to the page s background when the dialog box is showing, and whether or not to add a drop shadow around the dialog box. It also defines the OK and Cancel button IDs, as well as the JavaScript function to call on the client side when the OK button is clicked.


I wasn t able to add a data binding expression within the OnOkScript property value (see Figure 5) to dynamically identify which Delete button triggered the dialog box. The data binding expression was output to the HTML source code rather than being evaluated on the server. As a result, I enhanced the Delete button to write the index position of the Delete button within the GridView rows collection to a hidden field as it was clicked. As the user clicks the OK button, the OKClicked JavaScript function is called and the hidden field is read to know which row to delete:


function OKClicked() {

 //Read from hidden field value set when user clicks

 //the Delete LinkButton to know which one they clicked.

 var id = document.getElementById('hidRowID').value;

 //Trigger a postback to delete the proper row




The code accompanying this article contains all the details, so I won t describe the workaround any further. I m hoping that future versions of the control will support dynamic data binding expressions within the OnOkScript property value.


Dynamic Popup Controls

It seems that more and more travel sites display dynamic popup calendars in their Web pages. You click in a textbox and a calendar instantly appears below it so that you can quickly and easily select a date. This technique can be accomplished manually by using ASP.NET server controls, such as the Calendar control, along with a little JavaScript. But with the toolkit s PopupControl, it can be done in a snap with little coding on your part.


Figure 6 shows an example of using the PopupControl to associate a GridView with a TextBox so that customer IDs can be visually selected. The top image shows what the page looks like before the user clicks in the TextBox; the bottom image shows what the page looks like after the user clicks in the TextBox (no postback operation is performed to show the GridView control).


Figure 6A: The PopupControl can be used to dynamically show different controls with a minimal amount of code.


Figure 6B: The PopupControl can be used to dynamically show different controls with a minimal amount of code.


You can add a PopupControlExtender into the page to make this type of behavior occur:


 "PopupControlExtender1" runat="server">




     Position="Bottom" />


The TextBox that causes the GridView control to be shown is identified with the TargetControlID property; the Panel control that contains the GridView is identified with the PopupControlID property. The position where the GridView should be shown in relation to the TextBox is defined with the Position property. Position accepts values of Bottom, Center, Left, Right, and Top.


Because the GridView control allows paging and sorting operations to occur that normally cause postbacks, it (and the PopupControlExtender) is wrapped with an Atlas UpdatePanel control (see Figure 7). This allows the end user to navigate through the GridView records without posting back each time they click on a different page number or sort column. Once the user finds the proper record and clicks the Select link, the SelectedIndexChanged event will fire on the server side and the selected customer ID value will be added into the TextBox control. This is done by calling the PopupControlExtender control s Commit method within the event handler:


Protected Sub gvCustomers_SelectedIndexChanged(ByVal sender _

 As Object, ByVal e As System.EventArgs) _

 Handles gvCustomers.SelectedIndexChanged

    PopupControlExtender1.Commit(txtCustomerID, _


End Sub


Because the GridView control is placed within the UpdatePanel control, the server-side call to the SelectedIndexChanged event handler method will not cause a postback operation.





             ID="PopupControlExtender1" runat="server">




                 Position="Bottom" />



              AutoGenerateColumns="False" CellPadding="4"



              AllowPaging="True" AllowSorting="True">

    ...Column definitions omitted for brevity...




Figure 7: The UpdatePanel control is part of the Atlas framework and allows existing ASP.NET controls, such as GridView, to leverage AJAX technologies. The GridView control must be placed within the UpdatePanel s ContentTemplate tag.


Reordering Lists of Data

If you ve ever had to write code to allow users to reorder lists of data using drag and drop techniques, then you know how tricky that process can be (if you haven t, then take my word for it). Fortunately, the Atlas Control Toolkit includes a ReorderList control that makes it straightforward to perform this type of activity and do it without requiring postbacks. There are many uses for the ReorderList control, such as rearranging tasks, links, schedules, line items, and more. Figure 8 shows an example of how the ReorderList control looks as an end user reorders a list of links.


Figure 8: The ReorderList control allows an end user to easily reorder a list of items without requiring any postback operations. The control generates all the necessary JavaScript code to make this magic happen.


Figure 9 shows how the ReorderList control can be added into an ASP.NET page. Looking through the code you ll see that it contains ItemTemplate, ReorderTemplate, and InsertItemTemplate templates. The ItemTemplate and InsertItemTemplate templates are similar to the templates found in other controls, such as GridView. The ReorderTemplate allows you to define how the control looks as a user drags and drops items in the list. In this example, the ReorderTemplate specifies a CSS class named reorderCue that should be used to draw a dotted border around the item being moved (refer back to Figure 7 to see the effect of the CSS).


 DataSourceID="sdsLinks" DataKeyField="ID"

 SortOrderField="Position" AllowReorder="True"





          Text='<%# Eval("Title") %>'>


          Text='<%# Eval("Link"," ({0})") %>'>














           Text='<%# Bind("Title") %>'>




           Text='<%# Bind("Link") %>'>





Figure 9: The ReorderList control provides several different templates that allow you to control how the list of items is displayed. This example binds the ReorderList control to a SqlDataSource control to retrieve data from a SQL Server 2005 Express database.


When I first began using the ReorderList I didn t realize that it would automatically update the position of each item in the database as the items were reordered. You, of course, must add some type of position field to the database table for this to happen. I added a simple integer field named Position, then proceeded to write all the code to handle updates to the field as items were moved up or down in the list. It turns out that the ReorderList control handles all that automatically because it tracks the previous and new position of any item that is dragged to a different position in the list. I wasn t happy with myself for not researching that fact first, before writing code, but it was a good exercise (at least that s what I m telling myself). The sample code included with the article contains the original code I wrote. It s not advanced, by any means but it should give you an appreciation for the work that the control does for you.

In addition to allowing templates to be defined, the ReorderList control can also be bound directly to data source controls, such as SqlDataSource or ObjectDataSource. In this example I bound it to a SqlDataSource control (mainly to keep things simple). As items are reordered by an end user, the control knows how to update the proper database fields because the column names to use are identified by the DataKeyField and SortOrderField properties. I gave the SortOrderField a value of Position because that was the name of the field that tracked each item s position in the database.


If you choose to leverage the control s built-in characteristics you don t have to write any additional code to get it working. Otherwise, the control exposes an ItemReorder event that allows you to interact with each drag and drop operation on the server side.



I ve only scratched the surface of what the Atlas Control Toolkit has to offer. The toolkit is still relatively young; it will certainly grow and mature over time. Expect new controls to be added and existing controls to be enhanced.


Although still young, the current offering provides several controls that make it relatively straightforward to perform common tasks, such as popping up controls dynamically, showing modal dialog boxes, and reordering lists. Combining the capabilities of the Atlas framework with the toolkit controls provides developers with a rich AJAX-enabled development environment that can lead to an enhanced user experience.


The sample code referenced in this article is available for download.


Dan Wahlin (Microsoft Most Valuable Professional for ASP.NET and XML Web services) is the president of Wahlin Consulting, as well as a .NET development instructor at Interface Technical Training. Dan founded the XML for ASP.NET Developers Web site (http://www.xmlforasp.net/), which focuses on using XML, ADO.NET, and Web services in Microsoft s .NET platform. He s also on the INETA Speaker s Bureau and speaks at several conferences. Dan co-authored Professional Windows DNA (Wrox), ASP.NET: Tips, Tutorials, and Code (SAMS), ASP.NET 1.1 Insider Solutions (SAMS), and ASP.NET 2.0 MVP Hacks (Wrox), and authored XML for ASP.NET Developers (SAMS). When he s not writing code, articles, or books, Dan enjoys writing and recording music and playing golf and basketball.




Hide comments


  • Allowed HTML tags: <em> <strong> <blockquote> <br> <p>

Plain text

  • No HTML tags allowed.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Lines and paragraphs break automatically.