How to properly reorder ids after exchange rows between tables (jQuery and ASP.NET MVC4)

Question

I have here a view model which has two list objects. I will display them as two tables in my view. I've already created EditorFor for them. I'll place four buttons (move one right, move all right, move one left, move all left) for the exchange operations. I've googled everywhere and no goal on how to accomplish that, because I need to move the entire object, replace all "name" and "id" tags, reorder indexes and so on, because this way my lists will be posted correctly. I'm using Datatables.net and jQuery too.

Does anybody have a clue on how to do that? Thank you in advance. The code goes below

EDIT Since list elements on ASP.NET MVC are indexed like "ListName_0__Code"(for Id) and "ListName[0].Code" (for name) how to properly reorder these indexes?

EditorFor

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

View

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

Exchange method (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

It will be much easier for you to calculate and set the name values with the index only before you submit the form, not for every move action.

@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
    });
};