是否有一个相当于@HTML.dropdownlist 的复选框

Question

我正在开发一个简单的博客应用程序，在该应用程序中，提交新帖子的用户还可以选择将一组预定义的标签与他们的帖子相关联。

目前，用户可以使用下拉列表选择多个标签（按住 ctrl）：

但是，从美学上讲，这并不是我真正想要用于此目的的东西，并且更愿意让用户从一系列复选框中选择所需的标签，甚至更好 - 按钮。类似这样：

是否存在这样的等效 HTML 助手？

下面是我的带有下拉列表的工作代码供您参考。

查看：

    <div class="form-group">
        @Html.DropDownList("TagId", (MultiSelectList)ViewBag.Tags, new { multiple = "multiple" })
    </div>

控制器：

_context 是我的数据库，包含两个表，Post 和 Tags。

    public ActionResult Add()
    {

        var tags = _context.Tags.Select(c => new {
            TagID = c.TagID,
            Type = c.Type
        }).ToList();

        ViewBag.Tags= new MultiSelectList(tags, "TagID", "Type");

        return View();
    }

    [AcceptVerbs("POST")]
    public ActionResult Add()
    {

         string TagId= Request["TagID"];

         var tagids = TagId.Split(',');

         foreach (var tagid in tagids)
         {
               var id = int.Parse(tagid);
               Tag tag = _context.Tags.Where(ct => ct.TagId== id).First();
               post.Tags.Add(tag);
        }

        //Save our post
        _context.Post.Add(post);
        _context.SaveChanges();


        return View();
    }

我们也非常感谢任何替代建议，尤其是在我仍在学习的情况下 - 谢谢！

Answer 1

正如斯蒂芬所说，没有解决方案。这是我过去所做的（您的问题中要求的替代版本。）使用带有选择项的类来保存您的可能值，并使用选择值列表进行用户交互，复选框用作您进入选定的列表。然后您可以将复选框设置为按钮并添加一些 jquery 以使 btn-checkbox 交互发生。附上示例：

型号：

public class TagModel
{
    //well store our selection here
    public IList<string> SelectedTags { get; set; }
    //well load tags in here for selection
    public IList<SelectListItem> AvailableTags { get; set; }
    public TagModel()
    {
        SelectedTags = new List<string>();
        AvailableTags = new List<SelectListItem>();
    }
}

控制器：

    public ActionResult Index()
    {
        //load up available tags and pass them to view
        ViewBag.Tags = new TagModel { AvailableTags = GetTags() };
        return View();
    }

    [HttpPost]
    public ActionResult Index(TagModel mod)
    {
        if (ModelState.IsValid)
        {
            //mod.SelectedTags contains your data.... do something 
            return RedirectToAction("Weeeeeeeee");
        }
        ViewBag.Tags = new TagModel { AvailableTags = GetTags() };
        return View();
    }

Crapastic load 函数演示目的：

    private IList<SelectListItem> GetTags()
    {
        return new List<SelectListItem>
    {
        new SelectListItem {Text = "cascading-style-sheet", Value = "1"},
        new SelectListItem {Text = "css-layout", Value = "2"},
        new SelectListItem {Text = "css-background-image", Value = "3"},
        new SelectListItem {Text = "css-attributes", Value = "4"},
    };
    }

查看：

@using (Html.BeginForm("Index", "Home"))
{
    //get your tags from viewbag
    foreach (var item in ViewBag.Tags.AvailableTags)
    {
        //make them look like buttons by placing our bootstrap or whatever framework btn class on div above
        <div class="btn btn-danger chkBtn" >
                <input type="checkbox" class="checkNope" autocomplete="off" name="SelectedTags" value="@item.Value" /> @item.Text
         </div>
    }
    <div class="form-group text-center">
        <input type="submit" class="btn btn-primary" value="Submit" />
    </div>
}


@section scripts  { 
    <script>
        //when someone clicks a button then trigger the checkbox toggle and add/remove class toggle
        $('.chkBtn').on('click', function () {
            $(this).toggleClass('Weee');
            var checkbox = $(this).children('input[type="checkbox"]');
            checkbox.prop('checked', !checkbox.prop('checked'));
        })
    </script>
}

CSS 乐趣：

.checkNope {
    -webkit-appearance: button !important;
}


.Weee {
    background-color: #b5191f;
}