Dans ASP.NET MVC, comment puis-je avoir Listboxes pour gérer le contenu de deux listes

Question

Dans un site Web fait dans ASP MVC, il m'a été demandé de construire une page qui offre la fonctionnalité de gérer le contenu de deux listes de chaînes comme **this**.

La liste de deux doit être une sélection unique, avec un bouton pour basculer un élément d'un côté à l'autre. Je voudrais qu'il soit côté client, de sorte que lors de la soumission du formulaire, le classeur modèle puisse publier les listes mises à jour des chaînes au contrôleur. Tout le monde sait si un tel contrôle existe déjà, comme ceux offerts dans jqueryUI. Si non, des suggestions sur la façon d'atteindre ce résultat?

Merci beaucoup les gens!

Answer 1

Il y a un article qui parle de problèmes de convivialité et compare différentes approches pour les entrées multisélect. Cette ressource devrait vous aider.

Personnellement, j'aime les options CASES et SCROLLABLE ASMSELECT

Answer 2

Il y a quelques options que j'explorais récemment.

Vous pouvez essayer cette version pur javascript http://www.javascriptkit.com/script/script2/picklist.shtml

Ou je commencé à construire un plugin JQuery que vous pouvez utiliser comme point de départ 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(); 

Pour commencer, vous avez juste besoin de lier un @ Html.DropDownListFor() avec quelques données.