Populating Bootstrap dual list boxes with pre-selected items

前端未结

关注

 1  1611

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

相关标签:

1条回答

野性不改

2021-01-28 09:14

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; }
    }

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);
    }

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:

@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>

0 讨论(0)