List returning null when value are being passed to it in view with select2

See more:

C#

jQuery

database

programming

, +

Hi everyone so Im in the process of developing a checkout system. Right now it works fine checking out one item at a time but I would like to be able to checkout multiple at a time using select2 jquery. I have it setup but for some reason my List<string> Items property is returning null instead of storing the items that Im trying to check out and I cant seem to find the fix. Hoping someone can help me out here.

What I have tried:

Model Class and View Model:

    public class CheckOutItem
    {
        private string _timeAsString = "";

        public int Id { get; set; }

        public string Department { get; set; }

        public string Role { get; set; }

        public string UserId { get; set; }

        [NotMapped]
        public List<string> Items { get; set; }

        [DataType(DataType.DateTime)]
        [DisplayFormat(DataFormatString = "{MM/dd/yyyy h:mm tt}")]
        [Display(Name = "Date Checked Out")]
        public DateTimeOffset DateCheckedOut { get; set; }
            = DateTime.Now; 
}

    public class CheckOutItemVM
    {

        public int Id { get; set; }

        [ForeignKey("Item")]
        public int ItemId{ get; set; }

        public Item Item{ get; set; }

        [ForeignKey("Employee")]
        public int EmployeeId { get; set; }

        public Employee Employee { get; set; }

        public string Department { get; set; }

        public string Role{ get; set; }

        public string UserId { get; set; }

        [NotMapped]
        public List<string> Items{ get; set; }


        [DataType(DataType.DateTime)]
        [Display(Name = "Date Checked Out")]
        [DisplayFormat(DataFormatString = "{MM/dd/yyyy h:mm tt}")]
        public DateTimeOffset DateCheckedOut { get; set; }
            = DateTime.Now;

        public Item GetItemInstance()
        {
            return new Item
            {
                Id = 0,
                UserId = this.UserId,
                Department = this.Department,
                Role = this.Role,
                DateCheckedOut = this.DateCheckedOut,
                RecordedTime = this.RecordedTime,
                Items = this.Items
            };
        }
 }

Controller: "ItemID" in the ViewBag in CheckOutItem() is the string id of an item from the item class in the item database table

[HttpGet]
public IActionResult CheckOutItems()
{
     ViewBag.ItemId = new SelectList(_db.Items.ToList(), "ItemID", "ItemID");

    return View();
}

[HttpPost, ValidateAntiForgeryToken]
public IActionResult CheckOutItems(CheckOutItemVM iVM)
{
    var checkout = iVM.GetItemInstance();

    _itemManage.CheckOutItems(checkout);

    return View(iVM);
}

View:

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {

        $(".itemSelect").select2({
            placeholder: "Select Items(s) to CheckOut",
            tags: true,
            allowClear: true
        });

    });
</script>
<h1>@ViewData["Title"]</h1>
<hr />
<div class="row">
    <div class="col-md-4">
        <form asp-action="CheckOutItems">
            <div asp-validation-summary="ModelOnly" class="text-danger"></div>
            <div class="form-group">
                <label asp-for="UserId" class="control-label">User ID</label>
                <input id="UserId" asp-for="UserId" class="form-control" />
                <span asp-validation-for="UserId" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Department" class="control-label"></label>
                <select asp-for="Department" class="form-control">
                    <option selected value=""></option>
                    @foreach (var d in departments)
                    {
                        <option>@d.ToString()</option>
                    }
                </select>
                <span asp-validation-for="Department" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Role" class="control-label">Role</label>
                <select asp-for="Role" class="form-control">
                    <option selected value=""></option>
                    @foreach (var r in roles)
                    {
                        <option>@r.ToString()</option>
                    }
                </select>
                <span asp-validation-for="Role" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Items" class="control-label">Items To Checkout</label>
                <select asp-for="Items" class="itemSelect form-control" name="itemss" multiple asp-items="ViewBag.ItemId">
                    <option value="Select Items(s) To Checkout" disabled></option>
                </select>
            </div>
            <div class="form-group">
                <label asp-for="DateCheckedOut" class="control-label" hidden></label>
                <input asp-for="DateCheckedOut" class="form-control" hidden />
                <span asp-validation-for="DateCheckedOut" class="text-danger" hidden></span>
            </div>
            <div class="form-group">
                <input id="onCheckoutSubmit" type="submit" value="Check Out" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>