A baseline Netflix Queue to start from

• Download demo - 4.57 KB
• YouTube video showing the features

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() {

        // Define the sortable grid with options and methods
        $("#sortable").sortable({
            scroll: true // Allow scrolling
        , placeholder: 'item-selected' // Use a CSS class as the placeholder
        , start: function(event, ui) {
            ; // Not really used, but may be useful later
        }
        , change: function(event, ui) {
        // every time the item moves position while dragging
            var results = $("#sortable").sortable('toArray');

            var i;
            for (i = 0; i < results.length; i++) {
                if (results[i] == "") {
                    // when changing, the placeholder doesn't have
                    // the ID anymore, so we look for its blank position and store it
                    break;
                }
            }
            // and later place it in the textbox we found
            var source = ui.item[0];
            $(source).find(":input").eq(0).val(i + 1);
        }
        , update: function(event, ui) {
        // Fired when the mouse button is released and a change has taken place
            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');
        // Place the array of IDs into the hidden field for later retrieval by the page
        $("[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');
                // Place the array of IDs into the hidden field for later 
                // retrieval by the page
                $("[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++;
    });

    // Compare this list with the list from the database to 
    // find only those that have had a modified priority
    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();

    // Do something with this list that now contains 
    // only those records with a changed value
    // Database.UpdateList(modifiedList)
}

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.