CODEWITHSUNDEEP
asp.net-corebootstrap-duallistbox
Hesham Gohary
Hesham Gohary

Reputation: 25

Populating Bootstrap dual list boxes with pre-selected items

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

Upvotes: 0

Views: 1755

Answers (1)

Ryan
Ryan

Reputation: 20116

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>

Upvotes: 2

Related Questions