Click here to Skip to main content
11,634,634 members (62,956 online)
Click here to Skip to main content

A baseline Netflix Queue to start from

, 29 Oct 2009 CPOL 11.8K 101 10
Rate this:
Please Sign up or sign in to vote.
Everyone wants one, now you can have the functionality and style your own.

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>

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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Stephen Inglish
Software Developer (Senior) Harland Financial Solutions
United States United States
No Biography provided

You may also be interested in...

Comments and Discussions

 
GeneralHi There Pin
gokul789-Jul-10 12:39
membergokul789-Jul-10 12:39 
GeneralNice... Pin
Neetflash30-Oct-09 8:41
memberNeetflash30-Oct-09 8:41 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Terms of Use | Mobile
Web01 | 2.8.150728.1 | Last Updated 29 Oct 2009
Article Copyright 2009 by Stephen Inglish
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid