在 ASP 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 属性应用到元素。有一个multiple 属性可用于 HTML 中的选择列表（尽管它的行为不再完全像下拉列表中的单个选择列表）。

来自 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>
}

结果：