How to dynamically display new table values from a dropdown box selection?

Question

I have an html table that needs to have new values depending on what the user selects from a dropdown box. The database is a list of people, and the dropdown box is a selection of floors of a building, such as 1st, 2nd, 3rd etc. When a new dropdown box value is selected, I would like the page to refresh and the table now be displaying the people who are on that floor.

It is an HTML table, and the DB is iterated through and filtered by razor code. Here is similar code.

<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>

I would like to do razor code like this though:

<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>

The problems I have ran into are that razor is executed server-side, so assigning variables from js or anything client side is not an option. My question basically boils down to: How can I use a dropdown box to populate a table that is filtered with razor? If this is not possible, what other potential methods are there?

Answer 1

Here's a basic form to POST data to a different or same page:

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

Clicking on the submit button sends that data to 'somePage.ext', which could be a PHP script, a Razor script, or the same page you're already on. Just replace that file name with a real one. The data is sent with the name of 'floor' and the value of '1', '2', or whatever option you selected. What you do with the data is up to you or someone who specifically knows Razor, which I do not.