html - ListBoxFor .NET CORE MVC 中的替代方案

Question

.NET CORE MVC 中的 ListBoxFor 是否有替代方案？我想将所有选定部门的数据存储在一个名为 SelectedDepartment 的列表中。因此，我想使用 CheckBoxes 之类的东西。例如：

• [] A部
• [X] B部
• [X] C部

但我只是通过使用具有多种功能的 HTML Select 找到了解决方案。还有其他解决方案吗？

这是目前我的代码：

<div class="form-group">
    @Html.LabelFor(model => model.AvailableDepartments)
    @Html.ListBoxFor(model => model.SelectedDepartments, Model.AvailableDepartments.Select(x => new SelectListItem { Text = x.DepartmentShort, Value = x.Id.ToString() }), new { @class = "form-control" })
</div>

谢谢你的支持

标签： htmlasp.net-core-mvc

Answer 1

对于带有复选框的多选下拉列表，您可以使用 ListBoxFor Html Helper 和 jQuery BootStrap Multi-Select Plugin 来做到这一点，请参考以下演示：

看法：

<form asp-action="GetCheckBoxList">
  <div class="form-group">
    @Html.LabelFor(model => model.Answers)
    @Html.ListBoxFor(model => model.SelectedAnswer, Model.Answers.Select(x => new SelectListItem { Text = x.Description, Value = x.Id.ToString() }), new { @class = "form-control" ,id="listAnswers" })
  </div>
  <div>
    <input type="submit" value="Submit" />
  </div>
</form>

@section Scripts
{
  <link href="~/css/bootstrap-multiselect.css" rel="stylesheet" type="text/css" />
  <script src="~/js/bootstrap-multiselect.js" type="text/javascript"></script>
  <script type="text/javascript">
    $(function () {
        $("#listAnswers").multiselect({
            includeSelectAllOption: true
        });

    });

</script>   
}

结果：

从这里 下载相关的 bootstrap-multiselect css 和 js 文件。