如何根据选定的下拉项生成项目列表？

Question

我想根据用户选择的下拉选项过滤项目列表。

这是我的下拉菜单：

<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填充在我拥有的控制器中。目前，dropdopdown中有第一个选项的ViewBag，下拉列表中有第二个选项的ViewBag。不知道这是不是正确的方法，但我对此很新，并希望得到一些建议。

提前致谢！

Answer 1

如果不考虑你在这里的Vue标签，我管理大型事物（超过几百个DOM元素，你提到1000多个）的典型方法是将它与小控制器动作挂钩，以避免污染DOM，这会减慢事情的速度很多。

不过，我们必须考虑选项，因为你会在某个地方受到打击。你必须决定在哪里。大量DOM元素与请求带宽。将数据存储在Session中，以便它可用于多个发布请求或重新生成生成它的任何内容。

所以为了达到目的，我假设我们不希望在DOM中有大量的项目，只是显示/隐藏，这是最简单的方法，但是当你开始添加项目和组合或移动用户试图加载时，这不好我也用你的函数名称loadFilteredList着色，这对我来说只是大声喊出“添加另一个过滤器”的要求。

所以这是基本设计：

控制器方法将此处的表内容作为局部视图返回。

它（控制器方法）可选地具有作为过滤器选项的参数。 （更多可以在以后添加;重点是，控制器正在进行过滤和发送数据）

然后你的javascript用于onchange只是向控制器发出一个post请求，用于新的过滤数据。您可以使用jquery或vanilla根据需要设置html内容。您的控制器要么获取新数据以进行过滤或使用会话。无论什么最适合您的需求。你不需要ViewBag，它不适用于这种情况。

这种设计的缺点是在后台向服务器发送一个新的请求，用于每个过滤器。好处是希望你的有效载荷足够小，所以做到这一点并不像返回每个可能的行那样昂贵，以便它可以被客户端过滤。