Question

我通过“汽车类别”对其进行过滤的视图部分：

<div class="form-group">
  <select class="form-control" id="sel1">
     <option value="" disabled selected hidden>Car Styles</option>
         @foreach (var item in Model.CarCats)
            {
              <option value="@item.CarCategoryID">@item.CarCategoryName</option>
             }
         </select>
       </div>

我有车的视图部分：

@foreach (var item in Model.Cars)
        {
                <div class="col-lg-4">
                    <div class="carGalleryWrapper">
                        <div class="carGallery" style="background:url('@Html.DisplayFor(modelItem=>item.ImagePath)') no-repeat 0 0 ">
                            <div class="carDetails">
                                <h4>@Html.DisplayFor(modelItem => item.DailyFee) / Per Day</h4>
                                <h3>@Html.DisplayFor(modelItem => item.Make) @Html.DisplayFor(modelItem => item.Model), Navi, Leather, ABS</h3>
                                <button type="submit" class="driveMore">
                                    @Html.ActionLink("Drive Now", "Detail", null, new { id = item.CarID }, htmlAttributes: new {})</button>
                            </div>
                        </div>
                    </div>
                </div>
            }

我想从下拉列表中选择一个类别的汽车。

Answer 1

有几种解决方法

使用表格并填充新的汽车列表服务器端（服务器端）使用您处理表单的方法提交具有所选类别的表单从您的列表中删除没有该类别的汽车，等等。 here是一个很好的例子在采用页面模型的方法（将在表单提交中发布的方法）中，您将在其中按类别过滤汽车列表。然后返回同一页面。它不使用js，因此即使您的用户在其浏览器中禁用了js，它也始终可以工作，但是由于页面重新加载，它并不是最友好的用户。
使用js调用一个接受类别并返回新的汽车列表（客户端和服务器端）的api 然后用新列表重新填充您的前端我的js没有任何好处，但是粗略的想法是创建一个api控制器，它将接收您的类别并返回过滤后的列表。如果您查看ajax调用的成功响应，请看一下答案here，它会建立html，这就是您需要处理的api返回的过滤列表
使用js和CSS根据所选类别（客户端）隐藏/显示汽车

您有偏好吗？

如何在剃须刀页面中通过过滤器显示数据？

1 个答案: