Как создать список элементов на основе выбранного выпадающего элемента? - PullRequest
Новая
       31

Как создать список элементов на основе выбранного выпадающего элемента?

0 голосов
/ 26 апреля 2019

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

Это мой выпадающий список: 

<select class="form-control" onchange="loadFilteredList()" id="conditionSelect">
      <option disabled value="" selected="selected">Please select a filter</option>
      <option>Under 18</option>
      <option>Above 18</option>
</select>

Это цикл, который я использую для создания списка: 

<table class="table table-hover" id="ageOverview">
    <tr>
        <th>Col1</th>
        <th>Col2</th>
        <th>Col3</th>
    </tr>
    @foreach (var person in ViewBag.persons)
    {
        <tr>
            <td>@person.FirstName</td>
            <td>@person.MiddleName</td>
            <td>@pperson.LastName</td>
        </tr>
    }
</table>

Я хочу загружать правильный список каждый раз, когда пользователь выбирает опцию из выпадающего списка.

ViewBag с данными заполнен в контроллере, который у меня есть. На данный момент есть ViewBag для первого варианта из выпадающего списка и ViewBag для второго варианта из выпадающего списка. Не знаю, правильный ли это подход, но я очень новичок в этом и хотел бы получить совет.

Заранее спасибо!

1 Ответ

1 голос
/ 26 апреля 2019

Без учета имеющегося у вас тега Vue мой типичный способ управления чем-либо с большими (более двух сотен элементов DOM, а вы упомянули 1000+) состоит в том, чтобы связать его с небольшими действиями контроллера, чтобы избежать загрязнения DOM,что сильно замедляет ход событий.

Мы должны посмотреть на варианты, потому что вы собираетесь получить удар где-нибудь.Вы должны решить, где.Большое количество элементов DOM против пропускной способности запросов.Хранение данных в сеансе, чтобы они были доступны для нескольких почтовых запросов или для запроса того, что их сгенерировало.

Так что для целей здесь, я предполагаю, что мы не хотим иметь тонны элементов в DOM и просто показать / скрыть, что является самым простым способом, но не очень хорошо, когда вы начинаете добавлять элементы и комбинации, или мобильные пользователи пытаются загрузить страницу и т. д. Я также выделен именем вашей функции loadFilteredList, которое мне просто выкрикивает "add"скоро потребуется еще один фильтр ».

Итак, вот базовый дизайн:

Метод контроллера возвращает содержимое таблицы, которое вы здесь имеете, в виде частичного представления.

Он (метод контроллера) может иметь аргумент, который является опцией фильтра.(другие из них могут быть добавлены позже; дело в том, что контроллер выполняет фильтрацию и отправку данных)

Ваш javascript для onchange только запускает запрос post на контроллер для новых отфильтрованных данных.Вы можете использовать jquery или vanilla, чтобы установить HTML-контент по мере необходимости.Ваш контроллер либо получает свежие данные для фильтрации, либо использует сеанс.Все, что лучше для ваших нужд здесь.Однако вам не нужен ViewBag, это не для ситуаций такого типа.

Недостатком этого типа дизайна является то, что свежий запрос отправляется в фоновом режиме на сервер для каждого фильтра.Положительным моментом является то, что, надеюсь, ваши полезные данные достаточно малы, поэтому сделать это не так дорого, как вернуть каждую возможную строку, чтобы ее можно было отфильтровать на стороне клиента.

...