用预选项目填充Bootstrap双列表框 [英] Populating Bootstrap dual list boxes with pre-selected items
问题描述
我正在为我的Web应用程序使用ASP.NET core 2.1.我在其中一个视图中有多个列表，每个视图都有数千个要显示给用户的项目，并且我正在使用Bootstrap Dual List Box来显示列表(
I am using ASP.NET core 2.1 for my web app. I have multiple lists in one of the views, each has thousands of items to be shown to the user and I am using Bootstrap Dual List Box to display the lists (http://www.virtuosoft.eu/code/bootstrap-duallistbox/). Once the user hits submit, I write the selected items to the database. My questions is: if user goes back to the same view to edit his selections, how can I populate the previously selected items (retrieved from the database) in the right box maintaining the same functionality of the dual list box
推荐答案
我创建了SelectedData类来存储由相应列表框选择的项目:
I created a SelectedData class to store the items selected by the corresponding listbox:
public class SelectedData
{
[Key]
public int Id { get; set; }
public string SelectedTradeKey{ get; set; }
public string SelectedLocationKey { get; set; }
}
使用索引方法绑定双列表框的数据时，需要将SelectedData中保存的项目分配给ViewModel中的相应字段以进行反向绑定.
When you bind the data of dual listbox in index method, you need to assign the saved items in SelectedData to the corresponding fields in ViewModel for reverse binding.
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中获得相应的选定项之后，需要清除所有先前保存在SelectedData中的数据，然后循环遍历ViewModel中的selectkeylist数据并将其保存在SelectedData表中./p>
In the Edit method, after you get the corresponding selected items in the ViewModel, you need to clear all the previously saved data in the SelectedData, and then cycle the selectkeylist datas in the ViewModel and save it in the 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:
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双列表框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
