DropDown (выпадающий список) с флажками в ASP.NET MVC - PullRequest
3 голосов
/ 29 марта 2011

Привет,

Я создаю приложение ASP.NET MVC 2 и до сих пор использовал регулярные выпадающие списки:

<%: Html.DropDownListFor(model => model.LS.L1, Model.LS.Location1List, "-- choose place --", new { @class = "dd1" })%>

Теперь мне нужно изменить этовместо раскрывающегося списка со списком флажков.Это означает две вещи:

  1. Модель может быть изменена таким образом, чтобы L1 мог содержать несколько значений (вместо просто целых чисел), а также может изменить LocationLList из SelectList в какой-то список?
  2. DropDownListFor (выпадающий список) чаще всего можно заменить на DropDownCheckListFor.

Важно, чтобы это было как можно более простым, чтобы мы могли поддерживать совместимость браузера (даже на смартфонах).

Как вы видите, также важно, чтобы выбранные значения заполнялись в объект модели (по умолчанию подшивкой) при отправке.

Я посмотрел на это раскрывающееся меню: http://www.erichynds.com/jquery/jquery-ui-multiselect-widget/

Это выглядит замечательно, но я не уверен, как перевести это в ASP.NET MVC, чтобы выбранные значения заполнялись в объект модели при отправке (как это делает DropDownListFor). Также это решение jquery может быть слишком сложным.

Пожалуйста, совет

Ответы [ 2 ]

4 голосов
/ 29 марта 2011

Помните, что помощники MVC просто отображают HTML-разметку.Таким образом, в соответствии с инструкциями на той странице, на которую вы ссылаетесь, вам просто нужно сгенерировать

<select multiple="multiple">

. Для этого вам нужно использовать Html.ListBoxFor вместо Html.DropDownListFor.Затем, когда вы включили все правильные файлы javascript, вы можете просто добавить блок javascript.Это выглядит так:

$(function() {
   $('.dd1').multiselect();
});
0 голосов
/ 10 августа 2016

В этом руководстве показано полное пошаговое руководство по созданию выпадающего списка с несколькими выборками с флажками в mvc Выпадающий список с несколькими выборками с флажками в MVC

Вам необходимо выбрать тег

<select id="CustomerId" name="CopyFromCustomerId"></select>

или вы можете использовать Html.ListBoxFor

Вам нужен следующий скрипт

$('#CustomerId').multiselect({
            includeSelectAllOption: true
        });

И ниже CSS и файлы скриптов

<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>     
<script type="text/javascript" src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" type="text/css"/>
...