jquery sortable save to database

Question

User-729601932 posted

Hello there,

i use jquery sortable to sort data from a database

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>


<script type="text/javascript">
    $(document).ready(function () {
        $('#clueTable tbody').sortable().disableSelection();
    });
</script>

<table id="clueTable" class="display">
    <thead>
        <tr>
            <th>ID</th>
            <th>x1</th>
            <th>x2</th>
            <th>Sort</th>
        </tr>
    </thead>

    <tbody>
    @foreach (var item in Model.Test.OrderBy(s => s.Sort))
    {
        <tr>
            <td>@Html.DisplayFor(modelItem => item.ID)</td>
            <td>@Html.DisplayFor(modelItem => item.x1)</td>
            <td>@Html.DisplayFor(modelItem => item.x2)</td>
            <td>@Html.DisplayFor(modelItem => item.Sort)</td>
        </tr>
    }
    </tbody>
</table>

This works without any problems.
But now I want to write the sorting into the database field "Sort". Can someone tell me how I get that way?

Answer 1

User1168443798 posted

Hi Paul_412,

>> But now I want to write the sorting into the database field "Sort".

Do you mean you want to change Sort filed before saving the model to database, then the database could get the latest Sort?

If so, I suggest you follow steps below to achieve your requirement.

1.Change table code like below to add id attribute

<table id="clueTable" class="display">
    <thead>
        <tr>
            <th>ID</th>
            <th>x1</th>
            <th>x2</th>
            <th>Sort</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var item in Model.OrderBy(s => s.Name))
        {
            <tr id="@item.Id">
                <td >@Html.DisplayFor(modelItem => item.Id)</td>
                <td>@Html.DisplayFor(modelItem => item.Name)</td>
            </tr>
        }
    </tbody>
</table>

2.After re-sort, you could try code below to get current sort result

    $('#result').click(function () {
        var result = $('#clueTable tbody').sortable("toArray", { attribute: 'id' });
        console.log(result);
    });

3.Then, you could loop the sort result to update your Sort field row by row

Best Regards,

Edward

Answer 2

User-729601932 posted

Edward Z

3.Then, you could loop the sort result to update your Sort field row by row

Hi Edward,

can you tell me how i can update the sort field.

Sorry, but i am a absolut beginner regarding asp.net

Answer 3

User1168443798 posted

Hi Paul_42,

Did you get the id arrays?

You could pass these ids to Controller by ajax, and then update them to sort field by index of them.

If you have trouble to send ids by ajax or update fields after receiving them at Controller, please feel free to post new threads, we could discuss them separately.

Best Regards,

Edward

Answer 4

User-1678984554 posted

Hi Paul,

I have a similar problem and thought you could give me a hand. 

This is what I have in my View.cshtml

        <table id="chapterList">
            <thead>
                <tr class="ui-state-default">
                    <th colspan="4">Ordre</th>
                    <th colspan="4">Num</th>
                    <th colspan="4">Titre</th>
                </tr>
            </thead>
            <tbody>
                @foreach (var item in Model.Chapters)
                {
                    <tr class="ui-state-default">
                        <td colspan="4"><span class="glyphicon glyphicon-move"></span></td>
                        <td colspan="4">@Html.DisplayFor(modelItem => item.Num)</td>
                        <td id="[e-mail](modelItem => item.Id)" colspan="4">@Html.DisplayFor(modelItem => item.Title)</td>
                        <td colspan="4"> @Html.ActionLink("Voir", "ChapterDetails", new { chapterId = item.Id, courseId = Model.Id })</td>
                        <td colspan="4"> @Html.ActionLink("Modifier", "EditChapter", new { chapterId = item.Id, courseId = Model.Id })</td>
                        <td colspan="4"> @Html.ActionLink("Ajouter une lesson", "AddLesson", new { chapterId = item.Id, courseId = Model.Id })</td>
                    </tr>
                }
            </tbody>
        </table>

        <div id="validateOrder" class="form-group" style="display:none" :>
            <div class="col-md-offset-2 col-md-10">
                <input id="validateOrderBtn" type="submit" value="Valider le tri" class="btn btn-default" />
            </div>
        </div>

I tried using JQuery Sortable today but apart from being able to change order on client-side, I don't know how to send the data to my controller. 

This is my JQuery code that uses the "Sortable" widget. 

    $(document).ready(function () {
        $("#chapterList tbody").sortable({
            update: function (event, ui) {
                $(this).children().each(function (index) {
                    $(this).find("td:nth-child(2)").html(index + 1)
                    var result = $("#chapterList tbody").sortable("toArray", { attribute: 'id' });
                    console.log(result);                    
                });
                $("#validateOrder").show();
            }
        });
        $(function () {
            $("#validateOrderBtn").button();
            $("#validateOrderBtn").click(function () {
                alert('');
                //var result = $("#chapterList tbody").sortable("toArray", { attribute: 'id' });
                var result = $("#chapterList tbody").sortable("toArray");
                console.log(result);
                debugger;
                //$.ajax({
                //    url: '/Admin/SortedLists/',
                //    data: { items: $("#sortable").sortable('toArray') },
                //    type: 'post',
                //    traditional: true
                //});
            });

        }); 
    });

Tried what you suggested and consoled.log the result of what is put into the array.. All I get is an Array of empty strings.

I consider giving up trying to get those data and just collect them myself looping though the <tr> children and saving them myself but that I'd like to understand that "Sortable" thing and see how it should work.

Thanks in advance for your help

All the best