Javascript 如何绑定使用.net core framework动态添加的多选列表项?
我正在使用.NETCore2.2Razor页面构建我当前的项目。我希望能够有两个多选列表,其中我将值从一个列表传递到另一个列表,反之亦然。我能够使用绑定加载左侧列表所需的值。我也有按钮将X数量的选定项目转移到右侧列表。这是使用jquery完成的。但是,当我提交表单并获得OnPostAsync时,右侧列表中的值将丢失,左侧列表中的值似乎从未删除过 我理解,要动态添加绑定到属性的控件,需要添加所有必要的属性。我将.net core生成的左侧列表中生成的html与我使用jquery生成的右侧列表中生成的html进行了比较,它们是相同的,因此我看不出可能缺少哪些属性 下面是我正在使用的代码示例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生成的右侧列表中生成
```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()
}));
}
}
});
```
我不确定我是否遗漏了什么,但如果是,请让我知道,我会更新帖子以提供更多信息。我怎样才能让它正常工作?我已经能够动态生成其他类型的控件并将其绑定,但这一次我没有成功