Drag and Drop Programming in Microsoft ASP.NET AJAX (Page 1 of 4 ) Nowadays AJAX has attracted more and more developers. Microsoft ASP.NET AJAX 1.0 (MS AJAX), a young yet excellent open source AJAX framework provided mainly by Microsoft, certainly attracts developers with its whole solution on both the server side and client side. In this article, we'll first summarize the multiple solutions suggested by MS AJAX, and then explore a general yet rather complex sample which in fact reflects the under-the-hood workings of all the client side drag and drop solutions within the MS AJAX framework.
A downloadable .rar file is available for this article.
Introduction Author's Note: First, as far as the MS AJAX framework is concerned, it is generally referred to as the three components below: ASP.NET AJAX Extensions, which corresponds to two assemblies, System.Web.Extensions.dll and System.Web.Extensions.Design.dll, with three files, MicrosoftAjax.js, MicrosoftAjaxTimer.js, and MicrosoftAjaxWebForms.js contained within them; ASP.NET AJAX Control Toolkit, which provides both ready-to-run samples and a powerful SDK to simplify creating custom ASP.NET AJAX controls and extenders; and ASP.NET AJAX Futures January CTP (recently replaced by a May release, with the January one still available), which corresponds to the assembly Microsoft.Web.Preview.dll which contains three files: PreviewScript.js, PreviewGlitz.js, and PreviewDragDrop.js.
Second, to follow along with all the samples in this article, you're assumed to have installed Visual Studio 2005, and all three components of MS AJAX above. In addition, it is suggested that you download the source files accompanying this article. Various kinds of drag and drop solutions provided by MS AJAX Since the drag and drop operation is increasingly becoming one of the most attractive features of nearly every web 2.0 site, MS AJAX has also provided many controls associated with drag and drop support from the server side to the client side. In this article, for brevity, we only summarize the related solutions as much as possible and give them a brief comparison in table form (see Table 1). Position | Name | Features | Server side | DragOverlayExtender | Note that in the newest Futures CTP, this control is not explicitly contained within the PreviewScript.js file, but you can still find it inside the Microsoft.Web.Preview.dll assembly using the .NET Object Browser. This control provides only the dragging function without dropping support, which means that you can drag it wherever you want but without a special position to drop onto, not to mention the custom function. I've provided a sample web page named DragOverlayExtenderDemo.aspx in the source code with this article. | DragPanelExtender | When you use the DragOverlayExtender control, you can drag any position of the target. However, users often need to select the text within the control by dragging, which obviously conflicts with the general dragging operation so that users are deprived of the normal right of selecting text. The practical way to drag involves dragging some special area of the target as with the common Windows dragging operation. The DragPanelExtender control in the ASP.NET AJAX Control Toolkit provides just this function but with little extensibility and availability. In the source code I've also supplied a related demo of it (the DragPanelDemo.aspx page) for you to refer to. | ReorderList | Inside the ASP.NET AJAX Control Toolkit. This address provides you with a good example (I've tested it successfully). Compared with the above two controls, this control provides more functions and is more extensible. However, when we want to drag items among more than two controls of this kind, it's quite difficult to make it work. | WebParts | This in fact refers to a group of related server-side controls -- WebPartManager, WebPartZone, CatalogZone, EditorZone, etc. -- with which you can easily build a web site much like Windows Live Spaces which enables end users to open, close, minimize, maximize or drag the customized gadgets on the page. Since now there are many samples with these controls, we won't dwell on them further. | Client side | DragDropList | This control stays within the PreviewDragDrop.js file (in ASP.NET AJAX Futures CTP). This address provides you with a good example (I've tested it successfully). Thanks to its functions being totally implemented on the client side, the performance of the server side has been improved. With its rich functions you can even achieve the same effects as those of the WebParts; however, it lacks good extensibility and it is difficult to make the dragging result persist. | WebParts | Also shipped with ASP.NET AJAX Futures CTP, there is a PreviewWebParts.js file which aims to simulate the server side WebPart action. Despite the good drag and drop support and many other strong points, the server side WebParts still has two fatal limitations: The first problem can be solved using the client side WebParts in ASP.NET AJAX Futures CTP, while the second can be overcome with the famous UpdatePanel control. All of these were well done in the former ASP.NET AJAX CTP version, but in the current Futures CTP these problems crop up, making a programmer's life more difficult. Why?? | IDragSource and IDropTarget | This is the most complicated client side drag and drop solution supplied by MS AJAX. In fact, the above DragDropList has just utilized this approach by implementing the interfaces IDragSource and IDropTarget; it, however, has just scratched the surface of this powerful approach. In the next section, we'll further explore the underground mechanism of this solution. |
Next: Inner workings of the client side drag >>
More ASP.NET Articles
More By Xianzhong Zhu |
