David Barkol : Drag and drop ASP.NET 2.0 Web Parts in Firefox and Safari with ASP.NET AJAX

Drag and drop ASP.NET 2.0 Web Parts in Firefox and Safari with ASP.NET AJAX

The beta 2 release of the asp.net ajax library brings drag and drop support for ASP.NET 2.0 Web Parts in both Safari and Firefox. DND support has been around for Firefox since the Atlas March CTP. However, it was accidentally left out of the beta 1 release of asp.net ajax. Now it's back with additional support for Safari.

Assuming you've converted your app from Atlas to ASP.NET AJAX, you only need to do the following steps to get this working:

1) Add a reference to the ASP.NET 2.0 AJAX Futures CTP. If you've selected the 'ASP.NET AJAX CTP-Enabled Web Site' template then this reference is already done for you. This is the Microsoft.Web.Preview.dll that contains added features like the AutoCompleteExtender and ProfileService.

2) Include the tag prefix for the preview controls and add some tag mapping to replace the WebPartManager and WebPartZone controls with the ones from the preview bits. Add the following entries to the pages group in the web.config:

<pages>
  <controls>
    ....
    <add tagPrefix="asp" namespace="Microsoft.Web.Preview.UI" assembly="Microsoft.Web.Preview"/>
    <add tagPrefix="asp" namespace="Microsoft.Web.Preview.UI.Controls" assembly="Microsoft.Web.Preview"/>
  </controls>
  <tagMapping>
    ...
    <add tagType="System.Web.UI.WebControls.WebParts.WebPartManager" mappedTagType="Microsoft.Web.Preview.UI.Controls.WebParts.WebPartManager"/>
    <add tagType="System.Web.UI.WebControls.WebParts.WebPartZone" mappedTagType="Microsoft.Web.Preview.UI.Controls.WebParts.WebPartZone"/>
  </tagMapping>
</pages>

3) Add the following to the httpHandlers collection in the web.config:

<add verb="GET" 
   path="ScriptResource.axd" 
   type="Microsoft.Web.Handlers.ScriptResourceHandler" 
   validate="false"/>

Below is a snapshot of it working in Safari. This particular application is something that we have been working on at Neudesic for a while. We've extended the Web Parts with rounded corners and added some additional AJAX goodies. In this snapshot you see a Del.icio.us tag cloud web part being dragged into another zone.