如何在MVC5中保存可排序的jquery表？

Question

我正在ASP.NET MVC5项目中使用jQueryUI的Sortable插件 （ Sortable plugin ）。一切正常，但是更改该表中的某些内容后，如何在SERVER端保存表（操作：“保存”按钮）？ 例如：在行中编辑，删除或创建新项目。

这是我的代码：

  <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>    '

这是我的jQuery脚本：

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

例如： http ： //jsfiddle.net/cdeutsch/WysJL/

Answer 1

您可以在表格行中设置自定义属性，如下所示：

 <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>

并包含保存更改​​的功能：

  $("#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

解决了！ 我将其发布到Controller后，通过将行更改为输入"<td><input type="input" value="@name"></td>"它