Ever been on a Web site that shows off the drag and drop operation? Maybe it allows you to drag and drop the product into a shopping cart. Most of us have been there and were really impressed with the feature. In this article, we will focus on how to create a similar drag and drop functionality to add users to a room.
Why indeed? There are several drag and drop libraries available for free. Take Microsoft ASP.NET Ajax, for example. Unfortunately, the Microsoft Ajax Library is not developer friendly, meaning it is darn complicated to use. So, if you are looking for some head-banging, be sure to dive into Microsoft Ajax. However, if you are interested in a simple and powerful approach, then
JQuery is your friend.
Downloading JQuery and UI API
Before we implement anything, we need to download the
JQuery library and the
JQuery drag and drop UI API. Check out the following links for download:
The scenario is a little different from the shopping cart basket. In this application, we are going to drag and drop the users to a room. Once a user is inserted into the room, an entry is written to the database. We can also delete the user from the room. In that case, the entry is deleted from the database. Check out the GIF using the link, "Drag and Drop With Persistence Using JQuery".
There is one table,
tblRoomSessions, that will hold the information about the user and the room. The diagram of the
tblRoomSessions table is shown below:
The table script is included with the download.
Populating the Students List
There are multiple ways of populating the student
DataList control. You can use a simple
DataSet container, fill it up with the data from
tblRoomSession and assign it to the
DataList control. I have used a different approach, but it really does not matter how you populate the
Student DataList Control ASPX Code
The ASPX code for the
DataList control is pretty straightforward. Check out the code below: