如何将 Select2 SelectList 中的值存储为字符串

Question

我不知道如何表达这句话。所以我目前在我制作的结账系统中使用 select2。这个想法是，在要结帐的表单上，某人可以使用 select 列表（使用 select2）一次结帐多个项目，我希望将这些项目存储在数据库中的字符串中。它加载正常，但是当我尝试提交表单时，它 returns 出现错误，因为它返回 null 并且无法将值作为字符串获取。不知道该怎么办。任何意见是极大的赞赏。这是我目前所拥有的：

模型 Class 和视图模型：

    public class CheckedOutItem
    {

        public int Id { get; set; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string Department { get; set; }

        public string Role { get; set; }

        public string Items{ get; set; }

        public string UserId { get; set; }

        [NotMapped]
        public string[] SelectedItems { 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; }

        public string FirstName { get; set; }

        public string LastName { get; set; }

        public string Department { get; set; }

        public string Role { get; set; }

        public string Items{ get; set; }

        public string UserId { get; set; }

        [NotMapped]
        public string[] SelectedItems { 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 CheckOutItem GetCheckOuttInstance()
        {
            return new CheckOutItem
            {
                Id = 0,
                UserId = this.UserId,
                FirstName = this.FirstName,
                LastName = this.LastName,
                Items = this.Items,
                Department = this.Department,
                Role= this.Role,
                DateCheckedOut = this.DateCheckedOut,
                SelectedItems = this.SelectedItems,
            };
        }

    }

在控制器中：

 [HttpGet]
        public IActionResult CheckOutItems()
        {
            ViewBag.ItemId= new SelectList(_itemRepo.ReadItemList(), "Id", "Name");
            return View();
        }

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


            var itemsToCheckout = new CheckOutItemVM
            {
                UserId = checkout.UserId,
                FirstName = checkout.FirstName,
                LastName = checkout.LastName,
                Department = checkout.Department,
                Role = checkout.Role,
                DateCheckedOut = checkout.DateCheckedOut,
                SelectedItems = checkout.SelectedItems,
                Items = checkout.Items
            };

            _itemRepo.CheckOutItems(checkout);

            RedirectToAction("CheckOutItems", "Item");
            //ModelState.Clear();

            return View(itemsToCheckout);
        }

在视图中：

<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 () {

        var items = $(".itemSelect").select2();
    });
</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="FullName" class="control-label">Full Name</label>
                <input id="FullName" asp-for="FullName" class="form-control" />
                <span asp-validation-for="FullName" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Department" class="control-label"></label>
               <input id="Department" asp-for="Department" class="form-control" />
                <span asp-validation-for="Department" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Role" class="control-label">Role</label>
               <input id="Role" asp-for="Role" class="form-control" />
                <span asp-validation-for="Role" class="text-danger"></span>
            </div>
            <div class="form-group">
                <label asp-for="Items" class="control-label">Items</label>
                <select asp-for="Items" class="itemSelect form-control" name="items" 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 type="submit" value="Check Out" class="btn btn-primary" />
            </div>
        </form>
    </div>
</div>

<div>
    <a asp-action="Index">Back to List</a>
</div>

@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");
    }
    <script src="~/select2/js/select2.full.min.js"></script>
    <script src="~/select2/js/select2.js"></script>

Answer 1

我遇到了同样的问题，我做错的是 name="items" 它应该是 name="items[]"。试一试

Answer 2

你的'items'属性是一个字符串。表单中的 multi-select 使用集合并将您 select 中的每个项目添加到 asp-for 中指定的集合中。因此，模型中的属性应该是集合类型（例如 string[]）。然后在您的控制器中，您可以将项目连接到一个字符串并将其保存到数据库中。

Answer 3

1.You可以尝试使用public string[] Items { get; set; }或public List<string> Items { get; set; }，如T. van Schagen所说。

结果： 2.Or你仍然可以使用public string Items{ get; set; }，在表单posting.Here之前使用js将数据保存到隐藏输入是一个演示：

    <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="FullName" class="control-label">Full Name</label>
                    <input id="FullName" asp-for="FullName" class="form-control" />
                    <span asp-validation-for="FullName" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Department" class="control-label"></label>
                    <input id="Department" asp-for="Department" class="form-control" />
                    <span asp-validation-for="Department" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Role" class="control-label">Role</label>
                    <input id="Role" asp-for="Role" class="form-control" />
                    <span asp-validation-for="Role" class="text-danger"></span>
                </div>
                <div class="form-group">
                    <label asp-for="Items" class="control-label">Items</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>
                    <input hidden name="Items" id="newItem"/>
                </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 type="submit" value="Check Out" class="btn dhl-button" />
                </div>
            </form>
        </div>
    </div>
    
    <div>
        <a asp-action="Index">Back to List</a>
    </div>
@section Scripts {
<script>
    $(document).ready(function () {

        var items = $(".itemSelect").select2();
    });
    $("form").submit(function ()
    {
        $("#newItem").val($("#Items").val().toString());
    })
</script>
   
}

结果：

如何将 Select2 SelectList 中的值存储为字符串

How to Store Values from Select2 SelectList as String

c#

jquery

asp.net-core

jquery-select2