Javascript 如何绑定使用.net core framework动态添加的多选列表项?

Javascript 如何绑定使用.net core framework动态添加的多选列表项?,javascript,c#,jquery,.net-core,.net-core-2.2,Javascript,C#,Jquery,.net Core,.net Core 2.2,我正在使用.NETCore2.2Razor页面构建我当前的项目。我希望能够有两个多选列表,其中我将值从一个列表传递到另一个列表,反之亦然。我能够使用绑定加载左侧列表所需的值。我也有按钮将X数量的选定项目转移到右侧列表。这是使用jquery完成的。但是,当我提交表单并获得OnPostAsync时,右侧列表中的值将丢失,左侧列表中的值似乎从未删除过 我理解,要动态添加绑定到属性的控件,需要添加所有必要的属性。我将.net core生成的左侧列表中生成的html与我使用jquery生成的右侧列表中生成

我正在使用.NETCore2.2Razor页面构建我当前的项目。我希望能够有两个多选列表,其中我将值从一个列表传递到另一个列表,反之亦然。我能够使用绑定加载左侧列表所需的值。我也有按钮将X数量的选定项目转移到右侧列表。这是使用jquery完成的。但是,当我提交表单并获得OnPostAsync时,右侧列表中的值将丢失,左侧列表中的值似乎从未删除过

我理解,要动态添加绑定到属性的控件,需要添加所有必要的属性。我将.net core生成的左侧列表中生成的html与我使用jquery生成的右侧列表中生成的html进行了比较,它们是相同的,因此我看不出可能缺少哪些属性

下面是我正在使用的代码示例

```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代码中。左侧的角色是角色对象列表,而右侧的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()
            }));
        }
    }
});
```
我不确定我是否遗漏了什么,但如果是,请让我知道,我会更新帖子以提供更多信息。我怎样才能让它正常工作?我已经能够动态生成其他类型的控件并将其绑定,但这一次我没有成功