How to search (filter) records using Angularjs with ASP.NET MVC 5 | ASPMANTRA | Asp.Net,MVC,AngularJs,Jquery,Javascript,Sql Server AND WCF snippets and tutorial

How to search (filter) records using Angularjs with ASP.NET MVC 5

In this article I am going to explain How to search OR filter records using Angularjs with ASP.NET MVC 5

How to search (filter) records using Angularjs with ASP.NET MVC 5

To filter the data we use the Filter.  I am displaying the data in using ng-repeat in grid format. We can use filter like ng-repeat="city in cities| filter:{CityName:cname}


I am using database first approach. I have created a table Tb_City and insert some dummy data into database. Complete code given below.

    public partial class Tb_City
        public int Id { get; set; }
        public string CityName { get; set; }

Add Controller:
Add an empty controller to project. Create Json action to get data from database.

Compete code of Controller (AngularController.cs):

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using MVC_Project.Models;
namespace MVC_Project.Controllers
    public class AngularController : Controller
        // GET: /Angular/
        DemoEntities1 db = new DemoEntities1();
        public ActionResult Index()
            return View();
        public JsonResult Getcity()
             var city = db.Tb_City.ToList();
             return Json(city, JsonRequestBehavior.AllowGet);          

Add View
Add view to Index. Design the view as shown below.

Complete code of View(index.cshtml):
    ViewBag.Title = "MVC-AngualarJs Tutorial";
    table tr td th {
        text-align: center;
    a {
        text-decoration: none;
        color: #2196F3;
<h2>MVC-AngualarJs Tutorial : Filter Example</h2>
<fieldset style="width:30%">
    <legend>AngualarJs Tutorial : Filter Example</legend>

    <div ng-app="mvcapp" ng-controller="AngularController">
               <td>Search :</td>
               <td colspan="2"><input type="text" ng-model="cname" placeholder="Search"></td>
               <th><a href="" ng-click="columnToOrder='id';reverse=!reverse">S.No.</a></th>
               <th class="name">
                   <a href="" ng-click="columnToOrder='CityName';reverse=!reverse">CityName</a>
           <tr ng-repeat="city in cities| filter:{CityName:cname} |orderBy:columnToOrder:reverse">
               <td>{{city.CityName }}</td>
        <div ng-show="(cities|filter:cname).length==0" style="color:red;font-weight:bold">No Result Found</div>
<script src=""></script>
    var angular = angular.module('mvcapp', []);
    angular.controller('AngularController', function ($scope, $http) {     
        function Getallitem()
            $http.get('/Angular/Getcity').success(function (data) {
                $scope.cities = data;

Build and run the application. Search the result. If records exist it will be display to you.

Post a Comment



Contact Form


Email *

Message *

Powered by Blogger.
Javascript DisablePlease Enable Javascript To See All Widget