在ASP.NET MVC中，如何讓列表框管理兩個列表的內容

Question

在ASP MVC中製作的網站中，我被要求構建一個頁面，該頁面提供了管理兩個列表的內容的功能像**this**.

這兩個列表框需要單選，用一個按鈕將項目從一側切換到另一側。

我希望它是客戶端的，這樣在提交表單時，模型聯編程序可以將更新後的字符串列表發送給控制器。

任何人都知道這樣的控件是否已經存在，就像jqueryUI中提供的控件一樣。如果沒有，關於如何實現這一結果的任何建議？

非常感謝！

Answer 1

有一個article討論可用性問題，並比較了多選輸入的不同方法。這個資源應該可以幫到你。

個人而言，我喜歡選擇SCROLLABLE複選框和ASMSELECT

Answer 2

最近我正在探索幾個選項。

你可以試試這個純JavaScript版本http://www.javascriptkit.com/script/script2/picklist.shtml

或者我開始建設，你可以作爲一個起點使用 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(); 

要開始了，你只需要綁定一個jQuery插件@ Html.DropDownListFor（）與一些數據。