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

У меня есть таблица html, которая должна иметь новые значения в зависимости от того, что пользователь выбирает из раскрывающегося списка. База данных представляет собой список людей, а раскрывающийся список представляет собой выбор этажей здания, например 1-й, 2-й, 3-й и т. д. Когда выбрано новое значение раскрывающегося списка, я хотел бы, чтобы страница обновлялась, а таблица теперь отображать людей, которые находятся на этом этаже.

Это HTML-таблица, а БД повторяется и фильтруется с помощью бритвенного кода. Вот аналогичный код.

<select>
    <option value = "1">1st</option>
    <option value = "2">2nd</option>
    <option value = "3">3rd</option>
    <option value = "4">4th</option>
    <option value = "5">5th</option>
    <option value = "6">6th</option>
    <option value = "7">7th</option>
</select>

<table>
    <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>Floor</th>
    </tr>

    @{
    foreach (var person in Model)
    {
    <tr>
        <td>@person.Name</td>
        <td>@person.Phone</td>
        <td>@person.Floor</td>
    </tr>
    }
    }

</table>

Я хотел бы сделать код бритвы следующим образом:

<table>
    <tr>
        <th>Name</th>
        <th>Phone</th>
        <th>Floor</th>
    </tr>

@{
   foreach (var person in Model.Where(person => person.Floor == selectedValue)
    {
    <tr>
        <td>@person.Name</td>
        <td>@person.Phone</td>
        <td>@person.Floor</td>
    </tr>
   }
}
</table>

Проблемы, с которыми я столкнулся, заключаются в том, что бритва выполняется на стороне сервера, поэтому назначение переменных из js или чего-либо еще на стороне клиента не вариант. Мой вопрос в основном сводится к следующему: как я могу использовать раскрывающийся список для заполнения таблицы, отфильтрованной с помощью бритвы? Если это невозможно, то какие другие потенциальные методы существуют?

Обычно для вещей, связанных со сценариями на стороне сервера в сочетании со сценариями на стороне клиента (например, JavaScript), вы должны использовать либо теги html <form> для отправки данных на новую страницу или снова на ту же страницу (в качестве обновления), либо использовать ajax или что-то в этом роде. аналогично JavaScript для вызова этого серверного сценария без обновления страницы. Я использую PHP, а не бритву, поэтому я не могу рассказать вам об этом, но JavaScript просто не выполняется на стороне сервера, насколько мне известно.

Maclain Anderson 11.02.2019 15:57

@MaclainAnderson, как я могу использовать <form> для быстрого обновления html-страницы с выбранными значениями?

splindo 11.02.2019 16:01

@splindo Вы пытаетесь отфильтровать значения таблицы с помощью выбора из раскрывающегося списка, не так ли?

TanvirArjel 11.02.2019 16:03

@splindo Где находится код метода вашего контроллера, который возвращает список данных для таблицы?

TanvirArjel 11.02.2019 16:04

Данные таблицы не фильтруются и не возвращаются из какого-либо кода в контроллере. Контроллер просто имеет методы для добавления, удаления, редактирования, деталей и т. д. Фильтрация и возврат значения БД выполняются с помощью бритвенного кода в представлении. @TanvirArjel

splindo 11.02.2019 16:10
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
5
34
1

Ответы 1

Вот базовая форма для отправки данных POST на другую или ту же страницу:

<form action = "somePage.ext" method = "POST">
  <select name = "floor">
    <option value = "1">Floor 1</option>
    ...
  </select>
  <input type = "submit">
</form>

Нажатие на кнопку отправки отправляет эти данные в «somePage.ext», который может быть сценарием PHP, сценарием Razor или той же страницей, на которой вы уже находитесь. Просто замените это имя файла на настоящее. Данные отправляются с именем «этаж» и значением «1», «2» или любой другой выбранной вами опцией. Что вы будете делать с данными, зависит от вас или от кого-то, кто знает Razor, чего не знаю я.

Другие вопросы по теме