如何从下拉框选择中动态显示新表值？

Question

我有一个html表，该表需要具有新值，具体取决于用户从下拉框中选择的内容。 数据库是一个人员列表，下拉框是建筑物楼层的选择，例如1st，2nd，3rd等。当选择新的下拉框值时，我希望页面刷新并现在显示表格展示那层楼上的人。

它是一个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或任何客户端分配变量不是一种选择。 我的问题基本上可以归结为：如何使用下拉框填充使用剃须刀过滤的表？ 如果这不可能，还有哪些其他可能的方法？

Answer 1

这是将数据发布到不同或相同页面的基本形式：

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

单击提交按钮会将数据发送到“ somePage.ext”，该数据可以是PHP脚本，Razor脚本或您已经在同一页面上。 只需用一个真实的文件名替换该文件名。 数据以名称“ floor”和值“ 1”，“ 2”或您选择的任何选项发送。 您如何处理数据取决于您或专门了解Razor的人，而我却不知道。