Is there a checkbox equivalent to @HTML.dropdownlist

Question

I'm developing a simple blog application where users submitting a new post can also choose to associate a selection of predefined tags to their Post.

Currently, users can select multiple tags (holding ctrl) using a dropdownlist:

However, aesthetically this is not really what I want to use for this purpose and would prefer to let users select desired tags from a series of checkboxes, or even better - buttons. Similar to this:

Does such an equivalent HTML helper exist?

My working code with dropdownlist is below for your reference.

VIEW:

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

CONTROLLER:

_context is my database containing two tables, Post and 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();
    }

Any alternative suggestion are also highly appreciated, particularly as I'm still learning the ropes - thanks!

Answer 1

So as Stephen said, there is no baked in solution. Here is what I have done in the past (alternative version as requested in your question.) Use a class with select items to hold your possible values and a list of selected values for user interaction with checkboxes being used as your entry exit point into the selected list. then you can style your checkboxes as buttons and add a bit of jquery to make the btn-checkbox interaction occur. Example attached:

Model:

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 load function demo purpose:

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

View:

@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 Fun:

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


.Weee {
    background-color: #b5191f;
}