ASP.NET MVC에서 Listbox를 사용하여 두 목록의 내용을 관리하려면 어떻게해야합니까?

Question

ASP MVC로 만든 웹 사이트에서 두 가지 목록의 내용을 관리하는 기능을 제공하는 페이지를 빌드해야합니다. 문자열은 다음과 같습니다. **this**.

두 목록 상자는 항목을 한쪽에서 다른쪽으로 전환하는 단추가있는 단일 선택이어야합니다.

클라이언트 측이 좋기 때문에 양식 제출시 모델 바인더는 업데이트 된 문자열 목록을 컨트롤러에 게시 할 수 있습니다.

jqueryUI에서 제공되는 것과 같은 컨트롤이 이미 존재하는지 누구나 알 수 있습니다. 그렇지 않다면 그 결과를 달성하는 방법에 대한 제안은 무엇입니까?

많은 분들께 감사드립니다.

Answer 1

유용성 문제에 대해 이야기하고 다중 선택 입력에 대한 다양한 접근 방식을 비교하는 article이 있습니다. 이 리소스가 도움이 될 것입니다.

는 개인적으로 나는 내 사용자가 컨트롤에 더 많은 고급 기능을 필요로하는 경우 주셔서 감사합니다, 나는 아마 거기에 몇 가지 아이디어를 사용을 SCROLLABLE 체크 박스와 ASMSELECT

Answer 2

내가 최근에 탐색 한 몇 가지 옵션이 있습니다.

당신이 순수 자바 스크립트 버전 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().