Making a list sortable in ASP.NET MVC using jquery

Question

I'm trying to figure out how to implement jquery sortable..

I have a page with a bunch of attributes grouped by category, like this:

CategoryA
- Attribute1
- Attribute2
- Attribute3
- Attribute4
CategoryB
- Attribute5
- Attribute6
- Attribute7
- Attribute8
CategoryC
- Attribute9
- Attribute10
- Attribute11
- Attribute12

The ultimate solution would be to be able to sort everything; sort parents (categories), sort attributes (children) and move attributes between categories with Drag-And-Drop!.... But I'm guessing that is stretching it right now..

So, just being able to sort the attributes under each category with Drag-And-Drop would be a nice start.. I've been looking at jquery sortable which seems to do this, but how do I implement it? I'm guessing I need one script for each category...

Something like this: http://www.webresourcesdepot.com/wp-content/uploads/file/jquerydragdrop/

ASP.NET 4, EF 4, ASP.NET MVC 3, Razor views...

This is what I've got to work with:

@using (Html.BeginForm())
{
    @Html.ValidationSummary(true)
    <fieldset>
        <legend>ArrangeAttributesViewModel</legend>
        @foreach (var _category in Model.AllAttributesForCheckBoxList.AttributeList)
        {
            <p>
            </p>
            <p>
            </p>
            <div id="@_category.CategoryName">
                @_category.CategoryName
                <ul>
                    @foreach (var item in _category.AttributesList)
                    {
                        <li id="@item.Priority.ToString()">
                            @Html.CheckBox(item.AttributeID.ToString(), item.Chosen)
                            @(" " + item.AttributeTitle)
                        </li>
                    }
                </ul>
            </div>
        }
        <p>
            @Html.ActionLink("Create New", "Create")
        </p>
        <p>
        </p>
        <p>
            <input type="submit" value="Save Changes" />
        </p>
    </fieldset>
}

Any ideas? Any help is much appreciated!

Unless priority is alphanumeric and starts with a letter, you're going to have invalid ids for your attribute li elements. — tvanfosson
– tvanfosson, Commented Jun 20, 2011 at 12:21

tvanfosson · Accepted Answer · 2011-06-20 12:42:52Z

2

You don't need to iterate over them, but using a class for the ul elements would help to distinguish them. Using containment parent to constrain their movement to the parent element might make the intent clearer, but unless you specify the connectWith option they should stay within their respective lists. See a simple example at http://jsfiddle.net/R4afy/

    <div id="@_category.CategoryName">
        @_category.CategoryName
        <ul class="sortable-container">
            @foreach (var item in _category.AttributesList)
            {
                <li id="@("P" + item.Priority.ToString())">
                    @Html.CheckBox(item.AttributeID.ToString(), item.Chosen)
                    @(" " + item.AttributeTitle)
                </li>
            }
        </ul>
    </div>

<script type="text/javascript">
     $(function() {
          $('.sortable-container').sortable({
              containment: 'parent'
          });
     });
</script>

Note: This doesn't address persisting the sort order chosen. To do that you'd need additional code outside the scope of your stated problem. Unless the ability to sort is simply to help the user identify elements on this page, I think you'll find recording the order is pretty important.

edited Jun 20, 2011 at 12:42

answered Jun 20, 2011 at 12:32

tvanfosson

534k102 gold badges703 silver badges801 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

bek Over a year ago

Can't seem to get it to work, which jquery files do I need to add? Now I have: jquery-ui-1.8.11.js and jquery-1.5.1.js

tvanfosson Over a year ago

@bek for the example I used jQuery 1.6 and jQuery UI 1.8.13.

bek Over a year ago

Apparently the order of which the two script references are written matters, ui should be below the other... Now it's sortable, just trying to figure out how to save the new order..

tvanfosson Over a year ago

@bek - yes, jQuery UI is dependent on jQuery itself.

bek Over a year ago

Did I say I was a beginner ;)

jszpila · Accepted Answer · 2011-06-20 12:23:41Z

0

Not to toot my own horn, but I think a plugin I wrote is just right for what you're trying to do. It lets you sort lists depending on HTML data attributes, so you might have to tweak your markup a bit, but in general I think it's what you're looking for.

https://github.com/jszpila/jquery.listSorter

answered Jun 20, 2011 at 12:23

jszpila

7069 silver badges24 bronze badges

2 Comments

Mark Redman Over a year ago

unfortunately your web link isnt working.. is there a demo on there?

bek Over a year ago

Thanks for your reply, I was kind of vague.. I would like to have some kind of drag-and-drop sorting, cause there's no property to sort by..

Collectives™ on Stack Overflow

Making a list sortable in ASP.NET MVC using jquery

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related