Welcome to Scribd, the world's digital library. Read, publish, and share books and documents. See more
Download
Standard view
Full view
of .
Look up keyword
Like this
9Activity
0 of .
Results for:
No results containing your search query
P. 1
Drag&DropJQuery DOTNET

Drag&DropJQuery DOTNET

Ratings:

4.75

(4)
|Views: 337|Likes:
Published by quoisinc
Drag & Drop documentation using jQuery and Dot NET (ajax.net).
Drag & Drop documentation using jQuery and Dot NET (ajax.net).

More info:

Published by: quoisinc on Apr 08, 2008
Copyright:Attribution Non-commercial

Availability:

Read on Scribd mobile: iPhone, iPad and Android.
download as DOC, PDF, TXT or read online from Scribd
See more
See less

05/08/2014

pdf

text

original

 
Introduction
Ever been on a Web site that shows off the drag and drop operation? Maybe it allows youto drag and drop the product into a shopping cart. Most of us have been there and werereally 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 JQuery?
Why indeed? There are several drag and drop libraries available for free. Take MicrosoftASP.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 simpleand powerful approach, then
JQuery
is your friend.Some of you might be thinking, "Why not simply write plain old vanilla JavaScript?"Well, off course you can, but that is also a very complicated and time-consumingapproach. If you are interested in using only JavaScript, then check out the article,"Browser Compatible Drag and Drop Shopping Cart".
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:1.JQuery Library2.JQuery Drag and Drop UI API
Scenario
The scenario is a little different from the shopping cart basket. In this application, we aregoing to drag and drop the users to a room. Once a user is inserted into the room, an entryis written to the database. We can also delete the user from the room. In that case, theentry is deleted from the database. Check out the GIF using the link, "Drag and DropWith Persistence Using JQuery".
Database
There is one table,
tblRoomSessions
, that will hold the information about the user andthe 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 asimple
DataSet
container, fill it up with the data from
tblRoomSession
and assign it tothe
DataList
control. I have used a different approach, but it really does not matter howyou populate the
DataList
.
Student DataList Control ASPX Code
The ASPX code for the
DataList
control is pretty straightforward. Check out the code below:
<asp:DataList ID="dlRooms" EnableViewState="false" runat="server"RepeatColumns="3"RepeatDirection="Horizontal"><ItemTemplate><div id="div1" class="block"><div style="text-align:center; font-size:18px; border:solid 1px"><%# Container.ItemIndex + 1 %></div><li id="username"runat="server"><%# Eval("UserName") %></li><li id="roomId" runat="server"style="visibility:hidden"><%# Eval("RoomID") %></li><li><%# Eval("Subject") %></li><li><%# Eval("Description") %></li></div></ItemTemplate></asp:DataList>
 
When the
DataList
is populated, it will look something like the following screenshot:The numbers indicate the order in which students requested the room. This means that thestudent with number 
1
requested the room before the student with number 
2
. Thenumbers are generated using the following statement:
<%# Container.ItemIndex + 1 %>
You will also notice that the
<LI>
with an ID equal to
roomId
is marked as
hidden
. Youdon't need to embed the
roomId
with every
<LI>
, as you will know the
roomId
beforeyou will reach this page. The
<DIV>
element, which contains all the
<LI>
, has a classcalled
block
. Let's take a look at all the styles in the next section.
CSS Styles
There are several CSS styles used in this application. Let’s take a look at a few of them.
.block {border: 2px solid #0090DF;background-color: #68BFEF;width: 200px;height: 200px;margin: 10px;overflow:auto;padding:1em 1em 1em 1em;z-index:9999;cursor:move;}
The
block
style is used for all of the draggable items.
.roomItem {border: 2px solid #0090DF;

Activity (9)

You've already reviewed this. Edit your review.
1 hundred reads
1 thousand reads
Asfad Ahmad liked this
nurtenatam liked this
umeshvenkat liked this
biswadas2 liked this
adeyemmy liked this
kavitapsee liked this

You're Reading a Free Preview

Download
scribd
/*********** DO NOT ALTER ANYTHING BELOW THIS LINE ! ************/ var s_code=s.t();if(s_code)document.write(s_code)//-->