使用 Razor 视图过滤卡片列表

Question

当你使用时，我试图像在 AngularJS 中一样制作过滤器：

ng-repeat="u in users | filter:searchBar">

你的输入过滤器看起来像

<input type="text" id="searchBar" placeholder="start typing" ng-model="searchBar">

但是我正在使用 Razor View 在 MVC 上工作，我不知道如何处理这个过滤器。

卡片列表是用这样的 foreach 制作的：

@foreach{ var item in Models){
<div class="card">
  <div class="card-container">
    some content
  </div>

</div>

}

有什么想法吗？

Answer 1

您可以使用 ajax 进行过滤。这是一个服务器端过滤解决方案。

首先，您应该将呈现结果的代码移动到局部视图。假设您创建了一个名为 CustomerList.cshtml 的局部视图。将列表代码移至该位置。

@model IEnumerable<Customer>
@foreach (var item in Model)
{
    <div class="card">
        <div class="card-container">
            @item.Name
        </div>
    </div>
}

现在在您的主视图中，您可以调用此局部视图并将数据传递给它。将对部分视图的调用包装在容器 div 中。添加输入元素供用户输入搜索键。假设你的主视图也被强类型化为IEnumerable<Customer>

@model IEnumerable<Customer>
<input type="text" id="search" data-url="@Url.Action("Index")" />
<div id="div-items">
    @Html.Partial("CustomerList",Model)
</div>

现在我们需要一些 javascript 代码来监听搜索输入上的 keyup 事件，读取它的值并对使用搜索键的服务器进行 ajax 调用并获取过滤后的数据集，将其传递给相同的局部视图并返回局部视图结果。

可以使用jQuery$.get方法

$(document).ready(function () {

    $("#search").keyup(function() {
        var v = $(this).val();

        $.get($(this).data("url"), { searchKey: v }).done(function(res) {
            $("#div-items").html(res);
        });
    });
});

现在确保您的服务器操作方法返回过滤后的数据，如下所示

public ActionResult Index(string serchKey="")
{
    var items = db.Customers.AsQueryable();
    if (!String.IsNullOrEmpty(searchKey))
    {
        items = items.Where(a => a.Name.StartsWith(searchKey));
    }
    var t = items.ToList();
    if (Request.IsAjaxRequest())
    {
        return PartialView("CustomerList",t );
    }
    return View(t);
}

另一种选择是进行客户端过滤。物品上。但是如果我朝着这个方向前进，我会选择像 angular 这样的客户端 MVC 框架来为我做这件事