Dragging and dropping with ASP.NET 2.0 and Atlas

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 technologies, 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.

I. Declarative Drag Drop

The first task is to use XML markup to add drag-drop behavior to a div tag. By drag and drop, I just mean the ability to drag an object and then have it stay wherever you place it. The more complicated behavior of making an object actually do something when it is dropped on a specified drop target will be addressed later in this tutorial. To configure your webpage to use ASP.NET AJAX, you will need to install the Microsoft.Web.Extensions.dll into your Global Assembly Cache. You will also need a reference to the library Microsoft.Web.Preview.dll. Finally, you will need to configure your web.config file with the following entry:


See full detail: http://www.codeproject.com/KB/ajax/AtlasDragNDrop.aspx

Comments

Post a Comment

Popular posts from this blog

Asynchronous Socket Programming in C#

Image
Objective The objective of this article is to demonstrate a socket-based client/server application that will allow two-way asynchronous communication between a server and multiple client applications. Because this example uses asynchronous methods, the server application does not use threads to communicate to multiple clients (although internally the asynchronous communication mechanism uses threads at the OS level). The Difference Between Synchronous and Asynchronous Communication in Network Programming The key difference between synchronous and asynchronous communication can be explained with an example. Consider a server application that is listening on a specific port to get data from clients. In synchronous receiving, while the server is waiting to receive data from a client, if the stream is empty the main thread will block until the request for data is satisfied. Hence, the server cannot do anything else until it receives data from the client. If another clien
Read more

Url Routing MVC TUTORIAL

Image
This tutorial covers an introduction to the MVC pattern using Visual Basic. It also includes a brief overview of the URL routing assumptions that are a foundation to the implementation of the pattern. A sample application is created to demonstrate the fundamentals of this new web-application model. Implementing business rules and testing is also covered. Finally, the use of two alternative view engines, Silverlight and XML Literals, is coverd.
Read more

WCF Chat Sample

Image
The Chat sample demonstrates how to implement a multiparty chat application by using PeerChannel. Messages sent by any instance of a chat application are received by all other instances. To get samples and instructions for installing them Do one or more of the following: On the Help menu, click Samples . The Readme displays information about samples. Visit the Visual Studio 2008 Samples Web site. The most recent versions of samples are available there. Locate samples on the computer on which Visual Studio is installed. By default, samples and a Readme file are installed in drive :\Program Files\Microsoft Visual Studio 9.0\Samples\ lcid . For Express editions of Visual Studio, all samples are located online. For more information, see Locating Sample Files . Security Note: This sample code is intended to illustrate a concept, and it shows only the code that is relevant to that concept. It may not meet the security requirements for a specific environment, a
Read more