Microsoft ASP.NET Ajax Drag and Drop Tutorial

Beta 2 Source Code

RC Source Code (Web Project)

July 2007 Futures CTP (Web Project)

2007 Update

The linked zip files above have been updated for the July 2007 CTP of AJAX Futures. The only breaking change worth noting between the AJAX Futures beta and later CTPs is that the syntax for ScriptReferences in the ScriptManager and ScriptManagerProxy has changed.

Whereas in the beta, you would have written:

     <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="Microsoft.Web.Resources.ScriptLibrary.PreviewScript.js" />   
            <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="Microsoft.Web.Resources.ScriptLibrary.PreviewDragDrop.js" />   
        </Scripts>
     </asp:ScriptManager>

you now should use the shortened form:

     <asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewScript.js" />   
            <asp:ScriptReference Assembly="Microsoft.Web.Preview" Name="PreviewDragDrop.js" />   
        </Scripts>
     </asp:ScriptManager>

Preface

The hardworking Atlas/Ajax team has greatly improved the architecture of the Ajax Extensions framework with the Beta 2, making it much more rational and easy to use for future adopters. Sadly, for us early adopters, this also meant a large number of breaking changes and a bit of a struggle trying to figure out the new paradigms for programming ASP.NET.  At this point in time, the documentation hasn’t yet caught up with the innovation, and so the best place to look for reliable information about how to use ASP.Net is to go the professional blogs of the various Microsoft developers: Bertrand LeRoy, Eilon Lipton, Scott Guthrie.  The blog of Miljan Braticevic of Component Art was also extremely helpful.  Greatest thanks to mavenger00 at www.codeproject.com, who got me over a major pain point and found an error in the official xml script documentation that no one else seems to have.  While the upgrade of this tutorial was a little painful, it was also instructive.  The only thing I think I don’t like about the new Beta 2 is the rebranding of Atlas — “Atlas” was a much more convenient moniker, and at this point I’m not totally sure when or how to use the terms ASP.NET Ajax, Ajax Extensions, Ajax Futures, etc.  I do my best to scatter them about randomly and interchangeably to give a false sense of authoritativeness.

Introduction

This tutorial is intended to help readers understand how certain aspects of Microsoft’s new Ajax Extensions technology works. Ajax Extensions is intended to simplify the development of Ajax-style functionality.  As with all technology, however, to use a tool well, it is important to understand the underlying technology that Atlas abstracts.  One of the key ASP.NET Ajax abstractions is the new XML markup syntax developed to make coding with Ajax easier (originally included with the core Atlas files, XML markup is now a part of the CTP called Ajax Futures).  With XML markup, developers can modify their code declaratively.  However, there are times when a developer may want to be able to change her code programmatically, and in order to accomplish this, she will need to understand that underneath the markup abstraction, she is actually dealing with good ‘ol javascript and some custom javascript libraries developed by Microsoft.  In order to demonstrate the relationship between the Atlas declarative model and the programmatic model, I will go through a series of examples in which the same task will be accomplished both declaratively and programmatically.  I will be demonstrating how to use the PreviewDragDrop library file to perform basic drag-drop operations as well as setting up drop zones. 

Background

As I write this, Microsoft has made some important changes to ASP.NET Ajax for the Beta 2 that have the unfortunate side-effect of breaking most of the original Atlas implementation, and has required a bit of rework of the original samples.  These revised examples apply to the Beta 2 of ASP.NET Ajax. Future releases of Ajax Extensions may affect the accuracy of this tutorial.  I will attempt to update the code as new versions of Ajax Extensions become available.  Ajax Extensions works with .Net 2.0 and will work with Orcas when it is released.