CODEWITHSUNDEEP
jqueryasp.net-mvcasp.net-mvc-3razorjquery-ui-sortable
bek
bek

Reputation: 711

Making a list sortable in ASP.NET MVC using jquery

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:

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!

Upvotes: 0

Views: 3425

Answers (2)

tvanfosson
tvanfosson

Reputation: 532435

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.

Upvotes: 2

jszpila
jszpila

Reputation: 706

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

Upvotes: 0

Related Questions