Jak zaimplementować wiele opcji wyboru w MVC 3 za pomocą wtyczki "selected.js"

Question

Jak zaimplementować wtyczkę chosen dla MVC 3?

dla tego typu produkcji

Answer 1

mam reconfigure wybrany plugin jak poniżej i działa prawidłowo.

Moje maszynki:

<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> 

Dodaj ten skrypt po kodzie HTML Razor

<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> 

Moje viewbag:

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

Answer 2

odwiedź następującą link.this pomoże Ci wdrożyć wybraną wtyczkę z mvc3. Znalazłem to pomocne dla me.here odnośnikiem

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

Answer 3

myślę, że należy używać w taki sposób.

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

to ci pomoże.

Answer 4

To jest mój kod jak zrobić chosen.js pracować z javascript/MVC

To jest mój kod dla mojego rozwijanej

@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..." 
            }) 

Tutaj używam 'chzn-select' stylizacji

- W przygotowanym dokumencie należy wywołać funkcję .chosen().

$(document).ready(function() { 

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

w JavaScript, aby odzyskać to, co zostało wybrane, jest to kod

kodu do pobierania elementów wybranych w dropdownbox

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

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

Zasadniczo selectedCategories ma identyfikator wybranych elementów, oddzielone przez ","

Aby zaktualizować menu z wybranymi wartościami

Kopiowanie wartości do tablicy

var categoryArray = new Array(); 

... jest kod, który inicjuje tablicę whih wartości, które zostały wybrane wcześniej.

// kod, aby dokonać wyboru, tablica ma swoje wartości.

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

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

Nadzieja to pomaga