Question

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

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

然而，从美学角度来说，这并不是我想要用于此目的的，并且更愿意让用户从一系列复选框中选择所需的标签，甚至更好 - 按钮。与此类似：

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

我的工作代码与下拉列表在下面供您参考。

查看：

    <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

正如史蒂芬所说，解决方案中没有任何问题。这是我过去所做的（在您的问题中请求的替代版本。）使用包含选择项的类来保存您的可能值和用户交互的选定值列表，复选框用作您的入口退出点选中的清单。然后你可以将你的复选框设置为按钮并添加一些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();
    }

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 Fun：

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


.Weee {
    background-color: #b5191f;
}

是否有与@ HTML.dropdownlist等效的复选框

1 个答案: