How do I generate a list of items based on selected dropdown item?

Question

I would like to filter a list of items based on the dropdown option the user has selected.

This is my dropdown:

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

This is the loop I am using to generate the list with:

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

I want to load the correct list each time the user selects an option from the dropdown.

The ViewBag with the data is filled within the controller I have. At the moment there is a ViewBag for the first option from the dropdopdown, and a ViewBag for the second option from the dropdown. Don't know if this is the right approach but I'm very new to this and would like to get some advice.

Thanks in advance!

Answer 1

Without accounting for the Vue tag you have here, my typical way to manage something with large (more than a couple hundred DOM elements, and you mentioned 1000+) is to hook it with small controller actions to avoid polluting the DOM, which slows things down a lot.

We have to look at options, though, because you're going to take a hit somewhere. You have to decide where. Large number of DOM elements vs bandwidth of requests. Storing the data in Session so it's available for multiple post requests or requerying whatever generated it.

So for purposes here, I'll assume we do not want to have tons of items in the DOM and just show/hide, which is the simplest way, but not good as you start adding items and combinations or mobile users try to load a page, etc. I'm also colored by the name of your function, loadFilteredList, which to me just yells out "add another filter" requirement from someone soon.

So here's the basic design:

A controller method returns the table content you have here as a partial view.

It (the controller method) optionally has an argument that is the filter option. (more of those can be added later; the point is, the controller is doing the filtering and sending data)

Your javascript then for the onchange is just firing off a post request to the controller for new filtered data. You can use jquery or vanilla to set the html content as needed. Your controller either gets fresh data for filtering or uses session. Whatever is best for your needs here. You don't need ViewBag though, it's not for this type of situation.

The downside of this type of design is that a fresh request is sent in the background to the server for each filter. The upside is that hopefully your payloads are small enough, so it's not as expensive to do it that way as to return every possible row so that it can be filtered client side.