c# - 如何在表之间交换行后正确地重新排序 ID(jQuery 和 ASP.NET MVC4)

Question

我这里有一个 View 模型，它有两个列表对象。我将在我的 View 中将它们显示为两个表。我已经为他们创建了 EditorFor。我将放置四个按钮(向右移动一个，向右移动一个，向左移动一个，向左移动一个)用于交换操作。我到处搜索，但没有关于如何实现的目标，因为我需要移动整个对象，替换所有“名称”和“id”标签，重新排序索引等等，因为这样我的列表将被正确发布。我也在使用 Datatables.net 和 jQuery。

有没有人知道如何做到这一点？先感谢您。代码如下

编辑由于 ASP.NET MVC 上的列表元素的索引类似于“ListName_0__Code”(对于 Id)和“ListName[0].Code”(对于名称)，如何正确地重新排序这些索引？

编辑器

@model ViewModels.UserPermissionDetails

<tr id="@Model.Id">
    <td>
        @Html.HiddenFor(m => m.Code)
        @Html.HiddenFor(m => m.Login)
        @Html.HiddenFor(m => m.Name)
        @Html.HiddenFor(m => m.IdEmpUser)
        @Html.DisplayFor(m => m.Code)
    </td>
    <td>@Html.DisplayFor(m => m.Login)</td>
    <td>@Html.DisplayFor(m => m.Nome)</td>
</tr>

查看

<table id="tbBlock">
    <thead>
        <tr>
            <th>Code</th>
            <th>Login</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        @Html.EditorFor(model => model.BlockList)
    </tbody>
</table>
<table id="tbAllow">
    <thead>
        <tr>
            <th>Code</th>
            <th>Login</th>
            <th>Name</th>
        </tr>
    </thead>
    <tbody>
        @Html.EditorFor(model => model.AllowList)
    </tbody>
</table>

交换方法(jQuery)

function addElement(OriginTableId, DestinyTableId, OriginListName, DestinyListName) {
    var originTb = $(OriginTableId).DataTable(); //initialize DataTable.Net for origin table
    var destinyTb = $(DestinyTableId).DataTable(); //initialize DataTable.Net for destiny table
    var objectLine = $('#' + originTb.$('tr.selected').attr('id')); //get selected line that will be moved

    //Name replacing code piece
    var elementsFromLine = $(objectLine.children()[0]).children().toArray();
    elementsFromLine.forEach(function (item, index, array) {
        $(item).attr('id', $(item).attr('id').replace(OriginListName, DestinyListName)); //Replace 'OriginListName_0' with 'DestinyListName_0'
        $(item).attr('name', $(item).attr('name').replace(OriginListName, DestinyListName)); //Replace 'OriginListName[0]' with 'DestinyListName[0]'
    });

    //Reordering code piece here, how to?

    $(DestinyTableId + ' tbody').append(objectLine.clone(true, true));
    objectLine.parent().remove();
}

Answer 1

仅在提交表单之前使用索引计算和设置 name 值会容易得多，而不是针对每个移动操作。

@Html.HiddenFor(m => m.Code, new { @class = "code" } })
// same for all the inputs you send to server


$("button[type='submit']").on("click", function (e) {
    e.preventDefault();

    updateIndexes();
    $("form").submit();
});

function updateIndexes() {
    $("#tbAllow").find("tbody").children("tr").each(function (i) {
        var prefix = "BlockList[" + i + "].";
        var $tr = $(this);

        $tr.find("input.code").attr("name", prefix + "Code");
        $tr.find("input.login").attr("name", prefix + "Login");
        // same for all the inputs you send to server
    });
};