Как использовать Unorder List как множественный выбор и отправлять выбранные элементы в форму MVC 5?

0

Я хочу создать страницу, где пользователь может подписаться в категориях, поэтому очевидным решением является использование элемента управления multiselect, я тестировал его с помощью ListBox (HtmlHelper), но вам нужно выбрать, щелкнув элемент управления, так что я нашел хороший Bootstrap control [list-group] Я добавляю код jQuery, чтобы добавить [активный] класс, чтобы выбрать элемент, который содержит код

наценка

  <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, чтобы получить все выбранные элементы, и если пользователь уже выбрал некоторые элементы, и он хочет вернуться к редактированию, как я могу показать ему, что он уже выбрали???

Теги:
asp.net-mvc
twitter-bootstrap-3

2 ответа

0
Лучший ответ

Самый простой способ - использовать ListBoxFor и привязать к свойству array/enumerable в вашей модели.

Например, у вас есть такая модель:

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

Мне тоже не нравится держать управление для выбора нескольких элементов в списке с несколькими выборами.

Однако вместо использования <a> -tags, где "выбранные" значения не отправляются на сервер, я бы рекомендовал вам использовать Multi-Select List и просто использовать плагин jQuery для стилизации и изменения поведения пользовательского интерфейса.

Quick Googling Я смог найти несколько вариантов: http://jquery-plugins.net/tag/multiple-select

ОБНОВИТЬ:

Мне также удалось найти многопозиционные функции, которые работают с Bootstrap 3: http://davidstutz.github.io/bootstrap-multiselect/#examples

  • 0
    Я не хочу иметь его в выпадающем списке, я хочу, чтобы пользователь мог видеть все категории и затем выбрать его !!

Ещё вопросы

Сообщество Overcoder
Наверх
Меню