c# - 是否有等同于@HTML.dropdownlist 的复选框

Question

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

目前，用户可以使用下拉列表选择多个标签(按住 ctrl):

然而，从美学上讲，这并不是我真正想要用于此目的的，我更愿意让用户从一系列复选框或更好的按钮中选择所需的标签。类似这样:

是否存在这样的等效 HTML 帮助程序？

我的下拉列表工作代码如下，供您引用。

View :

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

Controller :

_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

正如 Stephen 所说，没有解决方案。这是我过去所做的(您的问题中要求的替代版本。)使用带有选择项的类来保存您的可能值和用于用户交互的选定值列表，复选框被用作您进入选定的列表。然后您可以将复选框设置为按钮样式并添加一些 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>();
    }
}

Controller :

    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();
    }

Craptastic 加载函数演示目的:

    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;
}