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

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标记，我管理大型事物（超过200个DOM元素，而您提到的1000多个）的典型方法是将其与小型控制器动作挂钩以避免污染DOM，这会减慢事情的进行速度下降了很多。不过，我们必须考虑各种选择，因为您将在某处受到打击。您必须决定在哪里。大量的DOM元素与请求带宽之间的关系。将数据存储在Session中，以便可用于多个发布请求或重新查询生成的数据。因此，出于此目的，我假设我们不想在DOM中拥有大量项目，而只是显示/隐藏，这是最简单的方法，但是当您开始添加项目和组合或移动用户尝试加载页面等。我还为您的函数名称loadFilteredList涂上颜色，对我来说，它只是很快就喊出“添加另一个过滤器”的要求。因此，这是基本设计：控制器方法将您在此处具有的表内容作为部分视图返回。它（控制器方法）可选地具有作为过滤器选项的参数。（更多这些可以在以后添加；关键是，控制器正在执行过滤和发送数据）然后，用于onchange的JavaScript只会向控制器发出针对新过滤数据的发布请求。您可以根据需要使用jquery或vanilla设置html内容。您的控制器要么获取新数据以进行过滤，要么使用会话。无论哪种方式最适合您的需求。不过，您不需要ViewBag，这不是针对这种情况的。这种设计的缺点是，每个过滤器都会在后台向服务器发送新请求。好处是希望您的有效负载足够小，因此以这种方式进行操作并没有返回每个可能的行以便可以在客户端进行过滤那样昂贵。