Przemysław Szkaradek Ответов: 1

Как я могу фильтровать по контексту в dropdownlist MVC


Мне нужно контекстуально фильтровать контент

Я могу создать раскрывающийся список со многими полями, но я хотел бы дополнительно отфильтровать результаты из раскрывающегося списка, набрав их с клавиатуры

Что я уже пробовал:

//Class Repository ninject
public SelectList  ChooseTypicalGate()
        {

            var valueTypical = (from c in db.GateSize
                               where c.IsActive == true && c.SizeIsTypical == true
                               orderby c.GateHeight ascending, c.GateWidth ascending
                               select new SelectListItem
                               {
                                   Text = "Hei. " + c.GateHeight + " - " + "Wid. " + c.GateWidth + " " + c.PanelType.NameanelType + " " + c.GatePrice + " EU",
                                   Value = c.IdGateSize.ToString()
                               });
            var value = new SelectList(valueTypical, "Value", "Text");

            return value;

        }

// Controller

 public ActionResult GateValuation()
        {



            ViewBag.ListTypicalGates = _repo.ChooseTypicalGate();   


            return View();

        }

//View

 <div class="row">
                                <div class="form-group  has-success">
                                    @Html.LabelFor(model => model.IdGateSize, "Gate Typical", htmlAttributes: new { @class = "control-label col-md-2" })
                                    <div>
                                        @Html.DropDownListFor(x => x.IdGateSize, (SelectList)ViewBag.ListTypicalGates, "Please choose a gate ", new { @class = "form-control", @style = "min-width: 500px;" })
                                        @Html.ValidationMessageFor(model => model.IdGateSize, "", new { @class = "text-danger" })
                                    </div>
                                </div>
                            </div>

1 Ответов

Рейтинг:
4

Richard Deeming

Если вы хотите изменить внешний вид или поведение выпадающего списка, вам понадобится плагин JavaScript.

Попробуй Select2[^] - он добавит окно поиска для фильтрации вашего выпадающего списка.

@Html.DropDownListFor(x => x.IdGateSize, (SelectList)ViewBag.ListTypicalGates, "Please choose a gate ", new { @class = "js-select2", @style = "min-width: 500px;" })

<link href="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js"></script>

<script>
$(function(){
    $(".js-select2").select2();
});
</script>
Существует множество вариантов, позволяющих вам настроить внешний вид и поведение.

Поскольку вы используете Bootstrap, вы также можете применить тему Bootstrap:
GitHub - ttskch/select2-bootstrap4-theme: тема Select2 v4 для Bootstrap4[^]


Przemysław Szkaradek

"GitHub - ttskch / select2-bootstrap4-тема: Motyw Select2 v4 dla Bootstrap4 " -
у вас есть пример для bootstrap 3 ?