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

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

提前致谢！

Answer 1

不考虑你在这里的 Vue 标签，我管理大型（超过几百个 DOM 元素，你提到的 1000+）的典型方法是用小的控制器动作挂钩它以避免污染 DOM，这会大大降低速度。

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

因此，出于此处的目的，我假设我们不希望 DOM 中有大量项目，而只是 show/hide，这是最简单的方法，但在您开始时并不好添加项目和组合或移动用户尝试加载页面等。我也被你的函数名称 loadFilteredList 着色了，对我来说，它很快就会大喊 "add another filter" 某人的要求。

基本设计如下：

控制器方法 return 是您在此处作为局部视图的 table 内容。

它（控制器方法）可选地有一个参数，即过滤器选项。（以后可以添加更多；重点是，控制器正在过滤和发送数据）

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

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

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

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

javascript

razor

viewbag

drop-down-menu

vue.js