如何将 Select2 SelectList 中的值存储为字符串
Posted
技术标签:
【中文标题】如何将 Select2 SelectList 中的值存储为字符串【英文标题】：How to Store Values from Select2 SelectList as String 【发布时间】：2021-09-19 02:23:19 【问题描述】：我不知道该怎么说这句话。所以我目前正在使用 select2 和我正在制作的结帐系统。这个想法是，在结帐的表单上，有人可以使用选择列表（使用 select2）一次结帐多个项目，我希望将这些项目存储在数据库中的字符串中。它加载正常，但是当我尝试提交表单时，它返回一个错误，因为它返回 null 并且无法将值作为字符串获取。不知道该怎么办。任何意见是极大的赞赏。这是我到目前为止所拥有的：
模型类和视图模型：
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>
【问题讨论】：
【参考方案1】：1.您可以尝试使用public string[] Items get; set; 或public List<string> Items get; set; ，如T. van Schagen所说。
结果：
2.或者你仍然可以使用public string Items get; set; ，在表单发布之前使用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>
结果：
【讨论】：
在发布之前进行隐藏输入就像一种魅力。 Idk 为什么使用数组或列表不起作用，但我很高兴现在已经过去了。谢谢！ 所以这就是我想要的，但现在我面临另一个挑战。如果我希望能够按照我当前设置的方式签入系统中的设备，则从该字符串中读取项目，并在签入后将其从签出列表中删除，但字符串为二合一（例如：“1”，“2”）我似乎不能这样做。关于如何从该字符串中获取“2”并在不需要后删除的任何建议？这就是为什么列表可能会更容易我似乎无法弄清楚为什么在我的设置中使用列表总是返回 null【参考方案2】：我遇到了同样的问题，我做错的是name="items" 它必须是name="items[]"。试试看
【讨论】：
感谢您的建议。这确实解决了它在不抛出错误的情况下不提交的问题，但是这些值仍然没有传递给控制器并存储在我需要它们的位置。还有什么建议吗？ 他们没有在控制器中“到达”？你确定你称呼他们的方式正确吗？ var checkout = itemVM.GetCheckOuttInstance();字符串 joinItems = ""; foreach(var i in checkout.SelectedItems) joinItems = string.Join(',', i); var itemsToCheckout = new CheckOutItemsVM UserId = checkout.UserId, FirstName = checkout.FirstName, LastName = checkout.LastName, Department = checkout.Department, Role = checkout.Role, DateCheckedOut = checkout.DateCheckedOut, SelectedItems = checkout.SelectedItems, Items = string.Join(',',checkout.SelectedItems.ToString()) ; _itemRepo.CheckOutItems(结帐); 这就是我在控制器中尝试获取它们的方法，但我认为我完全没有做对。这是我第三次尝试。它仍然返回 null【参考方案3】：您的“项目”属性是一个字符串。表单中的多选使用集合并将您选择的每个项目添加到asp-for 中指定的集合中。因此模型中的属性应该是一个集合类型（例如string[]）。然后在您的控制器中，您可以将项目连接到一个字符串并将其保存到数据库中。
【讨论】：
在将其更改为字符串 [] 甚至是列表并加入它们之后，它仍然没有返回任何内容。我在它上面放了一个断点，它说它仍然返回null。不知道为什么 您还有什么建议吗？我非常感谢您的帮助 您确定您的选择列表已正确加载到您的视图中吗？以上是关于如何将 Select2 SelectList 中的值存储为字符串的主要内容，如果未能解决你的问题，请参考以下文章
如何将 Flask-Admin 中的某些字段动态替换为 Select2？