В ASP.NET MVC, как я могу использовать Listbox для управления содержимым двух списков

Question

На веб-сайте ASP MVC мне было предложено создать страницу, которая предлагает функциональные возможности для управления содержимым двух списков строки, такие как **this**.

Два списка должны быть однократными, с кнопкой для переключения элемента с одной стороны на другую.

Я бы хотел, чтобы это было на стороне клиента, так что при отправке формы связующее устройство может отправлять обновленные списки строк в контроллер.

Кто-нибудь знает, существует ли такой элемент управления, как и в jqueryUI. Если нет, какие-либо предложения о том, как добиться этого результата?

Большое спасибо!

Answer 1

Существует article, в котором рассказывается о проблемах юзабилити и сравнивается различные подходы к мультивыборным входам. Этот ресурс должен помочь вам.

Лично мне нравится варианта SCROLLABLE Флажки и ASMSELECT

Answer 2

Есть несколько вариантов, которые я изучал совсем недавно.

Вы можете попробовать эту чистый яваскрипт версию http://www.javascriptkit.com/script/script2/picklist.shtml

Или я начал строить плагин JQuery, который можно использовать в качестве отправной точки http://jsfiddle.net/stokedout/aySLN/4/

(function ($) { 

$.fn.twinList = function (options) { 

    var settings = $.extend({ 

     // Styling 
     containerClass: 'twl-container', 
     btnContainerClass: 'twl-btn-container', 
     leftListClass: 'twl-list left', 
     rightListClass: 'twl-list right', 
     selectBtnClass: 'twl-btn select', 
     selectAllBtnClass: 'twl-btn select-all', 
     deselectBtnClass: 'twl-btn deselect', 
     deselectAllBtnClass: 'twl-btn deselect-all', 

     // Content 
     selectBtnText: '>', 
     selectAllBtnText: '>>', 
     deselectBtnText: '<', 
     deselectAllBtnText: '<<', 

     // Config 
     debug:true 
    }, options); 

    return this.each(function() { 

     var originalList = $(this), 
      originalOptions = originalList.find('option'), 
      container, 
      btnContainer, 
      leftList, 
      rightList, 
      select, 
      selectAll, 
      deselect, 
      deselectAll; 

     var updateOriginalInput = function() { 

      var rlOptions = rightList.find('option'); 

      originalOptions.prop('selected', false); 

      for (var i = 0; i < originalOptions.length; i++) { 
       for (var j = 0; j < rlOptions.length; j++) { 
        if (originalOptions[i].value === rlOptions[j].value) { 
         originalOptions[i].selected = true; 
        } 
       } 
      } 
     } 

     container = $('<div/>', { 
      'class': settings.containerClass 
     }); 

     leftList = $('<select/>', { 
      'class': settings.leftListClass, 
      multiple: true 
     }); 

     rightList = $('<select/>', { 
      'class': settings.rightListClass, 
      multiple: true 
     }); 

     btnContainer = $('<div/>', { 
      'class': settings.btnContainerClass 
     }); 

     select = $('<a>', { 
      text: settings.selectBtnText, 
       'class': settings.selectBtnClass, 
      href: '#', 
      click: function (e) { 
       leftList.find('option:selected').appendTo(rightList); 
       updateOriginalInput(); 
      } 
     }); 

     selectAll = $('<a>', { 
      text: settings.selectAllBtnText, 
       'class': settings.selectAllBtnClass, 
      href: '#', 
      click: function (e) { 
       leftList.find('option').appendTo(rightList); 
       originalOptions.prop('selected', true); 
      } 
     }); 

     deselect = $('<a>', { 
      text: settings.deselectBtnText, 
       'class': settings.deselectBtnClass, 
      href: '#', 
      click: function (e) { 
       rightList.find('option:selected').appendTo(leftList); 
       updateOriginalInput(); 
      } 
     }); 

     deselectAll = $('<a>', { 
      text: settings.deselectAllBtnText, 
       'class': settings.deselectAllBtnClass, 
      href: '#', 
      click: function (e) { 
       rightList.find('option').appendTo(leftList); 
       originalOptions.prop('selected', false); 
      } 
     }); 

     leftList.append(originalOptions.clone()); 

     btnContainer.append(select) 
      .append(selectAll) 
      .append(deselect) 
      .append(deselectAll); 

     container.append(leftList) 
      .append(btnContainer) 
      .append(rightList); 

     container.insertAfter(originalList); 

     if (!settings.debug) 
      originalList.hide(); 
    }); 

}; 

})(jQuery); 

$('#someList').twinList(); 

Для начала нужно просто свяжите @ Html.DropDownListFor() с некоторыми данными.