CoverStory
LANGUAGES: VB.NET
ASP.NET VERSIONS: 2.0
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" />
|
runat="server" Text='<%#
Eval("CompanyName") %>' /> |
Text='<%#
Eval("ContactName") %>' /> |
Text='<%#
Eval("ContactTitle") %>' /> |
HoverCssClass="popupHover"m 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 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). 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. 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" /> runat="server"> TargetControlID="lbDelete"
PopupControlID="Panel1" BackgroundCssClass="modalBackground" DropShadow="true" OkControlID="btnOK" OnOkScript="OKClicked()" 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 __doPostBack(id,''); } 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. 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). You can add a PopupControlExtender into the page to make
this type of behavior occur: "PopupControlExtender1"
runat="server"> TargetControlID="txtCustomerID" PopupControlID="pnlCustomers" 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,
_ gvCustomers.SelectedValue) 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"> TargetControlID="txtCustomerID" PopupControlID="pnlCustomers" Position="Bottom" /> AutoGenerateColumns="False" CellPadding="4" DataKeyNames="CustomerID" DataSourceID="SqlDataSource1" 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. 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 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" ShowInsertItem="True"> Text='<%#
Eval("Title") %>'> Text='<%#
Eval("Link"," ({0})") %>'> Title: Text='<%#
Bind("Title") %>'> Link: Text='<%#
Bind("Link") %>'> CommandName="Insert">Add 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. Modal Popups
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. Dynamic Popup Controls
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. Reordering Lists of Data
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.
Conclusion
