Cách triển khai nhiều lựa chọn trong MVC 3 bằng cách sử dụng plugin 'selected.js'

Question

Làm cách nào để triển khai plugin chosen cho MVC 3?

cho loại sản lượng

Answer 1

Tôi đã reconfigure chọn plugin như dưới đây và hoạt động đúng.

dao cạo của tôi:

<div style="width: 750px; clear: both; margin-left: 170px;"> 

      @Html.ListBox(
          "Emailaddress", 
          ViewBag.EmailaddressList as MultiSelectList, 
          new { @class = "chosen-select", data_placeholder = "Choose a Emailaddress...", style = "width:750px;", tabindex = "4" } 
         ) 
</div> 

Thêm kịch bản này sau khi mã Razor html của bạn

<script src="@Url.Content("~/Scripts/chosen.js/chosen.jquery.js")" type="text/javascript"></script> 
     <script type="text/javascript"> 
      var config = { 
       '.chosen-select': {}, 
       '.chosen-select-deselect': { allow_single_deselect: true }, 
       '.chosen-select-no-single': { disable_search_threshold: 10 }, 
       '.chosen-select-no-results': { no_results_text: 'Oops, nothing found!' }, 
       '.chosen-select-width': { width: "95%" } 
      } 
      for (var selector in config) { 
       $(selector).chosen(config[selector]); 
      } 
    </script> 

viewbag của tôi:

ViewBag.Skills = new MultiSelectList(EmailaddressList, "Id", "EmailId"); 

Answer 2

vui lòng truy cập link.this sau đây sẽ giúp bạn thực hiện Plugin chọn với MVC3. Tôi thấy điều này hữu ích cho me.here là liên kết

http://utsavized.com/chosen-multiselect-dropdown-list-with-asp-net-mvc3/

Answer 3

Tôi nghĩ rằng bạn nên sử dụng như thế này.

@Html.DropDownListFor(model => model.CountryId, new SelectList(Model.Countries, "ID", "Name"), "select", new { @ID = "ddlCountry", @class = "chosen-select", multiple = "multiple", Style = "width: 150px;" }) 

điều này sẽ giúp bạn.

Answer 4

Đây là mã của tôi làm thế nào để làm cho chosen.js làm việc với javascript/MVC

Đây là mã của tôi cho thả xuống của tôi

@Html.DropDownListFor(m => m.CategoryId, 
            new SelectList(Model.Categories, "Id", "Name"), 
            "Choose a Category...", 
            new 
            { 
             id = "CategoryId", 
             multiple = "", 
             @class = "chzn-select srs-select search-dropdown", 
             data_placeholder = "Choose a Category..." 
            }) 

Ở đây tôi sử dụng 'chzn-chọn' phong cách

- Trong tài liệu đã sẵn sàng, bạn nên có hàm .chosen() được gọi.

$(document).ready(function() { 

    $('.chzn-select').chosen(); 
}); 

Trong javascript, để lấy những gì đã được lựa chọn, đây là mã

Mã để lấy mục đã chọn trong dropdownbox

var selectedCategoryId = $('Select#CategoryId').val(); 
    var selectedCategories = ""; 

    if (selectedCategoryId != null) { 
     $.each(selectedCategoryId, function (index, value) { 
      selectedCategories = selectedCategories + value + ","; 
     }); 
    } 

Về cơ bản selectedCategories có ID của mục đã chọn, tách bởi ','

Để cập nhật menu thả xuống với các giá trị được chọn

Sao chép giá trị của bạn thành một mảng

var categoryArray = new Array(); 

... có mã khởi mảng whih các giá trị mà đã được lựa chọn trước.

// mã để bạn chọn, mảng có giá trị của bạn.

$('Select#CategoryId').val(categoryArray); 

$('.chzn-select').trigger('chosen:updated'); 

Hope this helps