使用预选项目填充 Bootstrap 个双列表框

Question

我正在为我的网络应用程序使用 ASP.NET 核心 2.1。我在其中一个视图中有多个列表，每个列表都有数千个要显示给用户的项目，我正在使用 Bootstrap 双列表框来显示列表 (http://www.virtuosoft.eu/code/bootstrap-duallistbox/)。用户点击提交后，我将所选项目写入数据库。我的问题是：如果用户返回到相同的视图来编辑他的选择，我如何在右侧框中填充先前选择的项目（从数据库中检索）以保持双列表框的相同功能

Answer 1

我创建了一个 SelectedData class 来存储相应列表框选择的项目：

public class SelectedData
    {
        [Key]
        public int Id { get; set; }
        public string SelectedTradeKey{ get; set; }
        public string SelectedLocationKey { get; set; }
    }

在index方法中绑定dual listbox的数据时，需要将SelectedData中保存的item赋值给ViewModel中对应的字段进行反向绑定。

public IActionResult Index()
    { 
        ViewModel viewModel = new ViewModel()
        {
            LocationList = _dbContext.DimLocation.ToList(),
            TradeList = _dbContext.DimTrade.ToList(),
            SelectedTradeKeyList = _dbContext.SelectedData.Select(x => x.SelectedTradeKey).ToList(),
            SelectedLocationKeyList = _dbContext.SelectedData.Select(x => x.SelectedLocationKey).ToList(),
        };
        return View(viewModel);
    }

在Edit方法中，在ViewModel中获取到对应的selected item后，需要清除SelectedData中之前保存的所有数据，然后循环ViewModel中的selectkeylist数据，并保存在SelectedData中table.

[HttpPost]
public IActionResult Edit(ViewModel model)
    {
        if (ModelState.IsValid)
        {
            _dbContext.Database.ExecuteSqlCommand("TRUNCATE TABLE SelectedData");
            foreach (var item in model.SelectedLocationKeyList)
            {
                SelectedData data = new SelectedData();
                data.SelectedLocationKey = item;
                _dbContext.SelectedData.Add(data);
            }
            foreach (var item in model.SelectedTradeKeyList)
            {
                SelectedData data = new SelectedData();
                data.SelectedTradeKey = item;
                _dbContext.SelectedData.Add(data);
            }
            _dbContext.SaveChanges();
        }
       return RedirectToAction("Index");
    }

Index.cshtml:

@model WebApplication_core2_1.Models.ViewModel;
@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link href="~/duallistbox/bootstrap-duallistbox.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
    <script src="~/duallistbox/jquery.bootstrap-duallistbox.js"></script>
</head>
<body>
    @using (@Html.BeginForm("Edit", "DualListbox", FormMethod.Post))
    {
    <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>
    <div class="col-6">
        <input class="btn btn-primary" type="submit" value="submit" id="showValue" />
    </div>
    }
    <script>
        $('#ddlTrade').bootstrapDualListbox();
        $('#ddlLocation').bootstrapDualListbox();
    </script>

</body>
</html>

使用预选项目填充 Bootstrap 个双列表框

Populating Bootstrap dual list boxes with pre-selected items

asp.net-core

bootstrap-duallistbox