Question

我试图在你使用时使用AngularJS制作一个过滤器：

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

您的输入过滤器看起来像

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

但是我正在使用Razor View处理MVC并且我不知道如何处理这个过滤器。

卡片列表的制作类似于：

@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);
}

另一种选择是进行客户端过滤。在项目上。但是，如果我朝这个方向发展，我会选择像客户端这样的客户端MVC框架来为我做这个

使用Razor View过滤卡片列表

1 个答案: