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涂上颜色，对我来说，它只是很快就喊出“添加另一个过滤器”的要求。

这是基本设计：

控制器方法将您在此处具有的表内容作为部分视图返回。

它（控制器方法）可选地具有作为过滤器选项的参数。（其中更多可以稍后添加；关键是，控制器正在执行过滤和发送数据）

您的JavaScript然后进行onchange只是向控制器发出对新过滤数据的发布请求。您可以根据需要使用jquery或vanilla设置html内容。您的控制器要么获取新数据以进行过滤，要么使用会话。无论哪种方式最适合您的需求。不过，您不需要ViewBag，这不是针对这种情况的。

这种设计的缺点是，每个过滤器都会在后台向服务器发送新请求。好处是希望您的有效载荷足够小，因此以这种方式进行操作并没有返回每个可能的行以便可以在客户端进行过滤那样昂贵。

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

1 个答案: