Question

我想创建一个用户可以在类别中订阅的页面，因此，显而易见的解决方案是使用多选控件，我使用ListBox（HtmlHelper）进行测试，但您必须通过单击控件进行选择，所以我找到了一个很好的Bootstrap控件[list-group]我添加了一个jQuery代码来添加[active]类来选择代码的项目

标记

  <div class="list-group">
    <a href="#" class="list-group-item">Cras justo odio</a>
    <a href="#" class="list-group-item">Dapibus ac facilisis in</a>
    <a href="#" class="list-group-item">Morbi leo risus</a>
    <a href="#" class="list-group-item">Porta ac consectetur ac</a>
    <a href="#" class="list-group-item">Vestibulum at eros</a>
  </div>

的js

$('.list-group a').on('click',function (e) {
      e.preventDefault();
      $(this).toggleClass("active");
    });

我的问题：如何在Asp.NET MVC 5的表单中使用此控件来获取所有选定的项目，如果用户已经选择了一些项目，并且他想返回编辑它，如何我可以告诉他他已经选择了什么吗？

Answer 1

我也不喜欢控制选择多选列表中的多个项目。

然而，不是使用<a> - 标签，而是选择＆＃34;＆＃34;值不会发布到服务器，我建议您坚持使用多选列表，只需使用jQuery插件来设置样式并更改UI行为。

快速谷歌搜索我找到了几个选项：http://jquery-plugins.net/tag/multiple-select

更新：

我还能找到与Bootstrap 3一起使用的多选： http://davidstutz.github.io/bootstrap-multiselect/#examples

Answer 2

最简单的方法是使用ListBoxFor并绑定到模型中的数组/可枚举属性。

例如，有一个这样的模型：

public class ViewModel(){
      public string[] SelectedItems
      public string[] AvailableItems
}

然后在你的视图中，像这样使用ListBoxFor：

@Html.ListBoxFor(m => m.SelectedItems, new SelectList(Model.AvailableItems))

最后，为了防止人们控制选择多个项目，请添加此javascript

$('option').mousedown(function(e) {
    e.preventDefault();
    $(this).prop('selected', !$(this).prop('selected'));
    return false;
});

如何使用无序列表作为多选并在表格MVC 5中发送所选项目？

标记

的js

2 个答案: