Как связать элементы списка множественного выбора, которые были динамически добавлены с помощью ядра .net Framework?

Question

Я использую .net core 2.2 Razor Pages для создания моего текущего проекта. Я хочу иметь возможность иметь два списка с несколькими вариантами выбора, в которых я передаю значения из одного списка в другой и наоборот. Я могу загрузить список слева со значениями, необходимыми с помощью привязки. У меня также есть кнопки для перевода X количества выбранных предметов в список справа. Это делается с помощью jquery. Однако, когда я отправляю свою форму и получаю OnPostAsync, значения из списка справа теряются, а значения слева - как если бы они никогда не удалялись.

Я понимаю, что для динамического добавления элементов управления, которыепривязать к свойству вы требуете добавления всех необходимых атрибутов. Я сравнил сгенерированный html из левого списка (сгенерированный ядром .net) с правым списком (сгенерированным мной с помощью jquery), и они идентичны, поэтому я не вижу, какие атрибуты могут отсутствовать ...

Ниже приведен пример кода, с которым я работаю.

```html
<table width="100%">
<tr>
    <td rowspan="2" class="role-fromto">
        <select asp-for="RolesLeft" asp-items="@(new SelectList(Model.RolesLeft, "Id", "Name"))" class="form-control" multiple>
        </select>
    </td>
    <td class="centered">
        <a id="role-add" class="button-pointer">>></a>
    </td>
    <td rowspan="2" class="role-fromto">
        <select asp-for="RolesRight" asp-items="@Model.RolesRight" class="form-control" multiple>
        </select>
    </td>
</tr>
<tr>
    <td class="centered">
        <a id="role-remove" class="button-pointer"><<</a>
    </td>
</tr>
</table>
```

(Обратите внимание, что есть кнопка отправки, которая выполняет OnPostAsync)

Свойства, которые являются обязательными, находятся в моем коде C #. Роли с левой стороны представляют собой список объектов Role, а с правой стороны я составил список SelectListItem, который я позже преобразую в методе OnPostAsync. Левый боковой список заполняется в методе OnGetAsync во время загрузки (я не помещаю этот код здесь, потому что он работает, и я хочу избежать путаницы с кодом раздувания):

```C#
[BindProperty]
public List<Role> RolesLeft { get; set; }

[BindProperty]
public List<SelectListItem> RolesRight { get; set; } = new List<SelectListItem>();
```

Наконец, JavaScript, который запускается, когда явыберите ссылку >> для перемещения по выбранным элементам вправо и выполните следующий код:

```JavaScript
$(document).ready(function () {
    $("#role-add").on("click", function () {
        moveRoles("RolesLeft", "RolesRight");
    });

    $("#role-remove").on("click", function () {
        moveRoles("RolesRight", "RolesLeft");
    });

    function moveRoles(from, to) {
        var items = $("#" + from + " option:selected").map(function () {
            return $(this);
        }).get();

        for (i = 0; i < items.length; i++) {
            $("#" + from + " option[value='" + items[i].val() + "']").remove();

            $("#" + to).append($('<option />', {
                value: items[i].val(),
                text: items[i].text()
            }));
        }
    }
});
```

Я не уверен, что что-то пропустил, но если да, пожалуйста, дайте мнезнаю, и я буду обновлять пост, чтобы предоставить больше информации. Как я могу заставить это работать должным образом? Я был в состоянии динамически генерировать другие типы элементов управления и связывать их, но этот мне не удался.