使用Razor View过滤卡列表 [英] Filter card list with Razor View

问题描述

我在尝试使用AngularJS时创建一个过滤器:

Im trying to make a filter like in AngularJS when u use:

ng-repeat =用户中的u | | filter:searchBar">

您的输入过滤器看起来像

And your input filter looks like

<输入type ="text" id ="searchBar"占位符=开始输入" ng-model ="searchBar">

但是使用Razor View在MVC上无法正常工作的事情，我不知道该如何使用此过滤器.

But the things its that im working on MVC with Razor View and I do not know how to approach this filter.

卡片列表是用foreach制成的，例如:

The list of cards is made with a foreachlike this:

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

</div>

}

有什么想法吗?

推荐答案

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

You can do the filtering with ajax. Here is a server side filtering solution.

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

First, you should move the code which renders the result to a partial view. Let's say you created a partial view called CustomerList.cshtml. Move the list code to that.

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

现在在主视图中，您可以调用此局部视图并将数据传递给它.将调用包装到容器div中的局部视图.为用户添加输入元素以输入搜索键.假设您的主视图也被严格键入 IEnumerable< Customer>

Now in your main view, you can call this partial view and pass the data to it. Wrap the call to the partial view in a container div. Add a input element for user to enter the search key. Assuming your main view is also strongly typed to 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调用，并获取过滤后的数据集，将其传递到相同的局部视图并返回局部视图结果.

Now we need to have some javascript code which listen to the keyup event on the search input, read the value of it and make an ajax call to the server where it uses the search key and get the filtered set of data, pass that to the same partial view and return the partial view result.

您可以使用jQuery $.get 方法

You can use jQuery $.get method

$(document).ready(function () {

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

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

现在确保您的服务器操作方法返回这样的过滤数据

Now make sure your server action method returns the filtered data like this

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

Another option is to do client side filtering. on the items. But if i am going that direction, i would choose a client side MVC framework like angular to do that for me

这篇关于使用Razor View过滤卡列表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！