Introduction
Everyone wants the Netflix Queue, but it seems you can't find it anywhere. So, you have to go down several paths trying to find a way to roll your own, which can be frustrating to say the least. Here is a starting point that you can begin from.
Using the Code
The magic of this queue comes from jqueryui.com's .sortable()
method, which does all the hard work for you. I added some of the methods to help get it closer to Netflix queue's appearance and functionality. If you don't know anything about jquery, you will have to read a tutorial before continuing, as none of this will make sense otherwise.
JavaScript
<script type="text/javascript" src="http://jqueryui.com/jquery-1.3.2.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/ui.core.js"></script>
<script type="text/javascript" src="http://jqueryui.com/ui/ui.sortable.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#sortable").sortable({
scroll: true , placeholder: 'item-selected' , start: function(event, ui) {
; }
, change: function(event, ui) {
var results = $("#sortable").sortable('toArray');
var i;
for (i = 0; i < results.length; i++) {
if (results[i] == "") {
break;
}
}
var source = ui.item[0];
$(source).find(":input").eq(0).val(i + 1);
}
, update: function(event, ui) {
var results = $("#sortable").find(":input");
var x;
for (x = 0; x < results.length; x++) {
results[x].value = x + 1;
}
}
});
});
function SaveOrder() {
var results = $("#sortable").sortable('toArray');
$("[id*=hfReorderResults]").val(results);
}
</script>
To allow for the updating of the textbox displaying the proposed priority, the change
method is bound, while the update
method is used to make sure all priorities are sequentially displayed correctly.
In order to get the values of the newly prioritized list back to the server, we can use the option .sortable('toArray')
, which returns all the IDs of the li
elements as an array of strings. Place that into a hidden field and use the ASP.NET postback to retrieve the data from the hidden field.
HTML
<asp:button text="Update Priority"
onclientclick="SaveOrder();" onclick="btnUpdate_Click"
runat="server" id="btnUpdate">
<asp:HiddenField ID="hfReorderResults" runat="server" />
<asp:ListView ID="lvReorder" runat="server" EnableViewState="False">
<LayoutTemplate>
<h5>
<div style="width: 100px; float: left;">
Proposed Priority</div>
<div style="width: 100px; float: left;">
ID</div>
<div style="width: 100px; float: left;">
Current Priority
</div>
<div>
Title
</div>
</h5>
<br style="clear: both;" />
<ul id="sortable">
<asp:PlaceHolder runat="server" ID="itemPlaceholder" />
</ul>
</LayoutTemplate>
<ItemTemplate>
<li id='<%# Eval("ID") %>' class="item">
<div style="width: 100px; float: left;">
<input type="text" id='txt<%# Eval("ID") %>'
value='<%# Eval("Priority") %>'
style="width: 25px; float: left;" disabled="disabled" />
</div>
<div style="width: 100px; float: left;">
#<%# Eval("ID")%>
</div>
<div style="width: 100px; display: block; float: left;">
<%# Eval("Priority") %>
</div>
<div style="float: left;">
<%# Eval("Description") %>
</div>
</li>
</ItemTemplate>
</asp:ListView>
<script type="text/javascript">
function SaveOrder() {
var results = $("#sortable").sortable('toArray');
$("[id*=hfReorderResults]").val(results);
}
</script >
Get the data from the hidden field, then parse the ID from the string and apply the priority to your object.
Code-behind
protected void btnUpdate_Click(object sender, EventArgs e)
{
List&t;queuedobject> prioritizedList = hfReorderResults.Value.Split(new char[] { ',' })
.ToList()
.ConvertAll<queuedobject>(s => new QueuedObject { ID = int.Parse(s) });
int index = 1;
prioritizedList.ForEach(r =>
{
r.Priority = index++;
});
List<queuedobject> modifiedList = (
from orderedRequest in prioritizedList
join dbRequest in GetDataFromDatabase()
on orderedRequest.ID equals dbRequest.ID
where orderedRequest.Priority != dbRequest.Priority
select orderedRequest
).ToList();
}
Points of Interest
Obviously, this needs some more styling, and Flash, but at least, now you can do some prioritization queuing out of the box. Attached in the download is a basic website with a page containing all of this code placed together.
History
- Oct. 29 2009 - Original post.