How to save sortable jquery table in MVC5?

Question

I'm using Sortable plugin from jQueryUI ( Sortable plugin ) in ASP.NET MVC5 project.All works fine, but how can I save in SERVER side(with action: "Save" button) table after changed something in this table? for exemp: edited, removed or created new item in row.

Here is my code:

  <table class="table table-bordered table-striped table-condensed table-hover smart-form has-tickbox">
                                                        <thead>
                                                            <tr>
                                                                <th>Number</th>
                                                                <th>Step</th>
                                                                <th>Edit</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody id="sortable"  >
                                                            @{
                                    foreach (var item in Model.vKrokyReseni)
                                    {


                                                        <td>@item.poradi</td>
                                                        <td class="editable">@item.popis</td>                                                        
                                                        <td><input type="button" value="Delete" /></td>
                                                    </tr>
                                    }
                                                            }
                                                        </tbody>
                                                    </table>    '

Here is my jQuery script:

<script>
$(function () {
    $("#sortable").sortable({
        placeholder: "ui-state-highlight"
    });
    $("#sortable").disableSelection();
});

Here is exemple: http://jsfiddle.net/cdeutsch/WysJL/

Answer 1

You can set a custom property in your table rows like this:

 <table id="myTable">
        <tbody>
        <tr data-id="1">
            <td>1</td>
            <td>Blah Blah Blah Blah</td>
        </tr>
        <tr data-id="2">
            <td>2</td>
            <td>2222 22222 22222 2222 22222</td>
        </tr>
        <tr data-id="3">
            <td>3</td>
            <td>Test Test Test Test Test</td>
        </tr>
        <tr data-id="4">
            <td>4</td>
            <td>4444 4444 4444 4444 4444</td>
        </tr>
        <tr data-id="5">
            <td>5</td>
            <td>Hi Hi Hi Hi Hi Hi</td>
        </tr>
        <tr data-id="6">
            <td>6</td>
            <td>Bye Bye Bye Bye Bye Bye Bye</td>
        </tr>
        </tbody>
    </table>

and include a function to save the changes:

  $("#saveBtn").click(function(){
        $("#myTable tr").each(function(index){
            console.log("original position: " +$(this).attr("data-position") + " New position: " + (index+1));
            //save your new order
        })
    });

http://jsfiddle.net/WysJL/89/

Answer 2

SOLVED! I've solved it by change rows to input "<td><input type="input" value="@name"></td>" after it I posted to Controller