在 ASP.NET Core MVC 中是否可以制作包含复选框列表的下拉列表？

Question

我正在为 C# 课程开发一个 scrum 项目，我需要为文章列表制作一个过滤器表单，这样人们就可以选择尽可能多或尽可能少的类别来显示文章。我使用包含所有要过滤的内容的视图模型来做到这一点，其中包括具有

bool

属性的视图模型列表，用于显示它们是否被选中。我以一系列复选框显示该列表，旁边显示类别名称。

@for (Int32 i = 0; i < this.Model.AvailableCategories.Count; i++)
{
    <label asp-for="@Model.AvailableCategories[i]">
        <input asp-for="@Model.AvailableCategories[i].Selected" /> @Model.AvailableCategories[i].CategoryName
    </label>

    @Html.HiddenFor(x => x.AvailableCategories[i].CategoryId)
    @Html.HiddenFor(x => x.AvailableCategories[i].CategoryName)
}

现在，他们要求将该列表放入下拉列表中，所以看起来这应该是完全可能的，否则他们就不会要求这样做。但我似乎找不到任何方法来实际制作一个允许我选择多个内容的下拉列表，更不用说显示复选框了。

那么，有什么建议吗？我怎样才能做到这一点？

Answer 1

考虑到课程作业的性质，我将其保留为高级步骤。我假设目标是使用常规 HTML - 如果允许 JS 库，您有更多选择。

1. 鉴于您想要呈现为选择列表元素，请从这里开始。有 ASP 标签助手可以帮助实现这一点。

2. 完成 #1 后，您可以将自己的附加 HTML 属性应用到元素。 HTML 中有一个

   multiple

   属性可用于选择列表（尽管就下拉列表而言，它的行为不再与单个选择列表完全相同）。

来自 W3Schools：https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select_multiple

<select name="cars" id="cars" multiple>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
</select>

Answer 2

这是一个制作包含复选框列表的下拉列表的演示： 查看：

<div id="list" class="dropdown-check-list" tabindex="100">
    <span class="anchor">Select Categories</span>
    <ul class="items">
        @for (Int32 i = 0; i < this.Model.AvailableCategories.Count; i++)
        {
            <li>
                <input type="checkbox" asp-for="@Model.AvailableCategories[i].Selected" />@Model.AvailableCategories[i].CategoryName
                @Html.HiddenFor(x => x.AvailableCategories[i].CategoryId)
                @Html.HiddenFor(x => x.AvailableCategories[i].CategoryName)
            </li>



        }
    </ul>
</div>

风格：

<style>
    .dropdown-check-list {
        display: inline-block;
    }

        .dropdown-check-list .anchor {
            position: relative;
            cursor: pointer;
            display: inline-block;
            padding: 5px 50px 5px 10px;
            border: 1px solid #ccc;
        }

            .dropdown-check-list .anchor:after {
                position: absolute;
                content: "";
                border-left: 2px solid black;
                border-top: 2px solid black;
                padding: 5px;
                right: 10px;
                top: 20%;
                -moz-transform: rotate(-135deg);
                -ms-transform: rotate(-135deg);
                -o-transform: rotate(-135deg);
                -webkit-transform: rotate(-135deg);
                transform: rotate(-135deg);
            }

            .dropdown-check-list .anchor:active:after {
                right: 8px;
                top: 21%;
            }

        .dropdown-check-list ul.items {
            padding: 2px;
            display: none;
            margin: 0;
            border: 1px solid #ccc;
            border-top: none;
        }

            .dropdown-check-list ul.items li {
                list-style: none;
            }

        .dropdown-check-list.visible .anchor {
            color: #0094ff;
        }

        .dropdown-check-list.visible .items {
            display: block;
        }
</style>

js:

@section scripts
{
    <script>
        $(function () {
            var checkList = document.getElementById('list');
            checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
                if (checkList.classList.contains('visible'))
                    checkList.classList.remove('visible');
                else
                    checkList.classList.add('visible');
            }
        })
    </script>
}

结果：