Angularjs 带有Razor视图的过滤卡列表

我正在尝试制作一个类似AngularJS的过滤器，当你使用：

ng repeat=“用户中的u |过滤器：搜索栏”>

您的输入过滤器如下所示

但是我正在使用Razor View开发MVC，我不知道如何使用这个过滤器

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

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

</div>

}

@foreach{var模型中的项）{
一些内容
}

---

有什么想法吗？

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

首先，您应该将呈现结果的代码移动到局部视图。假设您创建了一个名为

CustomerList.cshtml

的局部视图。将列表代码移动到该视图

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

现在，确保您的服务器操作方法像下面这样返回经过筛选的数据

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框架来为我这样做

所以你想使用angular来完成这项工作吗？不，我说我正在使用Razor View开发MVC，但我需要angular这样的函数，或者任何完成这项工作的函数@ErikPhilips忘了标记你你可以用ajax进行搜索。什么是

模型

？你的视图强类型化是什么？@Shyju Models是MVC的一个模型，只是写得很快，让问题更简单；我的视图被强类型化为IEnumerable。我考虑过ajax，但我想要前端（Razor视图）为了处理这个过程，我一直在寻找客户端解决方案，但考虑到我仅限于使用Razor视图，我将不得不选择解析服务器端。Razor是服务器端。Razor视图中的代码将在服务器中执行，生成的html将被呈现。我是否可以使用Razor和AngularJS没有任何问题？因为我熟悉Angular，但我是MVC新手，最好在客户端制作一些东西，比如过滤。是的。在这种情况下，razor视图将是一个简单的占位符，其中包含Angular所需的标记。然后您将获得Angular ng rep所需的数据eat指令（这是一个数组）并使用它。很棒的@Shyju然后我会尽快将AngularJS链接到我的项目。非常感谢！

$(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);
}