C# 从asp.net core中的引导双重列表检索所选值

我正在使用.NET core 2.1构建一个web应用程序。在其中一个视图中有多个选择列表，每个列表包含数千项供用户选择，因此我决定使用引导双列表。我对此设置有2个问题： 1-当我点击submit按钮时，post action方法的模型不包含用户在双列表中选择的项目-列表右侧的项目 2-我需要保存用户选择的项目，以便他每次登录应用程序时都可以拥有相同的列表。原始未选择列表将从数据库中填充所有显示的项目，而不考虑用户上次使用应用程序时的选择 这是我的密码：

ViewModel.cs：

public ViewModel() 
{
    TradeList = new List<DimTrade>();
    LocationList = new List<DimLocation>();
}
public List<DimTrade> TradeList { get; set; }
public List<DimLocation> LocationList { get; set; }

问题是TradeList和LoactionList对象总是空的

我感谢你在这两个问题上的帮助

1-当我点击submit按钮时，post action方法的模型不包含用户在双列表中选择的项目-列表右侧的项目

正如@Charles提到的，如果您检查请求，您会发现只有所选的下拉列表是通过表单数据发送的，如下所示

public List<DimTrade> TradeList { get; set; }
public List<DimLocation> LocationList { get; set; }

public List<string> SelectedTradeKeyList { get; set; }
public List<string> SelectedLocationKeyList { get; set; } 

要获取ddlTrade和ddlLocation的选定值，可以尝试在视图模型类中修改和包含选定值的属性，如下所示

public List<DimTrade> TradeList { get; set; }
public List<DimLocation> LocationList { get; set; }

public List<string> SelectedTradeKeyList { get; set; }
public List<string> SelectedLocationKeyList { get; set; } 

然后修改这两个下拉列表的html和js代码，如下所示

<div class="col-8">
    <select id="ddlTrade" class="form-control" asp-for="@Model.SelectedTradeKeyList" asp-items="@(new SelectList(Model.TradeList, "TradeKey", "Name"))"
            placeholder="Please select" multiple="multiple"></select>
</div>

<div class="col-8">
    <select id="ddlLocation" class="form-control" asp-for="@Model.SelectedLocationKeyList" asp-items="@(new SelectList(Model.LocationList, "LocationKey", "Name"))"
            placeholder="Please select" multiple="multiple"></select>
</div>

$('#ddlTrade').bootstrapDualListbox();
$('#ddlLocation').bootstrapDualListbox();

测试结果

注意：您也可以尝试其他方法来达到您的要求。例如，您可以根据控制器操作预期的参数动态生成表单数据，然后使用jQuery等提交它

2-我需要保存用户选择的项目，这样他每次登录应用程序时都可以拥有相同的列表

您可以尝试在浏览器web存储中维护用户选择的选项，以便可以执行附加的js代码逻辑来设置下拉列表的选择选项

1-当我点击submit按钮时，post action方法的模型不包含用户在双列表中选择的项目-列表右侧的项目

正如@Charles提到的，如果您检查请求，您会发现只有所选的下拉列表是通过表单数据发送的，如下所示

public List<DimTrade> TradeList { get; set; }
public List<DimLocation> LocationList { get; set; }

public List<string> SelectedTradeKeyList { get; set; }
public List<string> SelectedLocationKeyList { get; set; } 

要获取ddlTrade和ddlLocation的选定值，可以尝试在视图模型类中修改和包含选定值的属性，如下所示

public List<DimTrade> TradeList { get; set; }
public List<DimLocation> LocationList { get; set; }

public List<string> SelectedTradeKeyList { get; set; }
public List<string> SelectedLocationKeyList { get; set; } 

然后修改这两个下拉列表的html和js代码，如下所示

<div class="col-8">
    <select id="ddlTrade" class="form-control" asp-for="@Model.SelectedTradeKeyList" asp-items="@(new SelectList(Model.TradeList, "TradeKey", "Name"))"
            placeholder="Please select" multiple="multiple"></select>
</div>

<div class="col-8">
    <select id="ddlLocation" class="form-control" asp-for="@Model.SelectedLocationKeyList" asp-items="@(new SelectList(Model.LocationList, "LocationKey", "Name"))"
            placeholder="Please select" multiple="multiple"></select>
</div>

$('#ddlTrade').bootstrapDualListbox();
$('#ddlLocation').bootstrapDualListbox();

测试结果

注意：您也可以尝试其他方法来达到您的要求。例如，您可以根据控制器操作预期的参数动态生成表单数据，然后使用jQuery等提交它

2-我需要保存用户选择的项目，这样他每次登录应用程序时都可以拥有相同的列表

您可以尝试在浏览器web存储中维护用户选择的选项，以便可以执行附加的js代码逻辑来设置下拉列表的选择选项

---

您可以使用jquery获取所有选定选项的值和文本，然后将它们传递给编辑操作：

<div class="col-8">
    <select id="ddlTrade" class="form-control" asp-for="@Model.TradeList" asp-items="@(new SelectList(Model.TradeList, "TradeKey", "Name"))"
            placeholder="Please select" multiple="multiple" name="TradeList"></select>
</div>
<div class="col-8">
    <select id="ddlLocation" class="form-control" asp-for="@Model.LocationList" asp-items="@(new SelectList(Model.LocationList, "LocationKey", "Name"))"
            placeholder="Please select" multiple="multiple" name="LocationList"></select>
</div>
<div class="col-6">
    <input class="btn btn-primary" type="button" value="submit" id="showValue" />
</div>
<script>
    $('[name=TradeList]').bootstrapDualListbox();
    $('[name=LocationList]').bootstrapDualListbox();
</script>
<script>
    $(function () {
        $("#showValue").click(function () {
            var TradeList = [];
            var LocationList = [];
            $("[id*=-selected-list_TradeList] option").each(function () {
                var Trade = {
                    TradeKey: $(this).val(),
                    Name: $(this).text()
                };
                TradeList.push(Trade);
            });
            $("[id*=-selected-list_LocationList] option").each(function () {
                var Location = {
                    LocationKey: $(this).val(),
                    Name: $(this).text()
                };
                LocationList.push(Location);
            });
            var model = {
                TradeList: TradeList,
                LocationList: LocationList
            }
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: '/DualListbox/Edit',
                data: model,
                success: function (data) {
                }
            });
        });
    })
</script>

结果:

---

您可以使用jquery获取所有选定选项的值和文本，然后将它们传递给编辑操作：

<div class="col-8">
    <select id="ddlTrade" class="form-control" asp-for="@Model.TradeList" asp-items="@(new SelectList(Model.TradeList, "TradeKey", "Name"))"
            placeholder="Please select" multiple="multiple" name="TradeList"></select>
</div>
<div class="col-8">
    <select id="ddlLocation" class="form-control" asp-for="@Model.LocationList" asp-items="@(new SelectList(Model.LocationList, "LocationKey", "Name"))"
            placeholder="Please select" multiple="multiple" name="LocationList"></select>
</div>
<div class="col-6">
    <input class="btn btn-primary" type="button" value="submit" id="showValue" />
</div>
<script>
    $('[name=TradeList]').bootstrapDualListbox();
    $('[name=LocationList]').bootstrapDualListbox();
</script>
<script>
    $(function () {
        $("#showValue").click(function () {
            var TradeList = [];
            var LocationList = [];
            $("[id*=-selected-list_TradeList] option").each(function () {
                var Trade = {
                    TradeKey: $(this).val(),
                    Name: $(this).text()
                };
                TradeList.push(Trade);
            });
            $("[id*=-selected-list_LocationList] option").each(function () {
                var Location = {
                    LocationKey: $(this).val(),
                    Name: $(this).text()
                };
                LocationList.push(Location);
            });
            var model = {
                TradeList: TradeList,
                LocationList: LocationList
            }
            $.ajax({
                type: 'post',
                dataType: 'json',
                url: '/DualListbox/Edit',
                data: model,
                success: function (data) {
                }
            });
        });
    })
</script>

结果:

---

您是否尝试查看原始请求查询/发布参数？您是否尝试查看原始请求查询/发布参数？谢谢，提供的答案完全解决了第一个问题。对于第二个问题，我正在寻找一个解决方案，在该解决方案中，我将数据库中存储的项目添加到列表中。以下是对我有效的答案Thank@Xing Thank，提供的答案完全解决了第一个问题。对于第二个问题，我正在寻找一个解决方案，在这个解决方案中，我向列表中提供存储在数据库中的项目。以下是对我有用的答案，谢谢@Xing