angularjs - Filter card list with Razor View

Question

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

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

And your input filter looks like

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

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

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>

}

Any ideas?

Answer 1

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

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>
}

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>

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.

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

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